When you lock an iphone after using safari / chrome etc., when an mp3 file is playing, it displays blank artwork and a hard link to the mp3 file location, which looks quite ugly. Is there some alt tag/ meta data I can include to show artwork and the track title on this?

When you lock an iphone after using safari / chrome etc., when an mp3 file is playing, it displays blank artwork and a hard link to the mp3 file location, which looks quite ugly. Is there some alt tag/ meta data I can include to show artwork and the track title on this?

• javascript
• ios
• iphone
• html

3 Answers 3

You can add a string that will be shown on the iOS lockscreen by setting a title attribute on your <audio> element. It's all on the "song" line, so it doesn't look totally native, but it gets your point across.

I don't, however, know of any way to coax iOS into displaying album art of media ing from a browser.

If you want to display image on lock screen from your page you cannot do this, only iOS apps can. If you want to play music in background(while safari is closed, not killed) you can do it like this

var mp3 = document.createElement("audio");
   mp3.setAttribute('src', 'http://example./track.mp3');
   mp3.load();
   document.documentElement.appendChild(mp3);
   mp3.play();
   mp3.pause() // Pause

This is very similar to another post about showing the album thumnail on ios from safari where the solution suggested is to use the mediaSession api, that works pretty well for versions safari after 2021, using 512x512 image/jpg's, tested on ios 15.6 and 16.4