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

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