HTML5 音訊和 Web Audio API 都是 BFF

WebRTC 與 WebRTC 進行 MediaStream 整合後，Web Audio API 最近打破了一種稱為「createMediaElementSource()」的臥底寶石。基本上，您可以將 HTML5 <audio> 元素連接至 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 (特別是 navigator.getUserMedia() API)，將音訊輸入 (例如麥克風、mixer、吉他) 接上 <audio> 標記，然後使用 Web Audio API 以視覺化方式呈現這些資料。超讚！