时间戳

首页 > 解决方案 > 如何使用 Chrome 工具栏上的音乐内容按钮？并且可以定制吗？

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

问题描述

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

例如，在 youtube 音乐中，我们可以看到颜色类似于音乐封面图像颜色和图像封面显示在右侧：

样品 1

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

样品 2

和按钮在 Spotify 中有所不同：

样品 3

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

标签： javascriptcssgoogle-chrome

解决方案

这是怎么回事？

这是一个名为 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

推荐阅读