Use mp3 metadata or HTML to display artwork and track name on iPhone lock screen

Question

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

Answer 1

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.

Answer 2

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