Vue audio音乐列表循环播放
现有需求:进入页面即自动播放音乐,多首音乐自动循环播放废话不多说,直接上代码html部分<audio:src="bgmSrc" autoplay controls @ended="audioFinished"></audio>JS部分data() {return {bgmId: 0,bgmList: [require('@/assets/media/bgm1.mp3'),r
·
现有需求:
进入页面即自动播放音乐,多首音乐自动循环播放
废话不多说,直接上代码
html部分
注意audio标签不能加上loop属性,否则会失效
<audio :src="bgmSrc" autoplay controls @ended="audioFinished">
</audio>
JS部分
data() {
return {
bgmId: 0,
bgmList: [
require('@/assets/media/bgm1.mp3'),
require('@/assets/media/bgm2.mp3'),
require('@/assets/media/bgm2.mp3'),
require('@/assets/media/bgm2.mp3'),
require('@/assets/media/bgm2.mp3')
]
}
},
computed: {
bgmSrc: function() {
return this.bgmList[this.bgmId]
}
},
methods: {
audioFinished() {
console.log('over')
if (this.bgmId < this.bgmList.length - 1) {
this.bgmId++
} else {
this.bgmId = 0
}
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)