Como parte da integração da MediaStream com o WebRTC, a API Web Audio lançou recentemente uma joia secreta conhecida como createMediaElementSource(). Basicamente, ele permite conectar um elemento <audio> HTML5 como a fonte de entrada da API. Em termos leigos, você pode visualizar áudio HTML5, fazer mutações de som em tempo real, filtrar etc.
Normalmente, a API Web Audio funciona carregando uma música por XHR2, entrada de arquivo, o que for....e você está pronto. Em vez disso, esse hook permite combinar <audio> do HTML5 com a visualização, o filtro e o poder de processamento da API Web Audio.
A integração com<audio> é ideal para transmitir recursos de áudio mais longos. Digamos que seu arquivo tenha 2 horas de duração. Você não quer decodificar tudo isso. Também é interessante se você quiser criar uma API (e uma interface) de player de mídia de alto nível para reproduzir/pausar/procurar, mas quiser aplicar algum processamento/análise adicional.
Veja o resultado:
// 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);
Conforme observado no código, há um bug que exige que a configuração da fonte aconteça após
window.onload.
A próxima etapa lógica é corrigir crbub.com/112367. Quando ele estiver pronto, você poderá conectar o WebRTC (a API navigator.getUserMedia() em particular) para transmitir a entrada de áudio (por exemplo, microfone, mixer, guitarra) para uma tag <audio> e, em seguida, visualizá-la usando a API Web Audio. Mega boom!