当网络处于后台时，如何使后台音频暂停

Question

该页面主要针对移动设备。在我的网络AR项目中，我有一个背景音乐自动播放，没有控制按钮。

当前问题：当用户转到其他应用程序或关闭手机时，它仍然会播放音乐，就像Youtube premium的工作方式一样。

我想要的：当手机上的页面未处于活动状态时，我希望音乐自动停止播放。(不同应用程序中的用户，用户关闭手机(

这就是我将音频添加到项目中的方式。

html

<audio id="portal-audio" crossorigin="anonymous" loop="true" preload="auto" src="./assets/music/music.mp3"></audio>

js

document.getElementById('screen-start').addEventListener('click', function(event) {
document.getElementById('portal-audio').play();
})

Answer 1

您可以使用visibilitychange:

document.addEventListener("visibilitychange", event => {
if (document.visibilityState === "visible") {
console.log("tab is active")
} else {
const audio = document.getElementById('portal-audio');
audio && audio.pause();
console.log("tab is inactive")
}
})

Answer 2

document.addEventListener("visibilitychange", event => {
if (document.visibilityState === "visible") {
document.getElementById('portal-audio').play();
console.log("tab is active")
} else {
const audio = document.getElementById('portal-audio');
audio && audio.pause();
console.log("tab is inactive")
}
})