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

Question

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

音频选项卡以及锁定屏幕

但是缩略图是一般的灰色音符.

是否有设置此缩略图,使用HTML或JavaScript,或者此缩略图仅保留给iOS应用程序？

Answer 1

您可以使用媒体会话 API。请查看 Google 关于自定义媒体通知和处理播放列表的文章。不过，此 API 仅在 Chrome 57 中受支持（2017 年 2 月测试版，2017 年 3 月稳定版）。如果这不是问题，请继续阅读。

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

这是我从前面引用的 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

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

但它说：

截至撰写本文时（2020 年 3 月），Chrome 是唯一在桌面和移动设备上支持 Media Session API 的浏览器。Firefox 对桌面上的 Media Session API 提供部分支持，Samsung Internet 也提供部分支持。请参阅浏览器兼容性以获取最新信息。

这是浏览器兼容性列表

除了 Chrome 之外，还在 Safari (iOS) 和 Firefox (Android) 上进行了测试，2020 年 7 月没有运气:(

UPD： 2021 年 9 月发布的 Safari 15 支持 MediaSessionAPI