如何使用 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