音樂、視頻播放模式切換實現方案及原理解析（基于vue、vuex、h5 audio）

播放模式有三種：

順序播放

隨機播放

單曲循環

定義為一個playMode對象并向外暴露，內含三種播放模式，即為：

export const playMode = {sequence: 0,loop: 1,random: 2 }

數據管理：

通過vuex提供的語法當mapGetters、mapMutations獲取、映射方法設置播放模式、播放列表等的值。

樣式層實現：

通過computed屬性返回播放模式按鈕的類，實現三種播放模式下的icon不同：

js邏輯實現：

上邊dom結構已經定義了點擊事件，對應的changePlayMode方法源碼如下：

changePlayMode() {const mode = (this.mode + 1) % 3this.setPlayMode(mode)let list = null// 隨機播放if (mode === playMode.random) {// 打亂播放列表list = randomSort(this.sequenceList)} else {// 順序播放list = this.sequenceList}// 設置模式切換時當前歌曲不變this.resetCurrentIndex(list)// 設置播放列表this.setPlayList(list)},resetCurrentIndex(list) {let index = list.findIndex((item) => {return item.id === this.currentSong.id})this.setCurrentIndex(index)},
解釋：

setPlayMode為mapMutations映射的方法，用于修改mode

sequenceList為順序播放列表（接口返回的播放列表）

setCurrentIndex為mapMutations映射的方法，用于修改播放歌曲的索引，進而修改播放歌曲

setPlayList同樣為mapMutations映射的方法，用于設置播放列表

順序播放與單曲循環：

? ?順序播放只要按取得的播放列表播放即可 ，當audio播放完當前歌曲，會派發一個onended事件，監聽此事件并調用播放下一首的方法即可。

單曲循環在audio派發onended事件時，重置audio的currentTime屬性即可。

隨機播放：將順序播放列表打亂，隨后邏輯跟順序播放一致

本人寫的比較簡單的一個打亂數組的方法，即：randomSort()：

/*** Created by xiaoqiang on 17/01/2018.*/ export function randomSort(arr) {// 此處不用arr.slice()而使用arr的話會提示以下錯誤// Error: [vuex] Do not mutate vuex store state outside mutation handlers.// 數組按引用傳遞,因此在此修改了就相當于修改了原數組,解決方法為arr.slice(),相當于傳入的是一個副本let array = arr.slice()array.sort(function () {return 0.5 - Math.random()})return array }
順序播放：

隨機播放：

總結

以上是生活随笔為你收集整理的音乐、视频播放模式切换实现方案及原理解析（基于vue、vuex、h5 audio）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。