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

Question

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

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

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

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

通常，信息将显示为：

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

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

该通知如下所示：https://i.stack.imgur.com/CrAwx.png

Answer 1

我设法在媒体会话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现在的播放器通知一样。