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?
Asked
Active
Viewed 2,051 times
3 Answers
9
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 coming from a browser.
Kyle Shockey
- 106
- 1
1
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.com/track.mp3');
mp3.load();
document.documentElement.appendChild(mp3);
mp3.play();
mp3.pause() // Pause
Tuc3k
- 1,032
- 9
- 12
-
Thanks- so there's no way to mask the track location from showing up? I'd prefer it if it could say "Track title" rather than "track.mp3", for example. – Michael Watson Oct 05 '16 at 20:54
-
That's a shame, as the project I'm working on uses a 3rd party for mp3 sources, so it looks quite ugly. – Michael Watson Oct 05 '16 at 20:55
-
You should consider making an iOS app – Tuc3k Oct 05 '16 at 21:06
0
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
Barak Binyamin
- 174
- 1
- 11