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响应。没有标准的方法可以做到这一点，直到获取＆amp;已经在所有浏览器中正确实现了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 /边缘有ms-stream你可以使用，但它更复杂

Answer 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)
}

如何将音频文件加载到AudioContext中，如流？

2 个答案: