W ramach integracji MediaStream z WebRTC interfejs Web Audio API otrzymał niedawno ukrytą perełkę o nazwie createMediaElementSource(). Umożliwia ono połączenie elementu HTML5 <audio> jako źródła danych wejściowych interfejsu API. W uproszczeniu: możesz wizualizować dźwięk w formacie HTML5, dokonywać w czasie rzeczywistym mutacji dźwięku, filtrować itp.
Zazwyczaj interfejs Web Audio API działa, wczytując utwór za pomocą XHR2, wejścia pliku itp., ale w tym przypadku nie musisz tego robić. Ten element spowoduje połączenie HTML5 <audio> z wizualizacją, filtrem i mocą obliczeniową interfejsu Web Audio API.
Integracja z <audio> jest idealna do strumieniowego przesyłania dość długich zasobów audio. Załóżmy, że plik trwa 2 godziny. Nie chcesz tego dekodować. Jest to też przydatne, jeśli chcesz utworzyć zaawansowane API (i interfejs użytkownika) odtwarzacza multimediów do uruchamiania, wstrzymywania i przewijania, ale chcesz zastosować dodatkowe przetwarzanie lub analizę.
Jak to wygląda:
// 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);
Jak widać w kodzie, występuje błąd, który wymaga skonfigurowania źródła po window.onload.
Kolejnym logicznym krokiem jest naprawienie adresu crbub.com/112367. Gdy to będzie gotowe, możesz połączyć WebRTC (w szczególności interfejs API navigator.getUserMedia()) z wejściowym sygnałem audio (np.mikrofonem, mikserem, gitarą) i przesłać go do tagu <audio>, a potem zwizualizować za pomocą interfejsu Web Audio API. Mega huk!