HTML5 音訊和 Web Audio API 都是 BFF

媒體來源元素示範
DEMO

在 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 之後進行來源設定。

下一個合理的步驟是修正 crbug.com/112367。完成後，您就能將 WebRTC (特別是 navigator.getUserMedia() API) 連線至音訊輸入 (例如麥克風、混音器、吉他)，並將其傳送至 <audio> 標記，然後使用 Web Audio API 進行視覺化。超級爆炸！