API vir mediasessie

Die verskaffing van mediametadata en terugbel in u PWA

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.

Image b313f068c476

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.