Vue项目实现自动播放背景音乐解决方案
这篇博客探讨了在Vue项目中如何实现自动播放背景音乐，尤其针对微信环境下的播放问题。通过在`mounted`钩子中添加事件监听，并结合`WeixinJSBridgeReady`接口，确保音乐在页面加载时自动播放。当音乐播放结束时，利用`onended`事件进行循环播放。此外，还提供了控制音乐播放状态的方法。
data() {
return {
isOff:true
}
},
mounted() {
// 自动播放音乐效果，解决微信自动播放问题
document.addEventListener('touchstart',this.audioAutoPlay,false);
document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay,false);
let oAudio = document.querySelector("#audio");
oAudio.onended = function () {//播放完毕，重新循环播放
oAudio.load();
oAudio.play();
}
},
methods: {
changeOn(){
let oAudio = document.querySelector("#audio");
if(this.isOff){
oAudio.play();//让音频文件开始播放
}else{
oAudio.pause();//让音频文件暂停播放
}
this.isOff = !this.isOff;
},
audioAutoPlay() {
let audio = document.getElementById('audio');
this.isOff = false;
audio.play();
document.removeEventListener('touchstart',this.audioAutoPlay);
}
}
bty…理论上vue是无法自动播放，需要借助微信的一个接口，注意在其他页面做监听无法接收到微信的回调，一定要在App.vue页面，放上这一段：
mounted() {
this.audioAutoPlay('audio');
// 自动播放音乐效果，解决微信自动播放问题
document.addEventListener('touchstart',this.audioAutoPlay,false);
document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay,false);
let oAudio = document.querySelector("#audio");
oAudio.onended = function () {//播放完毕，重新循环播放
oAudio.load();
oAudio.play();
}
},
扫一扫
6957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
