How to adjust thumbnail when playing audio in iOS Safari?

I just launched a site for a new podcast. We insert audio into the media player on the page. When playing this sound appears on the Control Center

control center

audio tab as well as lock screen

lock screen

However, the thumbnail is a common recording of gray music.

Should I still customize this sketch using HTML or JavaScript , or is this thumbnail reserved only for iOS applications?

+7
source share
1 answer

You can use the Media Session API . Take a look at a Google article on setting up multimedia notifications and processing playlists . However, this API is only supported on Chrome 57 (beta in February 2017, stable in March 2017). If this is not a problem, read on.

Use the success method in MediaElement.js player and set the data inside it. Then use the MediaElement methods to achieve media session API integration.

Here is the boilerplate code that I took from the Google article mentioned earlier. You should 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!

-3
source

Source: https://habr.com/ru/post/1268640/


All Articles