Fokozza a médiaélményt
Ha ezt a webalkalmazást az angol vagy a német nyelvterülettel használja, akkor a cikk tetején megjelenik egy hanglejátszás gomb. A gombra kattintva elindul egy felolvasott hangsáv az írott szöveghez. Minden módosítás nélkül ez nagyon szépen működik, de úgy gondoltam, hogy javítani tudok rajta.
Több adat és még a lejátszás vezérlésének biztosítása érdekében most már használhatja a progresszív webalkalmazások számára elérhető új „Media Session API” nevű API-t. Ha egy böngésző támogatja azt, akkor az alkalmazás jelentősen javíthatja a médiaélményt.
- albumalkotást nyújtani
- adjon meg további információkat a hangsávról, mint például a cím, az album neve vagy az előadó neve
- biztosítson lejátszási vezérlőket, hogy a felhasználók szüneteltethessék vagy kihagyhassák a hangsáv egyes részeit az Ön webalkalmazásán kívül
Egyszerűen szólva, egyszerűen kész
A „Media Session API” megvalósítása nagyon egyszerű és csak néhány soros kódot igényel.
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' }]
});
A Typescript használata esetén az NPM-en egy csomag is rendelkezésre áll, a kapcsolódó típusdefiníciókkal.
A módosítások hozzáadása után ellenőrizheti megvalósítását úgy, hogy lejátszja a hangsávot egy olyan böngészőben, amely támogatja az API-t, például a Google Chrome-ot. Ha minden megfelelően van beállítva, akkor a Chrome médiaablakában a megvalósítástól függően a megadott nevek, albumképek és vezérlők láthatók.
Záró szavak
A „Media Session API” egy nagyon egyszerű kiegészítés a PWA-hoz, amely lehetővé teszi a felhasználók számára, hogy továbbfejlesztett metaadatokkal és vezérlőkkel élhessenek meg dalokat vagy videókat. Az API jelenleg kísérleti jelleggel van megjelölve, de a legtöbb modern böngészővel már használható.
