audio音乐播放

Posted 2020-12-29 yangguoe

1.audio标签

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

2.中间圆cd和播放/暂停按钮动画

1   playIcon(){
2           return this.playing ? ‘ iconfont  icon-pause-‘ : ‘iconfont  icon-bofang1‘
3         },
4         cdCls(){
5           return this.playing ? ‘play‘ :‘play pause‘
6         }

3.通过mutations来设置播放/暂停----上一首/下一首-----min/normal播放

1  methods:{
2         ...mapMutations({
3           setFullScreen:‘SET_FULL_SCREEN‘,
4           setPlayingState:‘SET_PLAYING_STATE‘,
5           setCurrentIndex:‘SET_CURRENT_INDEX‘,
6         }),
7         mini(){//当电机及此按钮的时候，将全屏显示转换为“迷你播放”
8           this.setFullScreen(false)
9         },

4.监听currentsong的变化，当currentsong发生变化的时候,让歌曲播放；

1  currentSong(){//一点击歌曲进来的时候是播放状态
2           this.$nextTick(()=>{
3             this.$refs.audio.play()
4           })
5         },

5.监听playing的播放状态

1   playing(newPlaying){//监听是否在播放---切换播放暂停状态
2           console.log(newPlaying)
3           const audio = this.$refs.audio
4           newPlaying ? audio.play() : audio.pause()
5         }

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

 1   prev(){//点击上一首/下一首切换其实就是切换歌曲的播放索引，让其+1/-1；audio由一个ready属性，来确认是否准备好播放，来阻止用户的连续多次点击；
 2           if (!this.songReady) {
 3             return
 4           }
 5             let index = this.currentIndex -1
 6           if(index ===1){
 7               index = this.playlist.length -1
 8           }
 9           this.setCurrentIndex(index)
10           if(!this.playing){
11               this.togglePlaying()
12           }
13         },
14         next(){
15           if (!this.songReady) {
16             return
17           }
18           let index = this.currentIndex + 1
19           if (index === this.playlist.length){
20             index = 0
21           }
22           this.setCurrentIndex(index)
23           if(!this.playing){//当暂停时候点击播放的情况
24             this.togglePlaying()
25           }
26         },
27         ready(){
28             this.songReady = true
29         },