javascript - 如何使用 Chrome 工具栏上的音乐内容按钮？可以定制吗？

Question

我想知道如何使用最近添加到 Chrome 的音乐内容按钮。

例如，在 YouTube 音乐中，我们可以看到颜色类似于音乐封面图像的颜色，并且图像封面显示在右侧:

但在 Soundcloud 中，我们只能看到类似于音乐/音频封面图像颜色的颜色:

Spotify 中的按钮不同:

我想知道我们可以自定义音乐的颜色和图像等吗？

Answer 1

怎么了？

这是一个名为 Media Session API 的 Chrome 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