最近在用mint-ui重寫一個(gè)vue.js音樂App項(xiàng)目，做到播放器模塊，感覺挺有意思，記錄一下播放器歌曲播放及歌曲切換功能實(shí)現(xiàn)方法及原理。

先上一張運(yùn)行效果圖（歌詞尚未抓取、播放進(jìn)度條及時(shí)間尚未開發(fā)）

所需了解的知識：

vue2.0、vuex（mapGetters、mapMutations等）、H5 audio標(biāo)簽

關(guān)鍵DOM部分：

注：歌曲數(shù)據(jù)已經(jīng)事先抓取，并通過vuex管理

實(shí)現(xiàn)方法：

使用HTML5的audio標(biāo)簽實(shí)現(xiàn)歌曲的播放，currentSong表示當(dāng)前播放的歌曲，currentSong.url即當(dāng)前歌曲所在的地址，點(diǎn)擊

上一首/下一首觸發(fā)prev()/next()方法，在對應(yīng)方法中調(diào)用mapMutations映射的方法修改mapGetters獲取的歌曲的索引值，從而實(shí)現(xiàn)歌曲的切換；

點(diǎn)擊播放/暫停按鈕觸發(fā)togglePlaying()方法，在對應(yīng)方法中調(diào)用mapMutations映射的方法修改mapGetters獲取的當(dāng)前歌曲的播放狀態(tài)，從而實(shí)現(xiàn)

歌曲的播放與暫停。

以下只介紹播放及切換功能關(guān)鍵部分，布局樣式不做介紹。

必需數(shù)據(jù)：

截圖注釋部分為必需數(shù)據(jù)，不注釋部分僅用于控制UI相關(guān)，非功能必需：

mapMutations設(shè)置：

映射方法，便于在prev()、next()、togglePlaying()中調(diào)用，修改播放狀態(tài)及當(dāng)前歌曲索引

一、播放功能：

togglePlaying()播放/暫停方法及解釋

解釋：setPlayingState對應(yīng)mapMutations中的setPlayingState方法，用于修改播放狀態(tài)，轉(zhuǎn)入的參數(shù)為布爾值，按當(dāng)前播放狀態(tài)取反，即可實(shí)現(xiàn)歌曲的播放與暫停。

二、歌曲切換功能：

上一首與下一首的方法相似，只是計(jì)算當(dāng)前歌曲索引的方法不一樣，因此只展示prev()方法源碼

實(shí)現(xiàn)效果：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Vue2.0+vuex+H5实现音乐播放及歌曲切换功能的方法及原理解释的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。