미디어 알림을 맞춤설정하는 방법

François Beaufort
François Beaufort
GitHub

Media Session API를 사용하면 웹사이트에서 사용자가 브라우저에서 현재 재생 중인 음악을 파악하고 이를 실행한 페이지로 돌아가지 않고도 제어할 수 있음을 알려줄 수 있습니다. 사용자 환경은 맞춤 미디어 알림의 메타데이터와 재생, 일시중지, 탐색, 변경 추적과 같은 미디어 이벤트를 통해 맞춤설정할 수 있습니다. 이러한 맞춤설정은 데스크톱 미디어 허브, 모바일에서의 미디어 알림, 심지어 웨어러블 기기를 비롯한 여러 상황에서 사용할 수 있습니다.

브라우저 지원

  • 73
  • 79
  • 82
  • 15

소스

미디어 세션 컨텍스트의 스크린샷
데스크톱의 미디어 허브, 모바일의 미디어 알림, 웨어러블 기기의 미디어 허브

웹사이트에서 오디오 또는 동영상을 재생하면 사용자에게 자동으로 휴대기기의 알림 트레이 또는 데스크톱의 미디어 허브에 미디어 알림이 표시됩니다. 브라우저는 문서의 제목과 찾을 수 있는 가장 큰 아이콘 이미지를 사용하여 적절한 정보를 표시합니다. Media Session API를 사용하면 아래와 같이 제목, 아티스트 이름, 앨범 이름, 아트워크와 같은 더 풍부한 미디어 메타데이터로 미디어 알림을 맞춤설정할 수 있습니다.

미디어 세션 인터페이스 그림
모바일의 미디어 알림 분석

아래 예는 맞춤 미디어 알림을 만들고 재생 및 일시중지와 같은 기본 미디어 작업에 응답하는 방법을 보여줍니다.

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

navigator.mediaSession.metadata = new MediaMetadata({
  title: "Never Gonna Give You Up",
  artist: "Rick Astley",
  album: "Whenever You Need Somebody",
  artwork: [
    { src: "https://via.placeholder.com/96",  sizes: "96x96" },
    { src: "https://via.placeholder.com/128", sizes: "128x128" },
    { src: "https://via.placeholder.com/256", sizes: "256x256" },
    { src: "https://via.placeholder.com/512", sizes: "512x512" },
  ],
});

navigator.mediaSession.setActionHandler("play", async () => {
  // Resume playback
  try {
    await video.play();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

navigator.mediaSession.setActionHandler("pause", () => {
  // Pause active playback
  video.pause();
});

video.addEventListener("play", () => {
  navigator.mediaSession.playbackState = "playing";
});

video.addEventListener("pause", () => {
  navigator.mediaSession.playbackState = "paused";
});

추가 자료

데모

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📺</text></svg>"
    />
    <title>How to customize media notifications</title>
  </head>
  <body>
    <h1>How to customize media notifications</h1>
    <video controls playsinline src="https://storage.googleapis.com/media-session/caminandes/short.mp4"></video>
    <p>Credits: Media files are © copyright Blender Foundation | <a href="https://www.blender.org">www.blender.org</a>.</p>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}
video {
  display: block;
  margin-top: 10px;
  max-width: 100%;
}

JS


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

navigator.mediaSession.metadata = new MediaMetadata({
  title: "Caminandes 2: Gran Dillama - Blender Animated Short",
  artist: "Blender Foundation",
  artwork: [
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-96.png",  sizes: "96x96" },
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-128.png", sizes: "128x128" },
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-256.png", sizes: "256x256" },
    { src: "https://storage.googleapis.com/media-session/caminandes/artwork-512.png", sizes: "512x512" },
  ],
});

navigator.mediaSession.setActionHandler("play", async () => {
  // Resume playback
  try {
    await video.play();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

navigator.mediaSession.setActionHandler("pause", () => {
  // Pause active playback
  video.pause();
});

video.addEventListener("play", () => {
  navigator.mediaSession.playbackState = "playing";
});

video.addEventListener("pause", () => {
  navigator.mediaSession.playbackState = "paused";
});