เมื่อเร็วๆ นี้ Web Audio API ได้เปิดตัว Web Audio API ที่ชื่อว่า createMediaElementSource() ซึ่งเป็นส่วนหนึ่งของการผสานรวม MediaStream กับ WebRTC โดยทั่วไปแล้ว เครื่องมือนี้จะช่วยให้คุณเชื่อมโยงองค์ประกอบ <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 เมกะบูม!