今天遇到一个需求,移动端遇到用户点击home键、切换其他APP、锁屏等操作时,H5页面中音乐还在播放,与需求不符,查询文档后发现使用visibilitychange事件可以完美解决这个问题,下面是源码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<audio controls autoplay src="//xz.voicecloud.cn/activity/ai_niu/res/Five-Hundred-Miles.mp3"></audio>
<script type="text/javascript">
document.addEventListener('visibilitychange', function() {
var audio = document.querySelector('audio');
if(document.hidden) {
audio.pause();
console.log("页面非激活,暂定播放");
} else {
audio.play();
console.log("页面激活, 继续播放")
}
})
</script>
</body>
</html>