最近在做一个基于微信的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>
好啦！这样进度条就完成了，截图如下：
音频缓冲条
