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

Question

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

音频标签以及锁定屏幕

然而，缩略图是一般的灰色音符。

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

Answer 1

这是到目前为止我所见过的有关Media Session API的最佳手册：https://web.dev/media-session/

但是它说：

在撰写本文时（2020年3月），Chrome是唯一在桌面设备和移动设备上均支持Media Session API的浏览器。 Firefox对桌面上的Media Session API表示了部分支持，而Samsung Internet也提供了部分支持。有关最新信息，请参见浏览器兼容性。

这里是browser compatibility list

除了Chrome，还已经在Safari（iOS）和Firefox（在Android）上对其进行了测试，但到2020年7月运气不好：

Answer 2

我知道这显示为已回答，但我发现了以下内容并且可能会对此问题有所了解：

Apple 有自己的 MediaSession，称为 AVAudioSession (https://developer.apple.com/documentation/avfoundation/avaudiosession)，我们可以使用它来显示播放、暂停、下一首、上一首等按钮，以及媒体缩略图和其他元数据信息。

Answer 3

您可以使用Media Session API。请查看Google关于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() {});

}

如果您还有其他需要，请告诉我们！