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

Question

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

音频选项卡以及锁定屏幕

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

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

Answer 1

可以使用Media Session API. Take a look at Google's article on 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() {});

}

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

Answer 2

这是媒体上最好的手册 Session API 目前为止我看过：https://web.dev/media-session/

但是它说：

At the time of writing (March 2020), Chrome is the only browser that supports the Media Session API both on desktop and mobile. Firefox has partial support for the Media Session API on desktop behind a flag, and Samsung Internet also has partial support. See Browser compatibility for up-to-date information.

这是browser compatibility list

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

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

How do I set a Thumbnail when playing Audio in iOS Safari?

html

javascript

thumbnails

ios

mediaelement.js