在 iOS Safari 中播放音頻時如何設置縮略圖？

Question

我剛剛為一個新的播客啟動了一個網站。 我們將音頻嵌入到頁面上的媒體播放器中。 播放時，此音頻出現在控制中心

音頻選項卡以及鎖定屏幕上

然而，縮略圖是一個通用的灰色音符。

無論如何設置這個縮略圖，使用HTML或JavaScript ，還是這個縮略圖只保留給 iOS 應用程序？

Answer 1

您可以使用媒體會話 API 。 查看 Google 關於自定義媒體通知和處理播放列表的文章。 但是，此 API 僅在 Chrome 57 中受支持（2017 年 2 月測試版，2017 年 3 月穩定版）。 如果這不是問題，請繼續閱讀。

使用MediaElement.js 播放器中的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

這是迄今為止我見過的關於媒體會話 API 的最佳手冊： https ://web.dev/media-session/

但它說：

在撰寫本文時（2020 年 3 月），Chrome 是唯一在桌面和移動設備上都支持媒體會話 API 的瀏覽器。 Firefox 部分支持桌面上的媒體會話 API，三星 Internet 也部分支持。 有關最新信息，請參閱瀏覽器兼容性。

這是瀏覽器兼容性列表

除了 Chrome，已經在 Safari（iOS）和 Firefox（Android）上測試過，2020 年 7 月運氣不好 :(

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

Answer 3

我剛剛啟動了一個新播客的網站。 我們將音頻嵌入到頁面上的媒體播放器中。 播放時，此音頻出現在控制中心上

音頻標簽以及鎖定屏幕上

但是，縮略圖是普通的灰色音樂筆記。

無論如何，是否可以使用HTML或JavaScript設置此縮略圖，還是僅為iOS應用程序保留此縮略圖？