Web Audio API เพิ่งเปิดตัวฟีเจอร์ใหม่ที่เรียกว่า createMediaElementSource() ซึ่งเป็นส่วนหนึ่งของการผสานรวม MediaStream กับ WebRTC โดยพื้นฐานแล้ว ฟีเจอร์นี้ช่วยให้คุณเชื่อมต่อองค์ประกอบ <audio> ของ HTML5 เป็นแหล่งข้อมูลอินพุตไปยัง API ได้ พูดให้เข้าใจง่ายๆ คือคุณสามารถแสดงภาพเสียง HTML5, เปลี่ยนเสียงแบบเรียลไทม์, กรองเสียง และอื่นๆ
โดยปกติแล้ว Web Audio API จะทํางานโดยการโหลดเพลงผ่าน XHR2, อินพุตไฟล์ หรืออะไรก็ตาม แล้วคุณก็พร้อมใช้งาน แต่ฮุกนี้จะช่วยให้คุณรวม <audio> ของ HTML5 เข้ากับการแสดงภาพ ฟิลเตอร์ และความสามารถในการประมวลผลของ 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 (โดยเฉพาะ navigator.getUserMedia() API) เพื่อส่งผ่านอินพุตเสียง (เช่น ไมโครโฟน มิกเซอร์ กีตาร์) ไปยังแท็ก <audio> จากนั้นแสดงภาพโดยใช้ Web Audio API ได้ ว้าว