Im Rahmen der MediaStream-Integration mit WebRTC wurde der Web Audio API vor Kurzem ein Geheimtipp namens createMediaElementSource() hinzugefügt. Im Grunde kannst du damit ein HTML5-<audio>-Element als Eingabequelle an die API anschließen. Einfach ausgedrückt: Du kannst HTML5-Audio visualisieren, Echtzeit-Tonveränderungen vornehmen, filtern usw.
Normalerweise wird mit der Web Audio API ein Song über XHR2, Dateieingabe usw. geladen. Mit diesem Hook kannst du stattdessen HTML5 <audio> mit der Visualisierung, den Filtern und der Verarbeitungsleistung der Web Audio API kombinieren.
Die Einbindung von<audio> eignet sich ideal für das Streaming relativ langer Audioinhalte. Angenommen, Ihre Datei ist 2 Stunden lang. Sie möchten nicht das gesamte Bild entschlüsseln. Es ist auch interessant, wenn du eine Mediaplayer-API (und -UI) für die Wiedergabe/Pause/Suche erstellen möchtest, aber zusätzliche Verarbeitung/Analysen anwenden möchtest.
Hier sehen Sie das Beispiel eines Testergebnisses:
// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
// Our <audio> element will be the audio source.
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
// ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);
Wie im Code angegeben, gibt es einen Fehler, der dazu führt, dass die Quelleinrichtung nach window.onload erfolgen muss.
Der nächste logische Schritt besteht darin, crbub.com/112367 zu korrigieren. Sobald das erledigt ist, kannst du WebRTC (insbesondere die navigator.getUserMedia() API) so konfigurieren, dass Audioeingaben (z. B. Mikrofon, Mixer, Gitarre) an ein <audio>-Tag weitergeleitet und dann mit der Web Audio API visualisiert werden. Mega-Boom!