此播放器已更新到 2.0 版本攒砖，可以前去我的 Github 查看更新內(nèi)容
這兩天寫(xiě)了一個(gè)在線音樂(lè)播放器工猜，支持播放本地音樂(lè)赚楚，并且可以調(diào)整音量悯蝉，顯示進(jìn)度條。 下圖是效果
當(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;
