# Making my own html audio player

**URL:** <https://forums.realmacsoftware.com/t/making-my-own-html-audio-player/52715>\
**Category:** Elements\
**Created:** [November 23, 2025, 9:50pm UTC](https://forums.realmacsoftware.com/t/making-my-own-html-audio-player/52715 "2025-11-23T21:50:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\
**Post date:** [November 23, 2025, 9:50pm UTC](https://forums.realmacsoftware.com/t/making-my-own-html-audio-player/52715/1 "2025-11-23T21:50:02Z")

</div>

Could get any audio player to work…

Here is the code:

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

```

Here is the CMS Meta data:

```auto
audio:
  stream: "/resources/songs2/00001%20Earth%20Food.mp3"
  download: "/resources/songs2/00001%20Earth%20Food.mp3"
  alt_formats: "/resources/songs2/00001%20Earth%20Food.ogg"

```

---

<div class="post-metadata">

**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\
**Post date:** [November 23, 2025, 9:53pm UTC](https://forums.realmacsoftware.com/t/making-my-own-html-audio-player/52715/2 "2025-11-23T21:53:49Z")

</div>

Here is the 17 mb project:

elementsapp://downloadDocument/frVVTy5g1s9l

---

<div class="post-metadata">

**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\
**Post date:** [November 23, 2025, 10:20pm UTC](https://forums.realmacsoftware.com/t/making-my-own-html-audio-player/52715/3 "2025-11-23T22:20:00Z")

</div>

Trying this with variations:

```auto
<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.stream}}" type="audio/mpeg">
    <source src="{{item.audio.alt_formats}}" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>
</div>

```

---

<div class="post-metadata">

**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\
**Post date:** [November 23, 2025, 11:54pm UTC](https://forums.realmacsoftware.com/t/making-my-own-html-audio-player/52715/4 "2025-11-23T23:54:09Z")

</div>

reduced to simplify path and cms meta data

[elementsapp://downloadDocument/devOokQZnx18](elementsapp://downloadDocument/devOokQZnx18)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 24, 2025, 9:59am UTC](https://forums.realmacsoftware.com/t/making-my-own-html-audio-player/52715/5 "2025-11-24T09:59:46Z")

</div>

Nice to see you playing with custom components to get exactly what you need 🙂