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!