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?

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?

• javascript
• html
• ios
• thumbnails
• mediaelement.js

• "We're embedding the audio in a media player" What media player? – Michał Perłakowski Commented Jun 7, 2017 at 16:59
• Good question. It's a HTML/JS media player created by mediaelementjs. – alex Commented Jun 7, 2017 at 17:29
• 2 stackoverflow./questions/28303376/… I guess that some tags can be added to show the image? – Larme Commented Jun 14, 2017 at 12:53
• OP have you got the answer? I am facing similar situation. Thanks! – aareeph Commented May 2, 2018 at 9:10
• Unfortunately not. I never found a solution for this one. – alex Commented May 2, 2018 at 11:21

2 Answers 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./96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage./128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage./192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage./256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage./384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage./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!

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 patibility for up-to-date information.

Here is the browser patibility 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