Dźwięk HTML5 i interfejs Web Audio API to najlepsze funkcje

Wersja demonstracyjna elementu źródła multimediów
Demonstracja

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!