Nell'ambito dell'integrazione di MediaStream con WebRTC, l'API Web Audio ha recentemente aggiunto una perla sotto copertura nota come createMediaElementSource(). Essenzialmente, ti consente di collegare un elemento <audio> HTML5 come origine di input all'API. Puoi visualizzare l'audio HTML5, apportare mutazioni del suono in tempo reale, applicare filtri e così via!
Normalmente, l'API Web Audio carica un brano tramite XHR2, l'input di file o qualsiasi altra cosa... e il gioco è fatto. Invece, questo hook ti consente di combinare <audio> HTML5 con la visualizzazione, il filtro e la potenza di elaborazione dell'API Web Audio.
L'integrazione con <audio> è ideale per lo streaming di asset audio abbastanza lunghi. Supponiamo che il tuo file abbia una durata di due ore. Non si vuole decodificare tutto questo! È interessante anche se vuoi creare un'API (e una UI) per il media player di alto livello per riproduzione/pausa/ricerca, ma vuoi applicare ulteriori elaborazioni/analisi.
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 che la configurazione del codice sorgente venga eseguita dopo il giorno window.onload.
Il passaggio logico successivo è la correzione del problema crbub.com/112367. Quando il cucciolo sarà pronto, potrai collegare WebRTC (in particolare l'API navigator.getUserMedia()) per reindirizzare l'input audio (ad esempio microfono, mixer, chitarra) a un tag <audio> e visualizzarlo utilizzando l'API Web Audio. Grande boom!