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

Question

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

音频选项卡以及锁定屏幕

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

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

Answer 1

您可以使用 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() {});

}

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