Im Rahmen der MediaStream-Integration mit WebRTC hat die Web Audio API vor Kurzem ein Undercover-Gem namens createMediaElementSource() gelandet. Im Grunde können Sie damit ein HTML5-<audio>-Element als Eingabequelle an die API anhängen. Für Laien: Du kannst HTML5-Audio visualisieren, Soundänderungen in Echtzeit vornehmen, filtern usw.
Normalerweise lädt die Web Audio API einen Song über XHR2, eine Dateieingabe usw. – und schon bist du fertig. Stattdessen kannst du mit diesem Hook HTML5-<audio> mit der Visualisierungs-, Filter- und Prozessorleistung der Web Audio API kombinieren.
Die Einbindung in <audio> ist ideal zum Streamen ziemlich langer Audioinhalte. Angenommen, Ihre Datei ist zwei Stunden lang. Sie möchten nicht alles decodieren! Es ist auch interessant, wenn Sie eine Mediaplayer-API (und Benutzeroberfläche) für Wiedergabe/Pause/Suche erstellen, aber zusätzliche Verarbeitungs-/Analysen ausführen möchten.
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 erwähnt, gibt es einen Programmfehler, der erfordert, dass die Quelleinrichtung nach window.onload erfolgt.
Der nächste logische Schritt ist die Fehlerbehebung bei crbub.com/112367. Sobald das Welpe bereit ist, können Sie WebRTC (insbesondere die navigator.getUserMedia() API) mit Audioeingaben (z. B. Mikrofon, Mischpult, Gitarre) an ein <audio>-Tag weiterleiten und es dann mithilfe der Web Audio API visualisieren. Mega-Boom!