Adding mediaSession support


Adding mediaSession support

Casual Listener

Copy of




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({
    artist: (songMetadata?.artists ?? [])
      .map(artist =>
      .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:



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

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



Set the MediaMetadata

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


Bonus point: support for setActionHandler:


Behaves like setActionHandler of the mediaSession.

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

1 Reply


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.