Audio HTML5 dan Web Audio API adalah BFF

Sebagai bagian dari Integrasi MediaStream dengan WebRTC, Web Audio API baru-baru ini mendapatkan permata tersembunyi yang dikenal sebagai createMediaElementSource(). Pada dasarnya, hal ini memungkinkan Anda menghubungkan elemen <audio> HTML5 sebagai sumber input ke API. Dengan istilah orang awam...Anda dapat memvisualisasikan audio HTML5, melakukan mutasi suara secara realtime, pemfilteran, dll!

Biasanya, Web Audio API berfungsi dengan memuat lagu melalui XHR2, input file, apa saja,....dan saat Anda keluar. Sebagai gantinya, hook ini memungkinkan Anda menggabungkan <audio> HTML5 dengan kemampuan visualisasi, filter, dan pemrosesan Web Audio API.

Integrasi dengan <audio> ideal untuk melakukan streaming aset audio yang berdurasi cukup panjang. Misalnya file Anda berdurasi 2 jam. Anda tidak ingin memecahkan kode tersebut! Menarik juga jika Anda ingin mem-build API (dan UI) media player tingkat tinggi untuk pemutaran/jeda/pencarian, tetapi ingin menerapkan beberapa pemrosesan/analisis tambahan.

Berikut ini tampilannya:

// 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);

Seperti yang disebutkan dalam kode, ada bug yang mengharuskan penyiapan sumber dilakukan setelah window.onload.

Langkah logis berikutnya adalah memperbaiki crbub.com/112367. Setelah anak tersebut siap, Anda akan dapat menghubungkan WebRTC (khususnya navigator.getUserMedia() API) untuk menyalurkan input audio (misalnya mikrofon, mixer, gitar) ke tag <audio>, lalu memvisualisasikannya menggunakan Web Audio API. Ledakan besar!