audio音樂播放

1.audio標簽

 <audio    @play="ready"  @error="error"  ref="audio" :src="currentSong.url"></audio>

2.中間圓cd和播放/暫停按鈕動畫

  playIcon(){
          return this.playing ? ' iconfont  icon-pause-' : 'iconfont  icon-bofang1'
        },
        cdCls(){
          return this.playing ? 'play' :'play pause'
        }

3.通過mutations來設置播放/暫停----上一首/下一首-----min/normal播放

 methods:{
        ...mapMutations({
          setFullScreen:'SET_FULL_SCREEN',
          setPlayingState:'SET_PLAYING_STATE',
          setCurrentIndex:'SET_CURRENT_INDEX',
        }),
        mini(){//當電機及此按鈕的時候，將全屏顯示轉換為“迷你播放”
          this.setFullScreen(false)
        },

4.監聽currentsong的變化，當currentsong發生變化的時候,讓歌曲播放；

 currentSong(){//一點擊歌曲進來的時候是播放狀態
          this.$nextTick(()=>{
            this.$refs.audio.play()
          })
        },

5.監聽playing的播放狀態

  playing(newPlaying){//監聽是否在播放---切換播放暫停狀態
          console.log(newPlaying)
          const audio = this.$refs.audio
          newPlaying ? audio.play() : audio.pause()
        }

6.上一曲/下一曲切換：

  prev(){//點擊上一首/下一首切換其實就是切換歌曲的播放索引，讓其+1/-1；audio由一個ready屬性，來確認是否准備好播放，來阻止用戶的連續多次點擊；
          if (!this.songReady) {
            return
          }
            let index = this.currentIndex -1
          if(index ===1){
              index = this.playlist.length -1
          }
          this.setCurrentIndex(index)
          if(!this.playing){
              this.togglePlaying()
          }
        },
        next(){
          if (!this.songReady) {
            return
          }
          let index = this.currentIndex + 1
          if (index === this.playlist.length){
            index = 0
          }
          this.setCurrentIndex(index)
          if(!this.playing){//當暫停時候點擊播放的情況
            this.togglePlaying()
          }
        },
        ready(){
            this.songReady = true
        },