How to work with the music stuff button on Chrome’s toolbar ? and it's posible to customize that?

Question

I want to know how to work with the music stuff button that recently added to chrome.

for example in youtube music we can see the colors are like to the music cover image color and image cover shows at the right:

but in Soundcloud, we can see just the color like to music/audio cover image color:

and buttons are different in Spotify:

and I want to know can we customize the color and image and etc of stuff music?

Answer 1

What's up?

This is a Chrome API called Media Session API. You can access:

 navigator.mediaSession...

If you want a full example:

 if ('mediaSession' in navigator) {

  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });

  navigator.mediaSession.setActionHandler('play', function() {});
  navigator.mediaSession.setActionHandler('pause', function() {});
  navigator.mediaSession.setActionHandler('seekbackward', function() {});
  navigator.mediaSession.setActionHandler('seekforward', function() {});
  navigator.mediaSession.setActionHandler('previoustrack', function() {});
  navigator.mediaSession.setActionHandler('nexttrack', function() {});
}

Link for more API documentation: https://developers.google.com/web/updates/2017/02/media-session