javascript - 当网络处于后台时如何使背景音频暂停

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

您可以使用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")
  }
})