Making my own html audio player

Elements
1

Could get any audio player to work…

Here is the code:

<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:

audio:
  stream: "/resources/songs2/00001%20Earth%20Food.mp3"
  download: "/resources/songs2/00001%20Earth%20Food.mp3"
  alt_formats: "/resources/songs2/00001%20Earth%20Food.ogg"
1 Like
2

Here is the 17 mb project:

elementsapp://downloadDocument/frVVTy5g1s9l

3

Trying this with variations:

<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>
4

reduced to simplify path and cms meta data

elementsapp://downloadDocument/devOokQZnx18

5

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