WebRTC ile MediaStream entegrasyonu kapsamında Web Audio API'ye kısa süre önce createMediaElementSource() olarak bilinen gizli bir mücevher eklendi. Temel olarak, API'ye giriş kaynağı olarak bir HTML5 <audio> öğesi bağlamanıza olanak tanır. Basitçe söylemek gerekirse, HTML5 sesleri görselleştirebilir, gerçek zamanlı ses mutasyonları yapabilir, filtreleme vb. yapabilirsiniz.
Normalde Web Audio API, XHR2 veya dosya girişi aracılığıyla bir şarkı yükleyerek çalışır. Bunun yerine bu kanca, HTML5 <audio>'i Web Audio API'nin görselleştirme, filtre ve işleme gücüyle birleştirmenize olanak tanır.
<audio> ile entegrasyon, oldukça uzun ses öğelerini yayınlamak için idealdir. Dosyanızın 2 saat uzunluğunda olduğunu varsayalım. Tümünün kodunu çözmek istemezsiniz. Oynatma/duraklatma/ileri sarma için yüksek düzey bir medya oynatıcı API'si (ve kullanıcı arayüzü) oluşturmak istiyorsanız ancak bazı ek işlemler/analizler uygulamak istiyorsanız da bu API'yi kullanabilirsiniz.
Bu sekme aşağıdaki gibi görünür:
// 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);
Kodda belirtildiği gibi, kaynak kurulumunun window.onload'den sonra yapılmasını gerektiren bir hata vardır.
Mantıksal olarak atılacak sonraki adım, crbub.com/112367 adresini düzeltmektir. Bu işlem tamamlandıktan sonra, ses girişini (ör.mikrofon, mikser, gitar) bir <audio> etiketine aktarmak için WebRTC'yi (özellikle navigator.getUserMedia() API'yi) bağlayabilir ve ardından Web Audio API'yi kullanarak görselleştirebilirsiniz. Mega boom!