小程序后台运行时关闭webview页面中的音乐 |
您所在的位置:网站首页 › 微信小程序的音乐怎么关教程 › 小程序后台运行时关闭webview页面中的音乐 |
之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然播放。 预期效果:点击小程序退出后背景音乐停止播放,再次打开小程序后背景音乐继续播放,如果用户停止了音乐,退出再次打开时背景音乐仍然是停止状态 思路过程:因为H5页面是嵌套的,音乐在H5页面中,无法通过小程序的生命周期去控制音乐的播放状态,所以如何能在H5页面中监听页面的显隐藏状态去控制音乐 visibilitychange:浏览器标签页被隐藏或显示的时候会触发 适用场景: 浏览器标签页切换时触发 微信环境下切成浮窗状态触发 小程序嵌套页面,小程序切换页面或进入后台触发 其他页面显隐切换时触发解决方案: let statusBeforeHide = true; // 记录页面切换到后台时音乐的播放状态,如果用户进行了音乐关闭操作,则将该状态置为false // document.hidden boolean 页面当前是否不可见 let hiddenProperty = ('hidden' in document) ? 'hidden' : ('webkitHidden' in document) ? 'webkitHidden' : ('mozHidden' in document) ? 'mozHidden' : null; if (hiddenProperty) { let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); let onVisibilityChange = () => { console.log('visibilityChange'); changePlay(); }; document.addEventListener(visibilityChangeEvent, onVisibilityChange); } else { console.log("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.可在页面后台运行时清掉一些定时器,页面显示时再重新设置定时器,节省性能 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |