Media Session API

_clai發表於2024-04-29
SessionAPI

Media Session API 控制媒體播放和自定義媒體通知

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Session API</title>
  </head>
  <body>
    <audio id="audio" src="./tts.mp3"></audio>
    <button type="button" id="btn-play">播放</button>
    <button type="button" id="btn-pause">暫停</button>

    <script>
      // 允許我們控制媒體播放和自定義媒體通知。這意味著我們可以定義媒體後設資料，如標題、藝術家、專輯和插圖，並響應媒體相關事件，如播放、暫停、下一個和上一個

      // Media Session API: 當前媒體會話並儲存所有後設資料和播放控制的物件
      // 透過提供與媒體相關的事件、動作和後設資料來控制媒體播放

      /** @type {HTMLAudioElement} */
      const audioDOM = document.getElementById('audio');
      const playBtn = document.getElementById('btn-play');
      const pauseBtn = document.getElementById('btn-pause');

      // 建立媒體後設資料
      const metaData = new MediaMetadata({
        // 媒體標題
        title: '音樂標題',
        // 媒體型別
        artist: '藝術家',
        // 媒體專輯
        album: '專輯',
        // 媒體封面
        artwork: [
          { src: 'http://p2.music.126.net/txQOuRf20d2fKbuyxhtNRA==/109951166512080386.jpg?param=130y130', sizes: '150x150', type: 'image/png' },
          { src: 'http://p2.music.126.net/txQOuRf20d2fKbuyxhtNRA==/109951166512080386.jpg?param=130y130', sizes: '500x500', type: 'image/png' },
        ],
      });

      // 設定媒體後設資料
      navigator.mediaSession.metadata = metaData;
      console.log("navigator.mediaSession => ", navigator.mediaSession)

      playBtn.addEventListener('click', () => {
        audioDOM.play();
      })
      pauseBtn.addEventListener('click', () => {
        audioDOM.pause();
      })

      // 監聽媒體事件
      navigator.mediaSession.setActionHandler('play', () => {
        audioDOM.play();
        console.log('play');
      });
      navigator.mediaSession.setActionHandler('pause', () => {
        audioDOM.pause();
        console.log('pause');
      });
      navigator.mediaSession.setActionHandler('nexttrack', () => {
        console.log('next track');
      });
      navigator.mediaSession.setActionHandler('previoustrack', () => {
        console.log('previous track');
      });
    </script>
  </body>
</html>

相關文章