1.点击模式切换按钮时，按钮的样式要改变
有三种播放模式，在文件config.js中playMode定义：
export const playMode = {
sequence: 0, //顺序播放--图标对应的class为icon-sequence
loop: 1, // 单曲循环--图标对应的class为icon-loop
random: 2 //随机播放--图标对应的class为icon-random
}
切换按钮的class绑定计算属性iconMode,计算属性iconMode为
iconMode() {
return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'
}
在按钮上绑定click事件 @click="changeMode"
const mode = (this.mode + 1) % 3
this.setPlayMode(mode)
2.在切换模式时，需要修改播放列表
还是在changeMode函数中，添加如下代码
if (mode === playMode.random) {
list = shuffle(this.sequenceList)
} else {
list = this.sequenceList
}
this.setPlaylist(list)
其中shuffle函数的作用是打乱数组，代码如下
// 返回min和max之前的任意数，包含max
function getRandomInt(min, max) {
// Math.random() 返回大于等于0且小于1的随机数
return Math.floor(Math.random() * (max - min + 1) + min)
}
export function shuffle(arr) {
let _arr = arr.slice()
for (let i = 0; i < _arr.length; i++) {
let j = getRandomInt(0, i)
let temp = _arr[i]
_arr[i] = _arr[j]
_arr[j] = temp
}
return _arr
}
3.维持currentSong
由于currentSong是由playlist[currentIndex]得来的，在改变playlist时，当前歌曲currentSong在新的列表中的index是和之前不一样的，因此在setPlaylist之前，首先resetCurrentIndex
resetCurrentIndex(list) {
let index = list.findIndex((item) => {
return item.id === this.currentSong.id
})
this.setCurrentIndex(index)
}
4.播放完当前歌曲后，切换下一首
怎么知道播放完了？
监听audio控件的ended事件
当播放模式为loop时，不需要切换下一首，但是需要重播当前歌曲，在播放模式为sequence和random时则需要调用this.next()函数切换到下一首
因此在ended的监听事件中，判断当前模式是否为loop，若是，则进行如下步骤
1.设置audio控件的currentTime = 0
2.调用audio控件的play()函数，播放歌曲
若不是，则直接调用this.next()切换歌曲
5.music-list组件中，完成点击随机播放歌曲按钮时的事件
给随机播放按钮添加点击事件，@click=random
在random函数中调用this.randomPlay()函数来设置播放的各种参数（this.randPlay是vuex中的action，在其中commit多个参数的mutation）
export const randomPlay = function({state, commit}, {list}) {
commit(types.SET_PLAY_MODE, playMode.random)
let randomList = shuffle(list)
commit(types.SET_PLAYLIST, randomList)
commit(types.SET_SEQUENCE_LIST, list)
commit(types.SET_CURRENT_INDEX, 0)
commit(types.SET_FULL_SCREEN, true)
commit(types.SET_PLAYING_STATE, true)
}
6.解决bug1:暂停歌曲之后，切换模式，歌曲会继续播放
暂停之后切换模式虽然当前歌曲通过步骤3保持原来的歌曲不变，但是还是会触发watcher，watcher还是觉得currentSong改变了，只不过改变之后的currentSong和原来的currentSong的id是一样的
解决办法：在currentSong的watcher函数开始处添加如下代码
if (newSong.id === oldSong.id) {
return
}
网友评论