vue中关于audio的onended事件实现

在vue中使用

audio有一个属性ended,用来判断音频是否已播放结束

<audio :src="musicUrl" controls autoplay @ended="handleNext();handleLyric()"></audio>

当音频结束时,要进行某些操作。便使用onended事件

    // 自动播放下一首
    handleNext () {
      let songmids = this.$store.state.songmids
      let num = this.$store.state.num
      num = (num + 1) % songmids.length
      // console.log('length' + songmids.length)
      // console.log(num)
      // console.log('相关id:' + songmids[num])
      this.$store.commit('addOne')
      // 获得当前歌曲播放链接
      this.$store.commit('searchById', {
        songmid: songmids[num]
      })
      // 获取歌词
      this.$store.commit('getLyric', {
        songmid: songmids[num]
      })
      let songs = this.$store.state.songs
      let albumimg = songs[num]['albumimg']
      // console.log(songs[num]['albumimg'])
      this.$store.commit('getNowImg', {
        albumimg: albumimg
      })
    },
    handleLyric () {
      setTimeout(() => {
        this.$store.commit('show')
      }, 1000)
    }

在js文件中

list[0]指音频元素

  // 下一首
  btn[2].onclick=function(){
   num=(num+1)%musicCount
   list[0].src="music/"+music[num]+".mp3"
   musicName.innerHTML=music[num]
   list[0].play()
  }
  // 自动播放下一首
  list[0].addEventListener('ended',function(){
   btn[2].onclick()
  },false)

猜你喜欢

转载自blog.csdn.net/weixin_40119412/article/details/107924686