javascript - 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。

摘自here

Rather than going the usual path of loading a sound directly by issuing an XMLHttpRe quest and then decoding the buffer, you can use the media stream audio source node (MediaElementAudioSourceNode) to create nodes that behave much like audio source nodes (AudioSourceNode), but wrap an existing tag. Once we have this node connected to our audio graph, we can use our knowledge of the Web Audio API to do great things. This small example applies a low-pass filter to the tag:

示例代码:

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();
}