页面进入后台如何关闭背景音乐
发布时间:2020-12-14 19:14:40 所属栏目:资源 来源:网络整理
导读:之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然播放。 预期效果:点击小程序退出后背景音乐停止播放,再次
之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然播放。 预期效果:点击小程序退出后背景音乐停止播放,再次打开小程序后背景音乐继续播放,如果用户停止了音乐,退出再次打开时背景音乐仍然是停止状态 思路过程:因为H5页面是嵌套的,音乐在H5页面中,无法通过小程序的生命周期去控制音乐的播放状态,所以如何能在H5页面中监听页面的显隐藏状态去控制音乐
适用场景:
解决方案: let statusBeforeHide = true; // 记录页面切换到后台时音乐的播放状态,如果用户进行了音乐关闭操作,则将该状态置为false
// document.hidden boolean 页面当前是否不可见
let hiddenProperty = ('hidden' in document) ? 'hidden'
: ('webkitHidden' 'webkitHidden'
: ('mozHidden' 'mozHidden' : null;
if (hiddenProperty) {
let visibilityChangeEvent = hiddenProperty.replace(/hidden/i,'visibilitychange');
let onVisibilityChange = () => {
console.log('visibilityChange');
changePlay();
};
document.addEventListener(visibilityChangeEvent,onVisibilityChange);
} else {
"This demo requires a browser,such as Google Chrome or Firefox,that supports the Page Visibility API.");
}
// 更改音乐播放状态
function changePlay() {
if (document[hiddenProperty]) {
// 页面隐藏
if (statusBeforeHide) {
music.pause(); // 伪代码,音乐暂停,但不改变statusBeforeHide
}
} else {
// 页面显示
if (statusBeforeHide) {
music.play() // 伪代码,如果statusBeforeHide是true,音乐继续播放
}
}
}
拓展: 1.可在页面后台运行时清掉一些定时器,页面显示时再重新设置定时器,节省性能 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |