3 Audio Players - none working

Elements CMS
1

elementsapp://downloadDocument/QXmbA2MRCgC2

Html - not working
Elements - can’t {{}} source audio
Doobox - tired {{item.audio.mp3}} {{item.audio}}

<div style="max-width:400px; margin:0 auto; text-align:center;">
  <audio controls preload="metadata" style="width:100%;border-radius:8px;">
    <source src="{{item.audio}}" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</div>
2

Okay, so you have quite a few problems going on here :woozy_face:

Here’s how to fix them…

If you’e building your own Custom CMS Components you need to wrap the twig tags in @raw, like this:

<div style="max-width:400px; margin:0 auto; text-align:center;">
  <audio controls preload="metadata" style="width:100%;border-radius:8px;">
    <source src="@raw(){{item.audio}}@endraw" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</div>

Your other problem is file naming, you need to ensure all your audio files use web safe names, and that your Markdown files also reference web safe names.

And finally…

CleanShot 2025-11-24 at 3 .04.03@2x
CleanShot 2025-11-24 at 3 .04.03@2x1920×738 380 KB

3

Thank you so much :blush: it works… working on batch renaming everything now :slight_smile:

4

Have to say - Now that things are all lower case and separated with a hyphen - @Doobox audio player WORKS PERFECTLY and I’m using it!!!