How to replace a link to a file with a name while playing Safari / Chrome sound on the main screen?

Question

I was looking for time to search the Internet, and let me know if this question repeats itself, but here is what I am trying to achieve: I am creating an HTML <audio> playback system using audio.js . Audio playback works fine, with some malfunctions in the iphone, but when I play on the phone (Android or iOS), the sound control is displayed in the phone player and on the main screen, which is good, but its display is a link to my sound, not the file name.

Here's what happens:

Here 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 comment or suggestion would be greatly appreciated. Thanks

Answer 1

I think setting the title attribute (in the audio element) to the line you want to display may be the solution you want.

PS: I am inexperienced in SO, so don’t put everything on me, please just try to help.

Answer 2

In response to generosity, I am sure that there is no acceptable or official source for the accepted answer.

The official documentation for the <audio> tag does not consistently refer to the title attribute MDN: <audio> as an example. And using the title attribute in the <audio> element will not lead to any magic behavior for typical users of the native api.

The author of audio.js also does not mention title in his documentation and does not mention this in his well-commented source code. The author of audio.js also does not use it in official examples of using the module.

Two examples are provided in the audio.js documentation, which displays the names of the songs. One of them uses <h1> to display the name and the other uses the :before pseudo-element. There are no signs of the title attribute.

The fact that the proposal to use the title attribute answered the OP question seems like a happy coincidence.

@sphinx