Cómo mejorar el look and feel del contenido Multimedia con Media Session API

Tardaron algunos años en darle protagonismo, pero finalmente, la evolución multimedia también tuvo su upgrade dentro del ecosistema PWA. En este último tiempo, JavaScript trajo sendas actualizaciones a su intérprete en casi todos los navegadores web, y así fue como, el objeto navigator, incluyó soporte para API Media Session.

Seguimos analizando las diferentes opciones que incluye JS para poder darle un look and feel apropiado a nuestras PWA. En esta oportunidad es el turno de Media Session API, quien aporta un toque distintivo cuando trabajamos con contenido multimedia.

Cómo funciona

Esta API está enfocada en procesar, a través de metadatos, la información concerniente a archivos multimedia. Dentro del objeto navigator incluye la API mediaSession. A su vez, dentro de mediaSession, encontramos la propiedad metadata que debe instanciarse a partir de un nuevo objeto MediaMetaData() pasándole al mismo un objeto JSON con la información de la canción que actualmente se está reproduciendo.

  navigator.mediaSession.metadata = new MediaMetadata({objetoJSON}) 

Veamos a continuación la estructura del objeto JSON.

{ 
  title: "Mi canción en reproducción", 
  artist: "Su intérprete", 
  album: "Información del álbum", 
  artwork: [{ 
    src: "cover/portada_del_album.jpg", 
    sizes: "640x640", 
    type: "image/jpg"
  }] 
} 

Como podemos observar, el objeto JSON contiene propiedades que almacenan la información de la canción, su artista, el álbum y si tiene portada, también podemos agregarlo bajo la misma estructura de imágenes, que cuando agregamos íconos en el archivo manifest.json. Al igual que con las imágenes, podremos agregar varias portadas de diferentes tamaños.

Implementación

De la mano del HTML5 Audio y/o HTML5 Video puedes poner en marcha esta fabulosa característica. Lo bueno de ella es que tiene soporte de todos los navegadores modernos en sus últimas versiones y también de casi todos los sistemas operativos.

Cuando comenzamos a reproducir el contenido multimedia veremos en el Centro de notificaciones del S.O., la información de Media Session que nuestra PWA aporta a través de los metadatos. En Mac OS encontrarás esto en el Centro de Control, en Windows 10 verás esta información en el bloqueo de pantalla, y en Android encontrarás la misma en el panel de notificaciones.

Media Session API en el Centro de Control de Mac OS.

De forma predeterminada, podrás disponer de los botones Play/Pause que controlan la canción directamente en el centro de notificaciones. Los botones funcionarán sin que debas resolver mediante código, la funcionalidad de cada uno de estos.

Media Session API en Android.

Repositorio

Te compartimos también un repositorio Github con el código fuente del proyecto que desarrollamos para armar este artículo. Recuerda antes de probarlo, de modificar en el archivo audioapi.js la línea audio.src con la ruta hacia el archivo multimedia de tu preferencia. Has lo propio con la información de mediaSession.metadata para que esta se alinee a tus pruebas.

👋 Saludos!