How to use iOS lock screen previous/next player buttons in Safari HTML5 player with Javascript

html, ios, javascript, safari

Solution

I don't know the answer to your first question.

It is possible to show a song title (or other text) simply by adding an HTML title tag to your audio element.

`var player = getElementById('my_audio_element'); player.setAttribute('title', 'My Song Title'); `

Unfortunately, it does not work to add an image in the same manner.

Problem

In Safari on iOS, when the <audio> DOM element is playing a sound file, you can pause/restart it via the device lock screen. Question: Is there an event that I can listen for on that <audio> element that gets fired when the user clicks the next or previous buttons on that lock screen? Bonus question: In Safari via HTML5 and Javascript, is there a way to show the audio file's meta data on that lock screen like you can with an app?

Original source