El audio HTML5 y la API de Web Audio son mejores amigos

Demostración del elemento de fuente multimedia
DEMOSTRACIÓN

Como parte de la integración de MediaStream con WebRTC, la API de Web Audio lanzó recientemente una gema encubierta conocida como createMediaElementSource(). Básicamente, te permite conectar un elemento <audio> de HTML5 como fuente de entrada a la API. En términos sencillos, 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 archivo, lo que sea, y listo. En cambio, este hook te permite combinar <audio> HTML5 con la potencia de visualización, filtro y procesamiento de la API de Web Audio.

La integración con <audio> es ideal para transmitir elementos de audio bastante largos. Supongamos que tu archivo dura 2 horas. No es necesario que lo decodifiques por completo. También es interesante si deseas compilar una API (y IU) de reproductor multimedia de alto nivel para reproducir, pausar y buscar, pero quieres aplicar un poco de 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 origen se realice después de window.onload.

El siguiente paso lógico es corregir crbub.com/112367. Una vez que el cachorro esté listo, podrás conectar WebRTC (en particular, la API de navigator.getUserMedia()) para canalizar la entrada de audio (p. ej., micrófono, mezclador o guitarra) a una etiqueta <audio> y, luego, visualizarla mediante la API de Web Audio. ¡Bum!