Document: visibilitychange イベント

visibilitychange イベントは、タブのコンテンツが表示状態または非表示状態になったときに document に発生します。

このイベントには、更新された文書の表示・非表示状態が含まれていませんが、この情報は document の visibilityState プロパティから取得することができます。

この例は、文書が表示状態になった時に音楽を再生し、文書が非表示になった時に音楽を停止します。

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

• Page Visibility API の使用
• Document.visibilityState