Como parte da integração do MediaStream com o WebRTC, a API Web Audio conseguiu recentemente uma gema infiltrada conhecida como createMediaElementSource(). Basicamente, ela permite que você vincule um elemento <audio> HTML5 como a origem 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 via XHR2, entrada de arquivo, etc. e você está desativado. Em vez disso, esse gancho permite combinar <audio> do HTML5 com a visualização, o filtro e a capacidade de processamento da API de áudio da Web.
A integração com <audio> é ideal para fazer streaming de recursos de áudio bastante longos. Digamos que seu arquivo tenha duas horas de duração. Você não quer decodificar tudo isso. Também é interessante se você quiser criar uma API (e IU) de player de mídia de alto nível para reproduzir/pausar/buscar, mas quiser aplicar processamento/análise adicionais.
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 de origem aconteça após
window.onload.
A próxima etapa lógica é corrigir crbub.com/112367. Quando o filhote estiver pronto, você poderá conectar o WebRTC (em particular a API navigator.getUserMedia()) à entrada de áudio (por exemplo, microfone, mixer, guitarra) para uma tag <audio> e visualizá-la usando a API Web Audio. Pronto!