buffered属性详解

最近在做一个基于微信的H5页面，其中涉及到音频播放的内容，例如播放、暂停、跳转进度条等基本功能差不多都实现了，但是想做个以前没做过的功能，在原有的功能上加个缓冲进度条，于是开始上W3C查找资料，找到这么一个属性——buffered，对其解释为：

buffered 属性返回 TimeRanges 对象。
TimeRanges 对象表示用户的音视频缓冲范围。
缓冲范围指的是已缓冲音视频的时间范围。
如果用户在音视频中跳跃播放，会得到多个缓冲范围。

这么一看，这个TimeRanges对象应该就是关键所在了，那么再看看TimeRanges对象的属性：

• length ： 获得音视频中已缓冲范围的数量
• start(index) ： 获得某个已缓冲范围的开始位置
• end(index) ： 获得某个已缓冲范围的结束位置

这样看来，我们已经可以利用现有的知识去制作缓冲条了，开始上代码：

// CSS略去...
// HTML
<audio id="myAudio" src="myMusic.mp3" controls autoplay></audio>
<div>Loaded: <span></span>%</div>
<div>Played: <span></span>%</div>
<div class="control">
  <span id="buffered"></span>
  <span id="progress"></span>
</div>

// JS
<script>  
var myAudio = document.getElementById('myAudio');
var myBuffered = document.getElementById('buffered');
var myProgress = document.getElementById('progress');

//监听播放，触发播放条样式改变
myAudio.addEventListener("timeupdate", onProgress, false);
onProgress();

function onProgress() {
    myProgress.css("width", (myAudio.currentTime / myAudio.duration) * 100 + '%');
}

//缓冲进度条功能，进度条样式随进度改变
functionon onBuffered() {
    var buffered = myAudio.buffered,
         loaded, played;

    if (buffered.length) {
         loaded = 100 * buffered.end(0) / myAudio.duration;
         played = 100 * myAudio.currentTime / myAudio.duration;
         myBuffered.innerHTML = loaded.toFixed(2);
         myProgress.innerHTML = played.toFixed(2);
         myBuffered.css("width", loaded + "%");
     }

      setTimeout(onBuffered, 50);
}
</script>

好啦！这样进度条就完成了，截图如下：

音频缓冲条