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

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


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 :(


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!