音乐、视频播放模式切换实现方案及原理解析（基于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) % 3
        this.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）

猜你喜欢