作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
例如,我想将 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 中像流一样加载音频文件?
最佳答案
您需要以流方式处理 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
可以用,但是比较复杂
关于javascript - 如何将音频文件像流一样加载到 AudioContext 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41122046/
我是一名优秀的程序员,十分优秀!