如何将音频文件加载到 AudioContext 之类的流中？答案

【问题标题】：How to load audio file into AudioContext like stream?如何将音频文件加载到 AudioContext 之类的流中？
【发布时间】：2017-04-28 13:40:42
【问题描述】：

例如，我想将 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 中加载像流这样的音频文件？

【问题讨论】：

标签： javascript audio xmlhttprequest fetch audiocontext

【解决方案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/edge 有 ms-stream 可以使用，但更复杂

【讨论】：

谢谢，看起来不错。但最后一个问题是 value 它不是 ArrayBuffer，我不能把它放在音频上下文中。
value.buffer 是一个 ArrayBuffer（与任何其他类型的数组 new Uint32Array().buffer 一样）
真的，谢谢:)

【解决方案2】：

如何将value.buffer 发送到AudioContext？

这只会播放第一个块，它不能正常工作。

const context = new AudioContext()
const source = context.createBufferSource()
source.connect(context.destination)
        
const reader = response.body.getReader()
        
while (true) {
    await reader.read()
    const { done, value } = await reader.read()

    if (done) {
        break
    }

    const buffer = await context.decodeAudioData(value.buffer)
    source.buffer = buffer
    source.start(startTime)
}

【讨论】：