כחלק מהשילוב של MediaStream עם WebRTC, ה-Web Audio API השיג לאחרונה פנינה נסתרת בשם createMediaElementSource(). בעיקרון, הוא מאפשר לחבר רכיב <audio> HTML5 כמקור הקלט ל-API. במילים פשוטות...ניתן ליצור הדמיה ויזואלית של אודיו ב-HTML5, לבצע מוטציות של צלילים בזמן אמת, סינון וכו'!
בדרך כלל, Web Audio API פועל על ידי טעינת שיר באמצעות XHR2, קלט קובץ או כל דבר אחר..., ובמקום זאת, ה-hook הזה מאפשר לך לשלב את HTML5 <audio> עם התצוגה החזותית, הסינון ועוצמת העיבוד של ממשק ה-API של Web Audio API.
השילוב עם <audio> אידיאלי לסטרימינג של נכסי אודיו ארוכים למדי. נניח שאורכו של הקובץ הוא שעתיים. אתם לא רוצים לפענח את כל הקטע הזה! אפשרות זו מעניינת גם אם תרצו לבנות ממשק API של נגן מדיה ברמה גבוהה (וממשק משתמש) לצורך הפעלה/השהיה/חיפוש, אבל תרצו לבצע עיבוד/ניתוח נוסף.
היא נראית כך:
// 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>, ולאחר מכן להציג אותו באמצעות ממשק ה-API של Web Audio. בום בום!