1、添加点击事件
到这里就实现点击切换图标了。
接下来就要改变playList的歌曲顺序了。
let list = null
if (mode === playMode.sequence) {
list = shuffle(this.sequenceList)
} else {
list = this.sequenceList
}
this.setPlayList(list)
这里定义了一个list,然后通过shuffle函数把sequenceList打乱放到list里面。
在通过mutation去改变store里面的playList的方法。
shuffle的函数如下:
// 打乱数组
function getRandomInt (min, max) {
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
t
=
_arr
[
i
]
_arr
[
i
]
=
_arr
[
j
]
_arr
[
j
]
=
t
}
return
_arr
}
但是,当playList发生改变的时候,currentSong也会发生改变。这里是不想它改变的。
可是实际上这样写,currentSong还是发生改变了的,只是改变的id和之前的id是一样的,所以需要如下处理
最后:
audio播放结束会向外派发一个事件
当audio结束的时候执行函数如下:
end () {
if (this.mode === playMode.loop) {
this.$refs.audio.currentTime = 0
this.$refs.audio.play()
} else {
this.next()
}
},
如果是循环播放,就让音乐的currenttime回到0,否则切换到下一曲。