此播放器已更新到 2.0 版本，可以前去我的 Github 查看更新內(nèi)容

這兩天寫(xiě)了一個(gè)在線音樂(lè)播放器，支持播放本地音樂(lè)，并且可以調(diào)整音量，顯示進(jìn)度條。 下圖是效果

demo01.gif

當(dāng)然，你還可以 在線體驗(yàn)，接下來(lái)我會(huì)針對(duì)本程序的一些疑難點(diǎn)進(jìn)行解析。如果你想查看源碼，你可以 點(diǎn)擊這里

1. 圖標(biāo)的使用

這里的圖標(biāo)取自 FontAwesome,這是一種字體圖標(biāo)，所以它可以隨著字體顏色的改變而改變，它的大小也是由字體的大小決定的，也就是 font-size 。

2. Progress 默認(rèn)樣式的改變

其實(shí)不難看出，程序中對(duì)進(jìn)度條的顏色進(jìn)行了設(shè)置，顏色的合理使用可以改變用戶體驗(yàn)，所以我認(rèn)為這還是很有必要的。關(guān)于這一點(diǎn)，有興趣的人可以去看 HTML5 progress元素的樣式控制、兼容與實(shí)例。

主要是下面兩段代碼，上面一段是適配 Google Chrome 和 Safari, 下面則是為了適配 Firefox 。

progress::-webkit-progress-value {
    background: #6cf;
}

progress::-moz-progress-bar {
    background: #6cf;
}

3. 音樂(lè)信息的獲取

首先，我們需要在 JS 中取得 audio

var player = document.getElementById("player");

然后我們可以調(diào)用 player.duration 獲取音頻的總時(shí)長(zhǎng)(s)， player.currentTime 可以取得當(dāng)前已經(jīng)播放的時(shí)長(zhǎng)，我們可以利用這個(gè)這個(gè)屬性與總時(shí)長(zhǎng)的比值更新進(jìn)度條。player.volume 可以取得音頻播放時(shí)的音量，取值在 0.0 - 1.0 之間。

4. 設(shè)置間歇調(diào)用

為了更新進(jìn)度條，我設(shè)置了間歇調(diào)用，具體語(yǔ)句如下。

var interval = setInterval(change, 1000);

也就是說(shuō)，每隔 1s 調(diào)用 change 這個(gè)函數(shù)，下面來(lái)解釋 change 函數(shù)。

function change() {
    setCurrentTime();
    var currentTime = player.currentTime,
        duration = player.duration;

    var progress = (currentTime / duration).toFixed(2) * 100;
    progressElement.value = progress;
}

首先，調(diào)用 setCurrentTime() , 這個(gè)函數(shù)用于更新當(dāng)前播放時(shí)間。 progress 變量用于計(jì)算進(jìn)度條的值，注意將比值的結(jié)果轉(zhuǎn)換成兩位數(shù)，然后轉(zhuǎn)換成百分制。

5. 監(jiān)聽(tīng)音頻播放完畢事件

當(dāng)音頻播放完畢后，會(huì)觸發(fā) ended 事件，我們要監(jiān)聽(tīng)這一事件進(jìn)行善后處理，具體要做那些事情呢？

• 清除間歇調(diào)用
• 清空進(jìn)度條
• 清除音頻已播放時(shí)間，并將其置為 0:00
• 改變播放按鈕的圖標(biāo)

如果有興趣的話，完全可以在音頻播放完畢后設(shè)置 loop 屬性，重新再播放一遍。

6. 上傳音樂(lè)

目前，這個(gè)程序也只能播放本地音樂(lè)，那么要怎么選中本地音樂(lè)并且播放呢？

首先，你可能會(huì)想到用 input， 但那 UI 也太丑了吧？ 所以，我們需要做一些改變，我們?nèi)匀皇褂?input 控件，但是我們將其 display 設(shè)置為 none， 然后我們?cè)俣x一個(gè)標(biāo)簽，并且監(jiān)聽(tīng)其點(diǎn)擊事件，如果事件觸發(fā)，那么我們就手動(dòng)觸發(fā) input 控件的點(diǎn)擊事件。具體操作如下所示。

• input 控件

<input type="file" id="file">

#file {
display: none;
}

• 自選標(biāo)簽

<span id="add-music"><i class="fa fa-upload" aria-hidden="true"></i></span>

var addMusicElement = document.getElementById("add-music"),
     fileElement = document.getElementById("file");

addMusicElement.addEventListener("click", function(event) {
    fileElement.click();
});

當(dāng)然，想播放本地音樂(lè)，我們選中文件之后還需要做一些轉(zhuǎn)變，否則是無(wú)法播放的，具體代碼如下所示。

function getURL() {
    var file = fileElement.files[0];
    var url = URL.createObjectURL(file);
    player.src = url;
}

通過(guò)第二句轉(zhuǎn)換而得的 URL， 就可以賦值給 audio 進(jìn)行播放了。

7. 小技巧

關(guān)于播放時(shí)間，由于想要顯示 0:00 格式，所以可能需要一些小技巧，比如下面這樣。

second = (second >= 10) ? second : '0' + second;

End！