Cómo personalizar las notificaciones multimedia

François Beaufort
François Beaufort
GitHub

La API de Media Session permite que los sitios web informen a los usuarios lo que se está reproduciendo en su navegador y lo controlen sin volver a la página que lo inició. La experiencia del usuario se puede personalizar a través de metadatos en notificaciones de contenido multimedia personalizadas, eventos de contenido multimedia, como reproducción, pausa, búsqueda y cambio de pista. Estas personalizaciones están disponibles en varios contextos, incluidos los centros de contenido multimedia para computadoras de escritorio, las notificaciones de contenido multimedia en dispositivos móviles e incluso en dispositivos wearables.

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 82.
  • Safari: 15.

Source

Capturas de pantalla de los contextos de la sesión multimedia.
Centro de contenido multimedia en computadoras de escritorio, notificación de contenido multimedia en dispositivos móviles y un dispositivo wearable.

Cuando un sitio web reproduce audio o video, los usuarios reciben automáticamente notificaciones de contenido multimedia en el panel de notificaciones en dispositivos móviles o en el centro de contenido multimedia en computadoras de escritorio. El navegador hace todo lo posible para mostrar la información adecuada mediante el título del documento y la imagen de ícono más grande que pueda encontrar. La API de Media Session te permite personalizar la notificación de contenido multimedia con algunos metadatos de contenido multimedia más enriquecidos, como el título, el nombre del artista, el nombre del álbum y la ilustración, como se muestra a continuación.

Ilustración de las interfaces de Media Session.
Anatomía de una notificación de contenido multimedia en dispositivos móviles.

En el siguiente ejemplo, se muestra cómo crear una notificación de contenido multimedia personalizada y responder a acciones básicas de contenido multimedia, como reproducir y pausar.

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";
});

Lecturas adicionales

Demostración

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";
});