Plibonigu la amaskomunikan sperton
Se vi uzas ĉi tiun ret-programon kun la angla aŭ germana loka regiono, vi vidos buton de reprodukta sono ĉe la supro de la artikolo. Alklakante la butonon komenciĝas laŭtlega sontrako por la skribita teksto. Sen iuj modifoj, ĉi tio funkcias tre bone, sed mi pensis, ke mi povus plibonigi ĝin.
Por provizi pli da datumoj kaj eĉ reproduktajn kontrolojn, vi nun povas uzi novan API haveblan por progresemaj retaj programoj nomataj "Media Session API". Se retumilo subtenas ĝin, la aplikaĵo povas plibonigi la amaskomunikan sperton signife.
- provizi albuman artaĵon
- provizu pli da informoj pri la sontrako kiel titolo, albuma nomo aŭ artista nomo
- provizi reproduktajn kontrolojn, tiel ke uzantoj povas paŭzi aŭ transsalti partojn de la sontrako ekster via retejo
Simple dirite, simple farita
La efektivigo de la "Media Session API" estas tre simpla kaj postulas nur kelkajn liniojn de kodo.
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 vi uzas Typescript, ekzistas ankaŭ pako kun la rilataj tipaj difinoj havebla ĉe NPM.
Post kiam la ŝanĝoj estis aldonitaj, vi povas kontroli vian efektivigon ludante la sonan trakon en retumilo kun subteno por la API, kiel Google Chrome. Se ĉio estas ĝuste aranĝita, la amaskomunikila fenestro en Chrome nun montros la provizitajn nomojn, albumajn bildojn kaj ankaŭ kontrolojn, depende de via efektivigo.
Fermaj vortoj
La "Media Session API" estas tre simpla aldono al via PWA, kiu permesas al viaj uzantoj sperti kantojn aŭ filmetojn kun plibonigitaj metadatenoj kaj kontroloj. La API estas nuntempe markita kiel eksperimenta, sed jam uzebla kun plej multaj modernaj retumiloj.
