Ich habe eine Website, auf der ich die Frequenz des Live Mic Audio anzeigen muss. Ich habe eine this code, aber es ist extrem schwierig zu verstehen (Es verwendet Fourier-Transformation und alle). Bei einigen Untersuchungen habe ich von getByteFrequencyData()
, die die Frequenz des Audios zurückgibt, kennen gelernt. Hat jemand es vorher mit Live Mic Audio bevorzugt in Web Audio API verwendet?Einfacher Code zum Berechnen der Frequenz von Live Mic Audio mit WebAudio API
5
A
Antwort
8
"Die Frequenz anzeigen" kann viele Dinge bedeuten. Tatsächlich verwendet meine PitchDetect-Demo KEINE Fourier-Transformation - sie verwendet Autokorrelation. Aber das wird Ihnen nur eine einzige Tonhöhe mit hoher Genauigkeit geben. Wenn Ihr Signal mehrere gleichzeitige Noten hat - das ist ein schweres Problem.
Wenn Sie eine Frequenzanalyse des Live-Mikrofoneingangs anzeigen möchten, lesen Sie http://webaudiodemos.appspot.com/AudioRecorder/index.html (Code unter https://github.com/cwilso/AudioRecorder). Das verwendet die integrierte FFT im RealtimeAnalyser, um ein Frequenzspektrum eines Live-Audiosignals anzuzeigen.
7
Ich schreibe einen einfachen Code, den Sie Frequenz in Ihrer Webseite zeigen:
<body>
<audio id="audio" src="2.mp3"></audio>
<div id="bar">
<div id="P10" class="p"></div>
<div id="P20" class="p"></div>
<div id="P30" class="p"></div>
<div id="P40" class="p"></div>
<div id="P50" class="p"></div>
<div id="P60" class="p"></div>
<div id="P70" class="p"></div>
<div id="P80" class="p"></div>
<div id="P90" class="p"></div>
</div>
Und Skript ist
<style>
#bar {
position: fixed;
top: 20%;
left: 40%;
width: 40%;
height: 40%;
-webkit-transition: 0.1s ease all;
}
.p {
background-color: blue;
height: 100%;
width: 10%;
float: left;
}
</style>
<script>
window.onload = function() {
audioCtx = new AudioContext();
analyser = audioCtx.createAnalyser();
source = audioCtx.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioCtx.destination);
analyser.fftSize = 32;
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
function renderFrame() {
analyser.getByteFrequencyData(frequencyData);
P10.style.height = ((frequencyData[0] * 100)/256) + "%";
P20.style.height = ((frequencyData[1] * 100)/256) + "%";
P30.style.height = ((frequencyData[2] * 100)/256) + "%";
P40.style.height = ((frequencyData[3] * 100)/256) + "%";
P50.style.height = ((frequencyData[4] * 100)/256) + "%";
P60.style.height = ((frequencyData[5] * 100)/256) + "%";
P70.style.height = ((frequencyData[6] * 100)/256) + "%";
P80.style.height = ((frequencyData[7] * 100)/256) + "%";
P90.style.height = ((frequencyData[8] * 100)/256) + "%";
console.log(frequencyData)
requestAnimationFrame(renderFrame);
}
audio.pause();
audio.play();
renderFrame();
};
</script>
Viel Glück.
Verwandte Themen
- 1. Frequenz Musiknote in Web Audio API
- 2. Chrome Extension webAudio API stoppt Windows Energiesparmodi
- 3. Wie verschieben/modulieren Audiopuffer Frequenz mit dem Web Audio API
- 4. WebAudio API und Cordova spielen immer noch Audio am Ausgang
- 5. Merging/Mischen von zwei Audio-Streams mit WebAudio
- 6. berechnen Frequenz sql
- 7. Live-Streaming-Audio mit ASP.NET
- 8. Speichern von gestreamten Audio von Mic auf Adobe FMS
- 9. Empfangen von Audio-Byte-Arrays mit der HTML5-Audio-API?
- 10. Verwenden der Android Youtube-API zum Abspielen von Live-Streams
- 11. Silverlight Live Audio Streaming
- 12. Verwenden von WebAudio API, wie kurze Überblendung beim Überfliegen hinzufügen, um Audio "popping" zu vermeiden
- 13. Android Whistle Erkennung mit Mic
- 14. Ein Tool zum Berechnen der großen Zeitkomplexität von Java-Code?
- 15. Firefox WebAudio createMediaElementSource funktioniert nicht
- 16. Ressourcen zum Lernen Web-Audio-API
- 17. Verwenden von Node.js zum Streamen von Audio zu html5-Audio-Tag und Umgehen der iOS-Einschränkung
- 18. Live-Audio-Streaming mit Android 2.x
- 19. Audio Sample-Frequenz beruhen auf Kanälen?
- 20. Aufnahme im Midi-Format mit USB Mic
- 21. Setup Web-Audio-API-Quelle Knoten von Soundcloud
- 22. Einfacher testbarer PIC16F1703-Code?
- 23. WebRTC Live Audio Streaming/Broadcast
- 24. Erkennen von Live-Sprache mit Sphinx4 Java Api
- 25. Wordcloud von Datenrahmen mit der Frequenz Python
- 26. android AudioRecord Amplitude von MIC lesen
- 27. Wie kann man nur einen Teil des MP3 für die Verwendung mit der WebAudio API dekodieren?
- 28. WebAudio Streaming mit Abruf: DOMException: Kann Audiodaten nicht decodieren
- 29. Holen Sie Live-Streaming-Audio von NodeJS-Server zu Clients
- 30. Optionen zum Produzieren von Audio mit GWT
Ich suchte ein einfaches Beispiel wie dieses mit Bars, danke! – Macumbaomuerte
Ich kann es nicht glauben, es ist perfekt! Vielen Dank ! –