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