1厕妖、最終效果
2、代碼思路
3耙替、相關(guān)問題
? ? ? ? 1）出于功能需要，當(dāng)使用audioObj.play()播放歌曲時(shí)曹体，想通過duration屬性獲取歌曲的總時(shí)長俗扇，但總返回NaN。
? ? ? ? 這是因?yàn)閯傞_始播放時(shí)箕别，歌曲的各項(xiàng)屬性信息還未加載到铜幽，所以需要在初始時(shí)為audioObj綁定事件監(jiān)聽，按照audio提供的方法串稀，在loadedmetadata事件觸發(fā)時(shí)除抛，音樂的各項(xiàng)參數(shù)都會加載完。
this.audioObj.onloadedmetadata=function(){
? ? ? ? _this.duration=_this.audioObj.duration;
? ? ? ? _this.play();
};
? ? ? ? 2）當(dāng)音樂播放完成時(shí)母截，需要執(zhí)行一些操作镶殷。audio提供了兩種方法（ended方法和ended屬性），用哪種好呢微酬？
? ? ? ? 自然是ended方法绘趋。起先因?yàn)橐糜?jì)時(shí)器不斷獲取currentTime，我就想直接在計(jì)時(shí)器里順便監(jiān)測ended屬性颗管，但是因?yàn)橛?jì)時(shí)器是每秒執(zhí)行一次陷遮，所以可以明顯看到界面上的文字圖片都已經(jīng)切換到下一首了，而滑塊還會在進(jìn)度條尾部停滯一下才跳回去垦江。
? ? ? ? 3）還有一點(diǎn)值得注意帽馋，如果在進(jìn)度條上綁定click事件以便調(diào)節(jié)音樂播放進(jìn)度，需要在子元素上阻止冒泡（我的滑塊和時(shí)間戳都在進(jìn)度條內(nèi)）。
? ? ? ? 因?yàn)槲沂怯胿ue編寫绽族，所以比較簡單姨涡，只需給滑塊和時(shí)間戳添加@click.stop即可。
4吧慢、代碼優(yōu)化
? ? ? ? 1）在點(diǎn)擊“上一首”涛漂、“下一首”按鈕切歌時(shí)，需要確保序號不越界检诗，起點(diǎn)最低被想到的是邏輯觀感比較好理解的if語句匈仗，但它的代碼觀感卻令人不爽。
? ? ? ? ① 如果是非循環(huán)播放逢慌，可使用Math.max和Math.min方法：
? ? ? ? this.index = Math.max(--this.index,0);
? ? ? ? this.index = Math.min(++this.index,this.total-1);
? ? ? ? ② 如果是循環(huán)播放悠轩，可使用取余法：
? ? ? ? this.index =(--this.index+this.total)%this.total;
? ? ? ? this.index = ++this.index%this.total;
? ? ? ? 2）在切換“播放/暫停”時(shí)攻泼，往往也最容易想到if判斷火架，但我覺得用三目代碼更優(yōu)雅一些。
? ? ? ? this.playing?this.pause():this.play();
Github下載鏈接：音樂播放器
