صدای HTML5 و Web Audio API BFF هستند

به عنوان بخشی از ادغام MediaStream با WebRTC، Web Audio API اخیراً یک گوهر مخفی به نام createMediaElementSource() دریافت کرد. اساساً، به شما امکان می دهد یک عنصر <audio> HTML5 را به عنوان منبع ورودی به API متصل کنید. به زبان ساده ... شما می توانید صدای HTML5 را تجسم کنید، جهش های صوتی بیدرنگ، فیلتر کردن، و غیره را انجام دهید!

به طور معمول، Web Audio API با بارگذاری یک آهنگ از طریق XHR2 ، ورودی فایل، هر چیزی که باشد، کار می کند و شما خاموش هستید. در عوض، این قلاب به شما امکان می دهد HTML5 <audio> با تجسم، فیلتر و قدرت پردازش Web Audio API ترکیب کنید.

ادغام با <audio> برای پخش دارایی های صوتی نسبتا طولانی ایده آل است. فرض کنید فایل شما 2 ساعت است. شما نمی خواهید کل آن چیز را رمزگشایی کنید! همچنین جالب است اگر می خواهید یک API (و UI) پخش کننده رسانه سطح بالا برای پخش/مکث/جستجو بسازید، اما می خواهید مقداری پردازش/تحلیل اضافی را اعمال کنید.

در اینجا به نظر می رسد:

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

همانطور که در کد ذکر شد، یک اشکال وجود دارد که نیاز به تنظیم منبع پس از window.onload دارد.

مرحله منطقی بعدی رفع crbub.com/112367 است. هنگامی که آن توله سگ آماده شد، می‌توانید WebRTC (به ویژه API navigator.getUserMedia() ) را برای انتقال ورودی صوتی (مانند میکروفن، میکسر، گیتار) به تگ <audio> متصل کنید، سپس آن را با استفاده از تگ تجسم کنید. Web Audio API. مگا بوم!