javascripthtmliosthumbnailsmediaelement.js

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


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?


Solution

  • 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