最近在做一個基于微信的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>

好啦！這樣進度條就完成了，截圖如下：

音頻緩沖條