Announcements

Adding mediaSession support

Reply
Highlighted

Adding mediaSession support

Casual Listener

Copy of https://github.com/spotify/web-playback-sdk/issues/105

 

Hi,

 

Chrome recently rolled out some UI feature related to mediaSession, which displays some information about the track we are playing and provides some navigation UI.

As the "audio" element lives within an iframe that is on an external cross-origin URL, there is no way to add something like this to it:

 

 

 

let remoteNavigator = window.document.querySelector('iframe').contentWindow.navigator;
remoteNavigator .mediaSession.playbackState = 'playing';
remoteNavigator.mediaSession.metadata = new MediaMetadata({
    title: songMetadata.name,
    artist: (songMetadata?.artists ?? [])
      .map(artist => artist.name)
      .join(' - '),
    album: songMetadata?.album?.name,
    artwork: (songMetadata?.album?.images ?? []).map(el => ({
      sizes: el.width + 'x' + el.height,
      src: el.url,
      type: ''
}))

 

 

 

I believe there is value (in my case, at least), to let developers write that mediaSession themselve (instead of forcing it yourself).

 

If I'm not mistaken, spotify-player.js player could act as a bridge between the iframe containing the audio tag and our applications.

 

I'd suggest the following API:

 

Spotify.Player.mediaSession#setPlaybackState

Set the MediaSessionPlaybackState which can be 'playing', 'paused', or 'none'.

Code Sample: player.mediaSession.setPlaybackState('playing')

 

Spotify.Player.mediaSession#setMetadata

Set the MediaMetadata

Code Sample: player.mediaSession.setMetadata(new MediaMetadata({/* ... */}))

 

Bonus point: support for setActionHandler:

Spotify.Player.mediaSession#setActionHandler

Behaves like setActionHandler of the mediaSession.

Code Sample: player.mediaSession.setActionHandler('nexttrack', /* my callback */);

SUGGESTED POSTS