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