به عنوان بخشی از ادغام 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. مگا بوم!