Nell'ambito dell'integrazione di MediaStream con WebRTC, l'API Web Audio ha recentemente introdotto una gemma nascosta nota come createMediaElementSource(). In sostanza, ti consente di collegare un elemento <audio> HTML5 come origine di input all'API. In parole povere, puoi visualizzare l'audio HTML5, applicare mutazioni audio in tempo reale, filtri e così via.
Normalmente, l'API Web Audio funziona caricando un brano tramite XHR2, input file e così via. Questo hook, invece, ti consente di combinare HTML5 <audio> con la potenza di visualizzazione, filtri ed elaborazione dell'API Web Audio.
L'integrazione con<audio> è ideale per lo streaming di risorse audio piuttosto lunghe. Supponiamo che il file duri 2 ore. Non vuoi decodificare tutto. È interessante anche se vuoi creare un'API (e un'interfaccia utente) di media player di alto livello per riprodurre/mettere in pausa/eseguire ricerche, ma vuoi applicare un'elaborazione/analisi aggiuntiva.
Ecco che aspetto ha:
// 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);
Come indicato nel codice, esiste un bug che richiede la configurazione dell'origine dopowindow.onload.
Il passaggio logico successivo è correggere crbub.com/112367. Una volta che il cucciolo è pronto, potrai collegare WebRTC (in particolare l'API navigator.getUserMedia()) per incanalare l'input audio (ad es.microfono, mixer, chitarra) in un tag <audio> e poi visualizzarlo utilizzando l'API Web Audio. Mega boom!