HTML5 Audio ve Web Audio API'si BFF'dir

Eric Bidelman

Medya kaynağı öğesi demosu
DEMO

WebRTC ile MediaStream Entegrasyonu'nun bir parçası olarak, Web Audio API'si kısa süre önce createMediaElementSource() olarak bilinen bir gizli cevher sunuyor. Temel olarak API'nin giriş kaynağı olarak bir HTML5 <audio> öğesini bağlamanıza olanak tanır. Başka bir deyişle, HTML5 sesini görselleştirebilir, gerçek zamanlı ses değişiklikleri, filtreleme ve benzeri işlemler yapabilirsiniz.

Normalde Web Audio API'sı XHR2, dosya girişi vb. aracılığıyla bir şarkı yükleyerek,....ve siz devre dışı bırakarak çalışır. Bunun yerine bu kanca HTML5 <audio>'ı Web Audio API'nın görselleştirme, filtre ve işleme gücüyle birleştirmenize olanak tanır.

<audio> ile entegrasyon, oldukça uzun ses öğelerinin akışı için idealdir. Dosyanızın 2 saat uzunluğunda olduğunu varsayalım. Tüm bunların kodunu çözmek istemezsiniz. Oynatma/duraklatma/arama için üst düzey bir medya oynatıcı API'sı (ve kullanıcı arayüzü) oluşturmak, ancak bazı ek işlemler/analiz uygulamak isterseniz de ilginç bir uygulamadır.

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 tarihinden sonra gerçekleşmesini gerektiren bir hata bulunmaktadır.

Bir sonraki mantıksal adım, crbub.com/112367 adresini düzeltmektir. Yavru köpek hazır olduğunda WebRTC'yi (özellikle navigator.getUserMedia() API'si) ses girişini (ör.mikrofon, mikser, gitar) bir <audio> etiketine borulayacak şekilde bağlayabilir, ardından Web Audio API'sını kullanarak bunu görselleştirebilirsiniz. Mega patlama!