ブラウザのタブ切り替え検知について

window.addEventListener("blur", () => {
    document.title = "非表示中";
});

window.addEventListener("focus", () => {
    document.title = "表示中";
});

document.addEventListener("visibilitychange", () => {
    document.title = document.visibilityState === 'visible' ? "表示中" : "非表示中";
});

// visibilityState = 'visible' | 'hidden'

const audio = document.querySelector("audio");

// Handle page visibility change:
// - If the page is hidden, pause the video
// - If the page is shown, play the video
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    audio.pause();
  } else {
    audio.play();
  }
});