如何将音频文件像流一样加载到 AudioContext 中？

Question

例如，我想将 100MB mp3 文件加载到 AudioContext 中，我可以使用 XMLHttpRequest 来做到这一点。

但是使用这个解决方案，我需要加载所有文件，然后才能播放它，因为onprogress方法不返回数据。

xhr.onprogress = function(e) {
   console.log(this.response); //return null 
};

我也尝试用方法做到这一点fetch，但这种方式有同样的问题。

fetch(url).then((data) => {
   console.log(data); //return some ReadableStream in body, 
                      //but i can't find way to use that
});

有什么方法可以在客户端 JavaScript 中加载音频文件（如流）？

Answer 1

您需要以流方式处理 ajax 响应。在所有浏览器正确实现 fetch 和 ReadableStream 之前，没有标准方法可以做到这一点

我将根据新标准向您展示如何处理 ajax 响应流的最正确方法

// only works in Blink right now
fetch(url).then(res => {
     let reader = res.body.getReader()
     let pump = () => {
         reader.read().then(({value, done}) => {
             value // chunk of data (push chunk to audio context)
             if(!done) pump()
         })
     }
     pump()
})

Firefox 正在致力于实现流，但在此之前您需要使用 xhr，而moz-chunked-arraybuffer IE/edgems-stream可以使用，但它更复杂