在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)