页面进入后台如何关闭背景音乐

Travis 发布于2019-08-26 10:18 / 2405人阅读

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

之前在做小程序的时候遇到一个问题：小程序中有一个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.可在页面后台运行时清掉一些定时器，页面显示时再重新设置定时器，节省性能

云服务器 GPU云服务器如何进入asp后台如何js关闭某个页面进入域名管理页面怎么进入后台

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105943.html

页面进入后台如何关闭背景音乐

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

abson 2019-08-26 10:38 评论0 收藏0
从URL输入到页面展现到底发生什么？

摘要：定义文档资源的名称二域名解析在浏览器输入网址后，首先要经过域名解析，因为浏览器并不能直接通过域名找到对应的服务器，而是要通过地址。什么是域名解析协议提供通过域名查找地址，或逆向从地址反查域名的服务。前言打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！本文首发地址为GitHub博客,写文章不易，请多多支...

elva 2019-08-23 13:46 评论0 收藏0
从URL输入到页面展现到底发生什么？

摘要：定义文档资源的名称二域名解析在浏览器输入网址后，首先要经过域名解析，因为浏览器并不能直接通过域名找到对应的服务器，而是要通过地址。什么是域名解析协议提供通过域名查找地址，或逆向从地址反查域名的服务。前言打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！本文首发地址为GitHub博客,写文章不易，请多多支...

WrBug 2019-08-02 12:07 评论0 收藏0
微信小程序知识总结及案例集锦

摘要：对微信小程序进行全局配置，决定页面文件的路径窗口表现设置网络超时时间设置多等。微信小程序知识总结及案例集锦微信小程序的发展会和微信公众号一样，在某个时间点爆发学习路径微信小程序最好的教程肯定是官方的文档啦，点击这里直达微信官方文档认真跟着文档看一遍，相信有vue前端经验的看下应该就能上手了，然后安装微信小程序开发者工具新建一个quick start项目，了解代码结构，...

sean 2019-08-20 17:45 评论0 收藏0