Verbessern Sie das Medienerlebnis
Wenn Sie diese Web-App mit dem englischen oder deutschen Gebietsschema verwenden, sehen Sie oben im Artikel eine Schaltfläche für die Audiowiedergabe. Ein Klick auf die Schaltfläche startet eine vorgelesene Audiospur für den geschriebenen Text. Ohne Änderungen funktioniert das sehr gut, aber ich dachte, dass ich es verbessern könnte.
Um mehr Daten und sogar Wiedergabesteuerungen bereitzustellen, können Sie jetzt eine neue API für progressive Webanwendungen namens „Media Session API“ verwenden. Wenn ein Browser dies unterstützt, kann die Anwendung das Medienerlebnis erheblich verbessern.
- ein Albumcover bereitstellen
- Geben Sie weitere Informationen zum Audiotrack wie Titel, Albumname oder Künstlername an
- Bereitstellung von Wiedergabesteuerungen, damit Benutzer Teile des Audiotracks außerhalb Ihrer Web-App anhalten oder überspringen können
Einfach gesagt, einfach getan
Die Implementierung der „Media Session API“ ist sehr einfach und erfordert nur wenige Zeilen 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' }]
});
Wenn Sie Typescript verwenden, ist auch ein Paket mit den zugehörigen Typdefinitionen auf NPM verfügbar.
Nachdem die Änderungen hinzugefügt wurden, können Sie Ihre Implementierung überprüfen, indem Sie den Audiotrack in einem Browser mit API-Unterstützung abspielen, z. B. Google Chrome. Wenn alles richtig eingerichtet ist, zeigt das Medienfenster in Chrome nun je nach Implementierung die bereitgestellten Namen, Albumcover sowie Steuerelemente an.
Schlussworte
Die „Media Session API“ ist eine sehr einfache Ergänzung zu Ihrer PWA, die es Ihren Benutzern ermöglicht, Songs oder Videos mit erweiterten Metadaten und Kontrollen zu erleben. Die API ist derzeit als experimentell gekennzeichnet, kann aber bereits mit den meisten modernen Browsern verwendet werden.
