javascript - 有没有办法在浏览器上为 HTML5 音频设置音频信息(标题、专辑、艺术家)

Question

我正在开发一个使用 Vue 构建的供个人使用的 PWA，其功能基本上与 YouTube Music 相同，而无需每月付费。

我设置了一个带有 REST API 的服务器，该服务器可以根据查询搜索 YouTube，然后向客户端返回该视频的纯音频流的 URL。然后将其定义为 src <audio> 上的属性标签。

播放效果很好，但我打算在汽车中通过蓝牙使用它，并且我注意到汽车平板电脑上显示的信息只是有关应用程序的信息。例如，如果我播放一些音乐，我会看到以下内容:

• 应用名称
• 本地 IP 地址
• 未知艺术家
• 没有专辑封面

信息通常显示为:

• 歌曲名称
• 专辑名称
• 艺术家姓名
• 专辑艺术

由于这是 PWA，当我的手机上播放音乐时，我会收到一个小的音频播放器通知。我相信，如果我能弄清楚如何编辑该播放器的值，我应该能够实现我想要做的事情。有什么方法可以设置这些值吗？

该通知如下所示:/image/CrAwx.png

Answer 1

我设法在 Media Session API 中找到答案。

提供的这个示例基本上正是我正在寻找的内容。

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' },
    ]
  });
}

现在，当音频播放器通知出现时，它会显示正确的标题、艺术家、专辑和专辑封面。它的工作方式就像现在的 Google Play 音乐、YouTube 音乐或 Spotify 的播放器通知一样。