Javascript-即時串流音頻（Web Audio API和XHR）

Question

我有一個運行簡單的xmlhttprequest來獲取音頻文件，完成獲取后，它將解碼並播放音頻。

        var xhr = new XMLHttpRequest();
        xhr.open('GET', /some url/, true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function() {
            decode(xhr.response); 
        }.bind(this);
        xhr.send(null);

但是，這樣做的問題是，僅在請求被加載/完成下載后文件才解碼。 是否有一種無需等待音頻下載就可以流式傳輸音頻的方法，而無需使用<audio>標簽

Answer 1

您仍然需要HTML5 Audio對象，但是可以直接使用MediaElementAudioSourceNode和Audio元素來使用Web API，而不是直接使用它並對其進行播放。

從這里摘錄

您可以使用媒體流音頻源節點（MediaElementAudioSourceNode）創建行為類似於音頻源節點（AudioSourceNode）的節點，而不是通過發出XMLHttpRe請求然后解碼緩沖區來直接加載聲音的通常方法現有標簽。 一旦將此節點連接到音頻圖表，就可以使用我們對Web Audio API的了解來完成出色的工作。 這個小例子對標簽應用了低通濾波器：

樣例代碼：

window.addEventListener('load', onLoad, false);

function onLoad() {
 var audio = new Audio();
 source = context.createMediaElementSource(audio);

 var filter = context.createBiquadFilter();
 filter.type = filter.LOWPASS;
 filter.frequency.value = 440;

 source.connect(this.filter);
 filter.connect(context.destination);

 audio.src = 'http://example.com/the.mp3';
 audio.play();
}