html5 audio – 某喵的光

讲道理，在被坑之前，我认为这个东西应该是很简单的，直到…

一般有两种写法，audio src=''> 或者在audio下用source。

默认的样式很丑，于是我们都想用自定义一个滚动条，然后用currentTime来控制开始和播放的时间；然后发现，如果音频没有加载完成，是无法拖到后来未加载的部分的，就算设置了，也不会播放，还是要等加载。于是就想监测到加载完成的时间，然后尴尬的事情发生了，好像没有这个函数可以让你知道。

后来我找到了buffered和duration，前者可以知道当前缓存到了多少s的内容，后者是音频的总长度；当二者相等的时候，就是缓存完成的时候，于是就有了下面的看起来很粗糙的代码。刚开始的时候是videoPlayer.buffered.length为0和duration为NaN，需要稍微缓一缓，于是…然后这两个参数有数据之后，判断相等就行了。

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);
    }
}

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);

}

<audio controls id="myAudio" :src="file.url" preload="auto" autobuffer="true">
     Your browser does not support the audio tag.
</audio>

Your browser does not support the audio tag.

</audio>