Adding mediaSession support

Reply

Adding mediaSession support

UlysseM
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 */);

1 Reply

joao__vct
Regular

We need this soon as possible. Its just improves so much the user experience. By the way, I try to replicate your code that access the iframe element and set there the mediaSession, but this gives me a security error... I tried to place a silent audio on the background, but the spotify player just override mine. So for now I don't have any solutions to make this essential feature real.

SUGGESTED POSTS