1

I have this embedded audio that when in Chrome, Firefox or IE it loads and appears as it should, but when I open it in Safari or iOS it's not visible. It is there as it still takes up the space on the page but it's just not showing. Strangely, if I inspect the element and say, remove the word audio and then re-add the word audio the player then shows up on the page.

Any reason as to why it doesn't load straight away?

<audio controls>
   <source src="https://assets.ctfassets.net/y4nxuejkhx03/1Emfg6tpZsyRiipdrUAXTk/6814cbae4dccff5db7a2454fe2c10997/09142020_Marco-Willner-FINAL_EP_-_14-09-2020_14.43.mp3" type="audio/mpeg">
</audio>

1 Answer 1

0

This might be an compatibility issue..

Try this code:

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<p>Your browser does not support this audio file</p>
</audio>

If you see the line Your browser does not support this audio file in the page, the browser does not support the audio tag.

If you do not see that sentence or the embed audio try changing the code to this format:

<audio src="audio.mp3" controls></audio>

Note that the audio tags work only in Safari versions 4.0 and above

2
  • Thanks for the reply. It didn't help unfortunately. Do you think it is compatibility when it does show but it just doesn't want to show it initially? The only way for it to display is still to remove it in dev tools and then re-add it and it's fine. Really don't know why. I've tried preload attributes also to no avail. Commented Nov 24, 2020 at 12:06
  • @hal_jordan27 are you using the audio code directly or using any javascript to play the audio? Commented Nov 24, 2020 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.