אודיו מסוג HTML5 ו-Web Audio API הם BFF

כחלק משילוב MediaStream עם WebRTC, לאחרונה נוספה ל-Web Audio API פנינה מוסתרת בשם createMediaElementSource(). בעיקרון, הוא מאפשר לחבר רכיב <audio> של HTML5 כמקור הקלט של ה-API. במילים פשוטות...אפשר להציג אודיו בפורמט HTML5 באופן חזותי, לבצע מוטציות של צלילים בזמן אמת, סינון וכו'.

בדרך כלל, Web Audio API פועל על ידי טעינת שיר דרך XHR2, קלט קובץ, וכו'… והפעלת הקוד. במקום זאת, ה-hook הזה מאפשר לשלב בין HTML5 <audio> לבין התכונות של Web Audio API, כמו ויזואליזציה, סינון ועיבוד.

השילוב עם <audio> מתאים במיוחד לשידור בזמן אמת של נכסי אודיו ארוכים למדי. נניח שהקובץ באורך שעתיים. לא רוצים לפענח את כל הנתונים האלה! כדאי להשתמש ב-MediaPlayer API גם אם רוצים ליצור ממשק 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 (במיוחד את ה-API של navigator.getUserMedia()) כדי להעביר קלט אודיו (למשל מיקרופון, מיקסר, גיטרה) לתג <audio>, ואז להציג אותו באופן חזותי באמצעות Web Audio API. בום גדול!