Audio files show up in blog editor but not on blog

Technical Q&A
1

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

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

screenshot 2.png
screenshot 2.png587×205 4.48 KB

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

screenshot 3.png
screenshot 3.png642×190 8.19 KB

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

2
3

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.

4

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.

5

I’ve posted more information above as a reply.

6

Weird, the audio height set to auto causes the

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%;
}
7

If you are looking for a way to manage this with an easy to use app check out Listen Now! The app started as a text to speech tool for blog posts and now supports audio for blog posts and most pages on Shopify. Pretty nifty.