Media Session API

Enhance the media experience

If you’re using this web app with the english or german locale, you will see an audio playback button at the top of the article. Clicking the button starts a read-aloud audio track for the written text. Without any modifications, this works very nice, but I thought that I could improve upon it.

To provide more data and even playback controls, you can now use a new API available for progressive web apps called “Media Session API”. If a browser has support for it, the application can enhance the media experience significantly.

• provide an album artwork
• provide more information about the audio track such as title, album name or artist name
• provide playback controls, so that users can pause or skip parts of the audio track outside of your web app

Simply said, simply done

The implementation of the “Media Session API” is very straightforward and requires only a few lines of 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' }]
});

If you are using Typescript, there's also a package with the related type definitions available on NPM.

After the changes have been added, you can verify your implementation by playing the audio track in a browser with support for the API, such as Google Chrome. If everything is set up correctly, the media window in Chrome will now show the provided names, album artwork as well as controls, depending on your implementation.

Closing words

The “Media Session API” is a very simple addition to your PWA, that allows your users to experience songs or videos with enhanced metadata and controls. The API is currently in marked as experimental, but can already be used with most modern browsers.