乐趣区

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

jiezi

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

 作者：易企秀——sunny
退出移动版