云音乐项目优化
问题一
使用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就可以拖动进度条了
