PM 說: 要怎麼監聽網頁切換到背景?

2024 iThome 鐵人賽

DAY 15

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 15 篇

16th鐵人賽

YUAN

2024-09-12 21:15:23

531 瀏覽

分享至

前言

封面圖是電腦版的ig，影片播放到一半接著切換分頁(ig退到背景)時，會自動暫停影片

原本今天想寫透過網頁開啟App的功能，但會碰到監聽網頁切換到背景的議題
因此臨時更改主題~

監聽的方式其實比想像中簡單，透過visibilitychange

可以從文件看到觸發時機:
when a user

navigates to a new page
switches tabs
closes the tab
minimizes or closes the browser
on mobile, switches from the browser to a different app

電腦: 開新頁,切換分頁,關閉分頁,縮小瀏覽器
手機: 切換應用程式

成果

播放聲音檔，當切換到背景時暫停撥放

想看貓貓or想看ig暫停播放影片的下收連結:
https://www.youtube.com/watch?v=n2gon_zZTbE

程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>visibilitychange demo</title>
  </head>
  <body>
    <audio
      src="//samplelib.com/lib/preview/mp3/sample-15s.mp3"
      controls=""
      controlslist="nodownload"
      id="myAudio"
      loop
    ></audio>
    <script>
      document.addEventListener("visibilitychange", () => {
        // ["hidden", "visible"]
        if (document.visibilityState === "hidden") {
          myAudio.pause();
        } else if (document.visibilityState === "visible") {
          myAudio.play();
        }
        console.log("document.hidden:", document.hidden);
      });
    </script>
  </body>
</html>