Verbeter die media-ervaring
As u hierdie webprogram met die Engelse of Duitse taal gebruik, sal u 'n klankafspeelknoppie bo-aan die artikel sien. Deur op die knoppie te klik, begin 'n voorgeleesde klankbaan vir die geskrewe teks. Sonder enige wysigings werk dit baie mooi, maar ek het gedink dat ek dit sou kon verbeter.
Om meer data en selfs afspeelkontroles te verskaf, kan u nou 'n nuwe API gebruik wat beskikbaar is vir progressiewe webprogramme genaamd "Media Session API". As 'n blaaier dit ondersteun, kan die toepassing die media-ervaring aansienlik verbeter.
- verskaf 'n albumkunswerk
- verskaf meer inligting oor die klankbaan, soos titel, albumnaam of kunstenaarnaam
- bied afspeelkontroles, sodat gebruikers dele van die klanksnit buite jou webprogram kan onderbreek of oorslaan
Eenvoudig gesê, eenvoudig gedoen
Die implementering van die "Media Session API" is baie eenvoudig en benodig slegs 'n paar reëls kode.
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' }]
});
As u Typescript gebruik, is daar ook 'n pakket met die verwante tipe definisies beskikbaar op NPM.
Nadat die veranderinge bygevoeg is, kan u die implementering daarvan verifieer deur die klanksnit in 'n blaaier te speel met ondersteuning vir die API, soos Google Chrome. As alles reg ingestel is, sal die mediavenster in Chrome nou die verstrekte name, albumkuns en kontroles toon, afhangende van u implementering.
Slotwoorde
Die "Media Session API" is 'n baie eenvoudige toevoeging tot u PWA, waarmee u gebruikers liedjies of video's kan ervaar met verbeterde metadata en kontroles. Die API is tans gemerk as eksperimenteel, maar kan reeds met die meeste moderne blaaiers gebruik word.