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

Question

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

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

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

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

通常信息会显示为：

• 歌名
• 专辑名称
• 艺术家姓名
• 专辑封面

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

这是该通知的样子：https : //i.imgur.com/xazil7Y.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 现在的播放器通知一样。