Karam
Articles68
Tags50
Categories14
云音乐项目优化

云音乐项目优化

问题一

使用audio标签,无法拖动进度条,设置audio.currentTime失效

原因

服务器的响应头信息有关

如何解决

在没有经过优化的情况下,我直接使用koa-static和audio的src标签,一个音频的下载速度在17秒左右,其实也可想而知为什么无法拖动进度条,也许那段内容还未下载完

使用new Blob接收数据后,请求的速度变为

之前并没有深究过http传输和接收数据的流程,不太懂Blob这个对象
使用二进制流读取文件,让文件加载速度快了几百倍
使用了ES5的数据劫持劫持了自定义的属性,自定义发送数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Object.defineProperty(Image.prototype, 'authsrc', {
writable: true,
enumerable: true,
configurable: true
})
let audio = document.getElementById('myaudio')
let url = newValue.src
let request = new XMLHttpRequest()
request.open('get', url, true)
request.setRequestHeader('Cache-Control', 'no-cache')
request.responseType = 'arraybuffer'
request.onreadystatechange = e => {
if(request.readyState == XMLHttpRequest.DONE && request.status == 200) {
let binaryData = [];
binaryData.push(request.response)
audio.src = window.URL.createObjectURL(new Blob(binaryData))
audio.onload = () => {
window.URL.revokeObjectURL(audio.src)
}
}
}
request.send(null)

然后把响应的类型改为arraybuffer就可以拖动进度条了