How to replace file link with a name during Safari/Chrome audio playback on home screen?

Question

I have been googling for a while, and do let me know if this question is a repeat, but here's what I am trying to achieve: I am making a HTML <audio> playback system, with help of audio.js library. Audio playback is working perfectly fine, with some glitches in iphone, but when I playback on phone (Android or iOS), audio control shows up in phone's media player and home screen, which is a good thing but its showing the link to my audio, not the name of the file.

Here's what's happening:

Here's what I want (taken from a famous audio playback website):

Please, let me know what I am missing or if the question is incomplete or incorrect! Any sort off comment or suggestion will be thankful. Thanks

Answer 1

I think setting title attribute (on the audio element) to the string you want to be displayed, may be the solution you want.

PS: I'm inexperienced in SO so don't lay it all on me please, just trying to help.

Answer 2

In response to the bounty, I'm pretty sure there is NO credible or official source for the accepted answer.

Official documentation on <audio> tag consistently makes no reference to the title attribute MDN: <audio> as an example. And using title attribute on <audio> element will not result in any sort of magic behavior for typical users of the native api.

The author of audio.js also makes no mention of title in his documentation, nor any mention of it in his well-commented source code. Author of audio.js also does not use it in the official examples of module usage.

Two examples are provided by audio.js documentation that display song titles. One of them uses an <h1> to display the title and the other one uses a :before pseudo-element. No sign of a title attribute anywhere.

The fact that suggestion to use title attribute answered OP's question seems to be a happy coincidence.

@sphinx