Como parte de la integración de MediaStream con WebRTC, la API de Web Audio recientemente obtuvo una joya encubierta conocida como createMediaElementSource(). Básicamente, te permite conectar un elemento <audio> HTML5 como fuente de entrada a la API. En términos simples, puedes visualizar audio HTML5, hacer mutaciones de sonido en tiempo real, filtrar, etc.
Por lo general, la API de Web Audio funciona cargando una canción a través de XHR2, entrada de archivos, lo que sea, y listo. En cambio, este hook te permite combinar <audio> de HTML5 con la visualización, el filtro y el poder de procesamiento de la API de Web Audio.
La integración con<audio> es ideal para transmitir recursos de audio bastante largos. Supongamos que tu archivo dura 2 horas. No querrás decodificar todo eso. También es interesante si quieres compilar una API (y una IU) de reproductor multimedia de alto nivel para reproducir, pausar o buscar contenido, pero deseas aplicar algún procesamiento o análisis adicional.
A continuación, le mostramos cómo se ve:
// 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);
Como se indica en el código, hay un error que requiere que la configuración de la fuente se realice después de window.onload.
El siguiente paso lógico es corregir crbub.com/112367. Una vez que esté listo, podrás conectar WebRTC (la API de navigator.getUserMedia() en particular) para canalizar la entrada de audio (p. ej., micrófono, mezclador, guitarra) a una etiqueta <audio> y, luego, visualizarla con la API de Web Audio. ¡Megaboom!