在 iOS Safari 中播放音频时如何设置缩略图？

Question

我刚刚为一个新的播客启动了一个网站。我们将音频嵌入到页面上的媒体播放器中。播放时，此音频出现在 控制中心

音频选项卡以及锁定屏幕上

但是缩略图是一个通用的灰色音符。

是否可以使用HTML 或JavaScript 设置此缩略图，或者此缩略图仅为iOS 应用程序保留？

Answer 1

这是迄今为止我见过的最好的媒体会话 API 手册：https://web.dev/media-session/

但它说：

在撰写本文时（2020 年 3 月），Chrome 是唯一在桌面和移动设备上都支持媒体会话 API 的浏览器。 Firefox 部分支持桌面上的媒体会话 API，三星 Internet 也部分支持。有关最新信息，请参阅浏览器兼容性。

这里是browser compatibility list

除了 Chrome，已经在 Safari (iOS) 和 Firefox (Android) 上测试过，2020 年 7 月没有运气:(

Answer 2

您可以使用Media Session API。看看谷歌在customizing media notifications and handling playlists 上的文章。但是，此 API 仅在 Chrome 57 中受支持（2017 年 2 月测试版，2017 年 3 月稳定版）。如果这不是问题，请继续阅读。

使用MediaElement.js player 中的success 方法并设置其中的数据。然后使用MediaElement方法实现Media Session API集成。

这是我从前面提到的 Google 文章中摘录的一些样板代码。您需要在success 方法中对这段代码进行一些修改（根据您的需要）：

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() {});

}

如果您还需要什么，请告诉我！