评论

小程序后台运行时关闭webview页面中的音乐

解决小程序退出后,webview页面仍然播放音乐的问题

之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然播放。

预期效果:点击小程序退出后背景音乐停止播放,再次打开小程序后背景音乐继续播放,如果用户停止了音乐,退出再次打开时背景音乐仍然是停止状态

思路过程:因为H5页面是嵌套的,音乐在H5页面中,无法通过小程序的生命周期去控制音乐的播放状态,所以如何能在H5页面中监听页面的显隐藏状态去控制音乐

visibilitychange:浏览器标签页被隐藏或显示的时候会触发

适用场景:

  1. 浏览器标签页切换时触发
  2. 微信环境下切成浮窗状态触发
  3. 小程序嵌套页面,小程序切换页面或进入后台触发
  4. 其他页面显隐切换时触发

解决方案:

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.可在页面后台运行时清掉一些定时器,页面显示时再重新设置定时器,节省性能

最后一次编辑于  2019-07-24  
点赞 0
收藏
评论

1 个评论

  • 2019-08-15

    请问有遇到这样的问题么?

    在ios,点击分享,因为h5 hidden 所以因为暂停,但是,分享之后,ios因为无法重新播放

    2019-08-15
    赞同
    回复 2
    • 叶子
      叶子
      2019-08-16
      我上面的这种方法经测试,没有你说的这种情况
      2019-08-16
      回复
    • 肖一松
      肖一松
      2020-02-19
      你好,我现在页碰到这种问题了,不过只是部分iOS机型,请问你最后怎么解决的啊
      2020-02-19
      回复
登录 后发表内容