该博客主要探讨如何在网页中实现音频的播放、暂停功能，并根据页面可见性状态自动控制音频播放。通过监听`visibilitychange`事件，实现当网页在后台（如挂起、最小化）时自动暂停音频，而当网页回到前台时自动恢复播放。同时，提供了点击关闭音乐按钮的功能，允许用户手动控制音乐播放。
export default {
data() {
return {
playFlag: true,
playImg: require('../../static/play.png'),
pauseImg: require('../../static/pause.png'),
clickMusicBtn: false
}
},
mounted() {
this.audioAutoPlay('bgMusic');
document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q
if (this.clickMusicBtn) { // 点击了关闭音乐按钮
if (this.playFlag) {
this.audioAutoPlay('bgMusic');
this.playFlag = true;
} else {
this.audioPause('bgMusic');
this.playFlag = false;
}
text.innerHTML = e.hidden;
if (e.hidden) { // 网页被挂起
this.audioAutoPlay('bgMusic');
this.playFlag = true;
} else { // 网页被呼起
this.audioPause('bgMusic');
this.playFlag = false;
}
} else { // 未点击关闭音乐按钮
if (this.playFlag) {
this.audioPause('bgMusic');
this.playFlag = false;
} else {
this.audioAutoPlay('bgMusic');
this.playFlag = true;
}
text.innerHTML = e.hidden;
if (e.hidden) { // 网页被挂起
this.audioPause('bgMusic');
this.playFlag = false;
} else { // 网页被呼起
this.audioAutoPlay('bgMusic');
this.playFlag = true;
}
}
});
},
methods: {
bgMusicPlayOrPause(id) {
this.clickMusicBtn = !this.clickMusicBtn;
if (this.playFlag) {
this.audioPause(id);
this.playFlag = false;
} else {
this.audioAutoPlay(id);
this.playFlag = true;
}
},
audioPause(id) {
var audio = document.getElementById(id);
audio.pause();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.pause();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
audio.pause();
}, false);
},
audioAutoPlay(id) {
var audio = document.getElementById(id);
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
audio.play();
}, false);
}
}
}
3387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
