Migliora l'esperienza multimediale
Se stai utilizzando questa app Web con la lingua inglese o tedesca, vedrai un pulsante di riproduzione audio nella parte superiore dell'articolo. Facendo clic sul pulsante viene avviata una traccia audio di lettura ad alta voce per il testo scritto. Senza alcuna modifica, funziona molto bene, ma ho pensato di poterlo migliorare.
Per fornire più dati e persino controlli di riproduzione, ora puoi utilizzare una nuova API disponibile per le app Web progressive chiamata "API di sessione multimediale". Se un browser lo supporta, l'applicazione può migliorare significativamente l'esperienza multimediale.
- fornire un'illustrazione dell'album album
- fornire ulteriori informazioni sulla traccia audio come titolo, nome dell'album o nome dell'artista
- fornire controlli di riproduzione, in modo che gli utenti possano mettere in pausa o saltare parti della traccia audio al di fuori della tua app web
Semplicemente detto, semplicemente fatto
L'implementazione della "Media Session API" è molto semplice e richiede solo poche righe di codice.
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' }]
});
Se stai usando Typescript, c'è anche un pacchetto con le relative definizioni dei tipi disponibili su NPM.
Dopo aver aggiunto le modifiche, puoi verificare la tua implementazione riproducendo la traccia audio in un browser con supporto per l'API, come Google Chrome. Se tutto è impostato correttamente, la finestra multimediale in Chrome ora mostrerà i nomi forniti, le copertine degli album e i controlli, a seconda della tua implementazione.
Parole di chiusura
La "Media Session API" è un'aggiunta molto semplice alla tua PWA, che consente ai tuoi utenti di provare brani o video con metadati e controlli avanzati. L'API è attualmente contrassegnata come sperimentale, ma può già essere utilizzata con la maggior parte dei browser moderni.
