vue慕课网音乐项目手记：31-音乐播放方式的实现-CSDN博客

本文链接：https://blog.csdn.net/weixin_40814356/article/details/80390726

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，否则切换到下一曲。