Adding mediaSession support

[UlysseM]

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

[joao__vct]

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.

[seckinbrke]

Is there any update about this issue. Thanks 🙂

[DorianRichard]

Hello, I was able to set a custom MediaSession. However it's pretty "complicated" and require to customize the iframe (which Spotify probably doesnt allow in their ToS).

If you are interested here is the link to my repo: https://github.com/RichardDorian/Lightify
And if you want to try out by yourself you can go here: https://richarddorian.github.io/Lightify/ (you'll need an auth token because I didn't do auth stuff)