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

Posted 2023-05-07

【中文标题】在 iOS Safari 中播放音频时如何设置缩略图？

【英文标题】：How do I set a Thumbnail when playing Audio in iOS Safari?

【发布时间】：2017-11-09 03:48:18

【问题描述】：

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

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

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

是否可以使用html 或javascript 设置此缩略图，或者此缩略图仅为ios 应用程序保留？

【问题讨论】：

“我们正在将音频嵌入媒体播放器”什么媒体播放器？

好问题。这是由mediaelementjs.com

创建的 HTML/JS 媒体播放器

***.com/questions/28303376/…我猜可以加一些标签来显示图片？

OP 你有答案吗？我面临着类似的情况。谢谢！

很遗憾没有。我从来没有找到解决这个问题的方法。

【参考方案1】：

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

但它说：

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

这里是browser compatibility list

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

【讨论】：

谢谢欧根。很棒的文章。将此标记为解决方案，因为它确实似乎不可能添加到 iOS 版 Safari。希望 Apple 看到此页面并将媒体会话 API 添加到他们的浏览器！

iOS 15 beta 和 MacOS 11.5 Beta 上的 Safari 现在支持 Media Session API！

【参考方案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() );

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

【讨论】：

这可以在 iOS 上使用吗？因为那是我感兴趣的。请查看我的问题中的屏幕截图以了解更多上下文。

@pappy 我认为这应该可行，因为这不是专门支持 Google 的 API。在此处阅读更多信息：github.com/WICG/mediasession 他们在“限制”部分提到了有关 iOS 媒体键和锁屏 UI 的内容，这意味着这也应该适用于 iOS。 :)

它仍然无法在 iOS 上运行，但截至目前（2020 年 2 月），Chrome 平台状态 (FWIW) 表示它在 Safari 上“正在开发中”并链接到 webkit bugzilla跨度>