W ramach integracji MediaStream z Web Audio API w interfejsie Web Audio API znaleziono niedawno ukryty klejnot o nazwie createMediaElementSource()
. Zasadniczo pozwala podłączyć element <audio>
HTML5 jako źródło danych wejściowych do interfejsu API. Mówiąc w skrócie: można wizualizować dźwięk w formacie HTML5, wprowadzać mutacje dźwięku w czasie rzeczywistym, filtrować je itd.
Standardowo interfejs Web Audio API polega na wczytywaniu utworu przez XHR2, danych wejściowych pliku itd. Ten punkt zaczepienia umożliwia połączenie HTML5 <audio>
z wizualizacją, filtrowaniem i przetwarzaniem interfejsu Web Audio API.
Zintegrowanie z <audio>
doskonale sprawdza się w przypadku strumieniowego przesyłania dość długich zasobów audio. Załóżmy, że plik trwa 2 godziny. To ciężko dekodować tego całego filmu. Jest to też interesujące, jeśli chcesz utworzyć wysoki poziom interfejsu API odtwarzacza (i UI) do odtwarzania, 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 zaznaczono w kodzie, występuje błąd, który wymaga, aby konfiguracja źródła została skonfigurowana po window.onload
.
Następnym logicznym krokiem jest naprawienie adresu crbub.com/112367. Gdy szczeniak będzie gotowy, możesz podłączyć WebRTC (zwłaszcza interfejs navigator.getUserMedia()
API) do wejścia audio (np.mikrofonu, miksera, gitary) do tagu <audio>
, a następnie zwizualizować go za pomocą interfejsu Web Audio API. Bomba!