Sebagai bagian dari Integrasi MediaStream dengan WebRTC, Web Audio API baru-baru ini mendapatkan fitur tersembunyi yang dikenal sebagai createMediaElementSource(). Pada dasarnya, ini memungkinkan Anda menghubungkan elemen <audio> HTML5 sebagai sumber input ke API. Dalam istilah awam...Anda dapat memvisualisasikan audio HTML5, melakukan mutasi suara real-time, pemfilteran, dll.
Biasanya, Web Audio API berfungsi dengan memuat lagu melalui XHR2, input file, apa pun,....dan Anda siap. Sebagai gantinya, hook ini memungkinkan Anda menggabungkan <audio> HTML5 dengan visualisasi, filter, dan kemampuan pemrosesan Web Audio API.
Mengintegrasikan dengan<audio> sangat ideal untuk melakukan streaming aset audio yang cukup panjang. Misalnya, file Anda berdurasi 2 jam. Anda tidak ingin mendekode seluruhnya. Hal ini juga menarik jika Anda ingin mem-build API (dan UI) pemutar media tingkat tinggi untuk putar/jeda/cari, 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 tercantum dalam kode, ada bug yang mengharuskan penyiapan sumber terjadi setelah
window.onload.
Langkah logis berikutnya adalah memperbaiki crbub.com/112367. Setelah puppy tersebut siap, Anda dapat menghubungkan WebRTC (khususnya navigator.getUserMedia() API) untuk menyalurkan input audio (misalnya mikrofon, mixer, gitar) ke tag <audio>, lalu memvisualisasinya menggunakan Web Audio API. Mega boom!