Mejora la experiencia de los medios
Si está utilizando esta aplicación web con la configuración regional en inglés o alemán, verá un botón de reproducción de audio en la parte superior del artículo. Al hacer clic en el botón, se inicia una pista de audio de lectura en voz alta para el texto escrito. Sin modificaciones, esto funciona muy bien, pero pensé que podría mejorarlo.
Para proporcionar más datos e incluso controles de reproducción, ahora puede utilizar una nueva API disponible para aplicaciones web progresivas llamada "API de sesión multimedia". Si un navegador lo admite, la aplicación puede mejorar significativamente la experiencia multimedia.
- proporcionar una carátula del álbum
- proporcionar más información sobre la pista de audio, como el título, el nombre del álbum o el nombre del artista
- proporcionar controles de reproducción, para que los usuarios puedan pausar u omitir partes de la pista de audio fuera de su aplicación web
Simplemente dicho, simplemente hecho
La implementación de la "API de sesión de medios" es muy sencilla y solo requiere unas pocas líneas de código.
function setMediaSessionMetaData(props){
// Progressive enhancement of your PWA,
// which means we have to check if the
// new API is available.
if(!('mediaSession' in navigator)){
return;
}
navigator.mediaSession.metadata = new MediaMetadata({
title: props.title,
artist: props.artist
album: props.album,
artwork: props.artwork
});
// Add action handlers, if any.
// For a complete list, check out the
// MDN-link in the addendum.
if(props.play){
navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
}
}
// ... Later in your code ...
setMediaSessionMetaData({
title: "Song name",
artist: "Artist name",
album: "Album name",
artwork: [{
src: 'https://dummyimage.com/512x512',
sizes: '512x512',
type: 'image/png' }]
});
Si está utilizando TypeScript, también hay un paquete con las definiciones de tipo relacionadas disponibles en NPM.
Una vez que se hayan agregado los cambios, puede verificar su implementación reproduciendo la pista de audio en un navegador compatible con la API, como Google Chrome. Si todo está configurado correctamente, la ventana multimedia en Chrome ahora mostrará los nombres proporcionados, las ilustraciones del álbum y los controles, según su implementación.
Palabras de cierre
La "API de sesión de medios" es una adición muy simple a su PWA, que permite a sus usuarios experimentar canciones o videos con metadatos y controles mejorados. Actualmente, la API está marcada como experimental, pero ya se puede utilizar con la mayoría de los navegadores modernos.
