Как работать с кнопкой Musi c на панели инструментов Chrome? а можно что то настроить?

Question

Я хочу знать, как работать с кнопкой «musi» c, которая недавно добавлена ​​к chrome.

, например, в youtube musi c. Мы видим, что цвета похожи на музыку. c цвет обложки и изображение обложки справа:

но в Soundcloud мы можем видеть только такой цвет, как для музыки / аудио цвет изображения обложки:

и кнопки отличаются в Spotify:

и я хочу знать, можем ли мы настроить цвет и изображение и т.д. c материала musi c?

Answer 1

Что случилось?

Это Chrome API, называемый Media Session API. Вы можете получить доступ к:

 navigator.mediaSession...

Если вам нужен полный пример:

 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() {});
}

Ссылка для получения дополнительной документации API: https://developers.google.com/web/updates/2017/02/media-session