如何将音频文件像流一样加载到 AudioContext 中?
How to load audio file into AudioContext like stream?
例如,我想将 100MB 的 mp3 文件加载到 AudioContext 中,我可以使用 XMLHttpRequest 来实现。
但是使用这个解决方案我需要加载所有文件然后我才能播放它,因为 onprogress
方法没有 return 数据。
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?
您需要以流方式处理 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.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)
}
例如,我想将 100MB 的 mp3 文件加载到 AudioContext 中,我可以使用 XMLHttpRequest 来实现。
但是使用这个解决方案我需要加载所有文件然后我才能播放它,因为 onprogress
方法没有 return 数据。
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?
您需要以流方式处理 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.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)
}