Audio files show up in blog editor but not on blog

[HaldaneKing]

I'm not quite clear what could be happening, I used the standard div element:

<div id="player"><audio controls="controls"><source src="https://cdn.shopify.com/s/files/1/0708/8429/4938/files/audiocheck.net_whitenoise.mp3?v=1683312949" type="audio/mpeg" /></audio></div>

The audio console shows up in the blog editor and I can click on it and play the audio:

but in the published blog there's just a blank space there:

Any ideas on how to get the audio to show up on the page like in the editor?

[Sarwanibrahim]

---

@HaldaneKing wrote:

I'm not quite clear what could be happening, I used the standard div element:

<div id="player"><audio controls="controls"><source src="https://cdn.shopify.com/s/files/1/0708/8429/4938/files/audiocheck.net_whitenoise.mp3?v=1683312949" type="audio/mpeg" /></audio></div>

The audio console shows up in the blog editor and I can click on it and play the audio:

but in the published blog there's just a blank space there:

Any ideas on how to get the audio to show up on the page like in the editor?

---

[PaulNewton]

Others do not know what you know ALWAYS provide the information others need to reproduce and inspect an issues.

Store url, storefront password, etc

https://community.shopify.com/c/shopify-design/help-us-help-you/td-p/668159 

Good luck. 

[HaldaneKing]

I've posted more information above as a reply. 

[HaldaneKing]

As requested, the post in question is displayed here, you can see the spot after the first heading "The color spectrum doesn't mix":

https://molekule.com/blogs/all/the-colors-of-noise

We just moved the post over from Wordpress on April 23rd. We haven't made any changes to the blog's theme as of yet, we're still working with the "Default blog post" template. 

[PaulNewton]

Weird, the audio height set to auto causes the <audio> element to collapse to zero(0) height.

Try the following CSS either in a custom-css setting for either the template , the section, or for the entire theme.

Read  https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

div#player audio {
 height: inherit;
}

If that works then may want to tune the existing rule in the themes style.css around line 2451 that causes this display behavior keeping in mind that would affect the entire site.

img,
audio,
video {
  height: auto;
  max-width: 100%;
}

[Chris_Hantis]

Hi There,
If you're looking for an app to solve this issue check out Listen Now! for all your audio player needs.
We have the ability for merchants to add either audio or text to speech to individual blog posts.