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
        },