Améliorez l'expérience multimédia
Si vous utilisez cette application Web avec les paramètres régionaux anglais ou allemand, vous verrez un bouton de lecture audio en haut de l'article. Cliquer sur le bouton lance une piste audio en lecture à haute voix pour le texte écrit. Sans aucune modification, cela fonctionne très bien, mais j'ai pensé que je pouvais l'améliorer.
Pour fournir plus de données et même des contrôles de lecture, vous pouvez désormais utiliser une nouvelle API disponible pour les applications Web progressives appelée « API Media Session ». Si un navigateur le prend en charge, l'application peut considérablement améliorer l'expérience multimédia.
- fournir une pochette d'album
- fournir plus d'informations sur la piste audio telles que le titre, le nom de l'album ou le nom de l'artiste
- fournir des commandes de lecture, afin que les utilisateurs puissent mettre en pause ou sauter des parties de la piste audio en dehors de votre application Web
Simplement dit, simplement fait
La mise en œuvre de la « Media Session API » est très simple et ne nécessite que quelques lignes de code.
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 vous utilisez Typescript, il existe également un package avec les définitions de type associées disponibles sur NPM.
Une fois les modifications ajoutées, vous pouvez vérifier votre implémentation en lisant la piste audio dans un navigateur prenant en charge l'API, tel que Google Chrome. Si tout est configuré correctement, la fenêtre multimédia de Chrome affichera désormais les noms fournis, les illustrations de l'album ainsi que les commandes, en fonction de votre implémentation.
Mots de clôture
La « Media Session API » est un ajout très simple à votre PWA, qui permet à vos utilisateurs de découvrir des chansons ou des vidéos avec des métadonnées et des contrôles améliorés. L'API est actuellement marquée comme expérimentale, mais peut déjà être utilisée avec la plupart des navigateurs modernes.
