Cómo personalizar las notificaciones multimedia

François Beaufort
François Beaufort

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

Navegadores compatibles

  • 73
  • 79
  • 82
  • 15

Origen

Capturas de pantalla de los contextos de las sesiones multimedia
Centro de contenido multimedia en computadoras, notificaciones multimedia en dispositivos móviles y dispositivos wearable.

Cuando un sitio web está reproduciendo audio o video, los usuarios reciben automáticamente notificaciones de contenido multimedia, ya sea en la bandeja de notificaciones del dispositivo móvil o en el centro de medios para computadoras de escritorio. El navegador hace todo lo posible para mostrar la información apropiada 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 las notificaciones multimedia con algunos metadatos más enriquecidos, como el título, el nombre del artista, el nombre del álbum y el material gráfico, como se muestra a continuación.

Ilustración de interfaces de sesiones multimedia.
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 multimedia personalizada y cómo 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";
});