# Trying to Javascript an Audio Player

**URL:** <https://forums.realmacsoftware.com/t/trying-to-javascript-an-audio-player/49508>\
**Category:** Elements API\
**Created:** [August 6, 2025, 8:50pm UTC](https://forums.realmacsoftware.com/t/trying-to-javascript-an-audio-player/49508 "2025-08-06T20:50:46Z")\
**Posts on this page:** 3\
**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:** [August 6, 2025, 8:50pm UTC](https://forums.realmacsoftware.com/t/trying-to-javascript-an-audio-player/49508/1 "2025-08-06T20:50:46Z")

</div>

Not sure when elements is getting theirs…

Got 70 recordings at [WindyTown.com](http://WindyTown.com)

Chat GPT says:

```auto
<div id="playerUI" style="text-align:center;">
  <img id="artwork" src="/resources/artwork/default.jpg" style="max-width:300px; margin-bottom:10px;" />
  <audio id="player" controls style="width:100%; max-width:600px;"></audio>
</div>

```

```auto
<ul id="playlist">
  <li data-src="/resources/audio/track1.mp3" data-img="/resources/artwork/art1.jpg">🎺 Track 1</li>
  <li data-src="/resources/audio/track2.mp3" data-img="/resources/artwork/art2.jpg">🎷 Track 2</li>
  <li data-src="/resources/audio/track3.mp3" data-img="/resources/artwork/art3.jpg">🎶 Track 3</li>
  <!-- Add all 70 here -->
</ul>

```

```auto
<script>
  const player = document.getElementById('player');
  const artwork = document.getElementById('artwork');
  const tracks = document.querySelectorAll('#playlist li');
  tracks.forEach(track => {
    track.addEventListener('click', () => {
      player.src = track.dataset.src;
      artwork.src = track.dataset.img;
      player.play();
    });
  });
</script>

```

I get a lot done while the wife is shopping - not at the computer now…

Look plausible??

 ![IMG_5325](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/5/95d0aca3eb5762ffe37c33b6198416cd3a94f357.png)

---

<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:** [August 6, 2025, 8:53pm UTC](https://forums.realmacsoftware.com/t/trying-to-javascript-an-audio-player/49508/2 "2025-08-06T20:53:12Z")

</div>

Copy and pasted code 🧑‍💻 lol made the player in my post!!! So I guess it would work…

---

<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:** [August 7, 2025, 9:40am UTC](https://forums.realmacsoftware.com/t/trying-to-javascript-an-audio-player/49508/3 "2025-08-07T09:40:34Z")

</div>

I think @upssjw made an audio player in Elements, I’m sure he’d be able to help you get this up and running 🙂