讲道理,在被坑之前,我认为这个东西应该是很简单的,直到…
一般有两种写法,audio src=''>
或者在audio下用source。
默认的样式很丑,于是我们都想用自定义一个滚动条,然后用currentTime来控制开始和播放的时间;然后发现,如果音频没有加载完成,是无法拖到后来未加载的部分的,就算设置了,也不会播放,还是要等加载。于是就想监测到加载完成的时间,然后尴尬的事情发生了,好像没有这个函数可以让你知道。
后来我找到了buffered和duration,前者可以知道当前缓存到了多少s的内容,后者是音频的总长度;当二者相等的时候,就是缓存完成的时候,于是就有了下面的看起来很粗糙的代码。刚开始的时候是videoPlayer.buffered.length为0和duration为NaN,需要稍微缓一缓,于是…然后这两个参数有数据之后,判断相等就行了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function getStatus(){ let videoPlayer = document.getElementById("myAudio"); let getTimeout1, getTimeout2 if (videoPlayer.buffered.length == 1) { if (videoPlayer.buffered.end(0) == videoPlayer.duration) { console.log('加载完成') clearTimeout(getTimeout2) } else { getTimeout2 = setTimeout(() => { console.log('已缓存时长' + videoPlayer.buffered.end(0)) console.log('总时长' + videoPlayer.duration) getStatus() }, 2000); } clearTimeout(getTimeout1) } else { getTimeout1 = setTimeout(() => { getStatus() }, 2000); } } |
1 2 3 |
<audio controls id="myAudio" :src="file.url" preload="auto" autobuffer="true"> Your browser does not support the audio tag. </audio> |