21

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

control center

audio tab as well as on the lock screen

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?

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

2 Answers 2

7
+100

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!

4
  • Will this work on iOS? Because that is what I'm interested in. Take a look at the screenshots in my question for further context.
    – alex
    Jun 10, 2017 at 20:05
  • @pappy I think this should work since this is not specifically a Google-supported API. Read more here: github.com/WICG/mediasession They've mentioned something about iOS media keys and lock screen UI in the Limitations section which means that this should work on iOS too. :)
    – Daksh
    Jun 16, 2017 at 18:04
  • 3
    it still doesn't work on iOS, but, as of now (Feb 2020), Chrome Platform Status (FWIW) says it's "in development" on Safari and links to the webkit bugzilla
    – kubi
    Feb 11, 2020 at 11:10
  • 1
    works on ios 16.4 with jpg's 512x512 May 10 at 18:15
5

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

2
  • Thanks Eugen. Great article. Marking this as the solution, as it does indeed seem impossible to add to Safari for iOS. Hopefully Apple sees this page and adds the Media Session API to their browser!
    – alex
    Jul 7, 2020 at 20:17
  • 1
    The Media Session API is now supported in Safari on iOS 15 beta and MacOS 11.5 Beta! Jul 2, 2021 at 0:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.