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

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?

"We're embedding the audio in a media player" What media player? — Michał Perłakowski, Jun 07 '17 at 16:59
Good question. It's a HTML/JS media player created by http://www.mediaelementjs.com — alex, Jun 07 '17 at 17:29
https://stackoverflow.com/questions/28303376/is-it-possible-to-change-the-ios-8-lock-screen-audio-label-when-playing-from-web I guess that some tags can be added to show the image? — Larme, Jun 14 '17 at 12:53
OP have you got the answer? I am facing similar situation. Thanks! — aareeph, May 02 '18 at 09:10
@Brad, so an `.mp3` with added ID3 tag or an `.m4a` with added COVR atom still does not work? Not even any `og:image` tags inside page source code are picked up by the IOS player? Finally, what if the podcast m4a file is opened (in a new tab) as a direct link, like playing a device-stored file but now just getting file data from online? I don't have an Apple device to see issue... — VC.One, Jul 05 '19 at 08:15
@VC.One Nope, unfortunately none of those things work. I've tried setting the appropriate tags, the `covr` atom in MP4, the `poster` attribute of the media telement, the `og:image` meta tag, nothing works. Direct URL to audio doesn't work either. — Brad, Jul 05 '19 at 23:48
@Brad the only other thing I can think of is deep-linking. Try adding `?app=music` at the end of the direct audio file URL that you load... — VC.One, Jul 06 '19 at 10:41

score 7 · Answer 1 · answered Jun 10 '17 at 17:31

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!

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 '17 at 20:05
@pappy I think this should work since this is not specifically a Google-supported API. Read more here: https://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 '17 at 18:04
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](https://bugs.webkit.org/show_bug.cgi?id=145411) — kubi, Feb 11 '20 at 11:10

Eugen Baryshnikau · Accepted Answer · 2022-06-14T08:48:50.723

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

edited Jun 14 '22 at 08:48

answered Jul 07 '20 at 13:01

Eugen Baryshnikau

425
3
18

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 07 '20 at 20:17
1

The Media Session API is now supported in Safari on iOS 15 beta and MacOS 11.5 Beta! – Peter Fernandes Jul 02 '21 at 00:25

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

2 Answers2

Linked