如何在web处于后台时使背景音频暂停

Question

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

当前问题:当用户转到其他应用程序或关闭手机时，它仍然播放音乐，就像Youtube的高级功能一样。

我想要的是:当页面不在手机上时，我希望音乐自动停止播放。(不同应用程序中的用户，用户关闭电话)

这就是我如何将音频添加到我的项目中。

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

您可以使用视觉变化

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")
  }
})