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

Question

I just launched a website for a new podcast. We're embedding the audio in a media player on the page. When playing, this audio appears on the Control Center

audio tab as well as on the lock screen

However the thumbnail is a generic grey music note.

Is there anyway to set this thumbnail, using HTML or JavaScript, or is this thumbnail reserved only for iOS applications?

Answer 1

Here is the best manual on Media Session API I've seen so far: https://web.dev/media-session/

But it says:

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.

Here is the browser compatibility list

Besides Chrome, have tested it on Safari (iOS) and Firefox (on Android), no luck in July 2020 :(

UPD: MediaSessionAPI is supported in Safari 15, released in September 2021

Answer 2

You can use the Media Session API. Take a look at Google's article on customizing media notifications and handling playlists. However, this API is supported only in Chrome 57 (beta in February 2017, stable in March 2017). If that's not a problem, read ahead.

Use the success method in the MediaElement.js player and set the data inside of it. Then use the MediaElement methods to achieve the Media Session API integration.

Here's some boilerplate code I picked up from the Google article referenced earlier. You need to use some modification (according to what you need) of this code in the success method:

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() {});

}

Let me know if you need anything else!