Trying to Javascript an Audio Player

Elements Component Development
1

Not sure when elements is getting theirs…

Got 70 recordings at WindyTown.com

Chat GPT says:

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

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

<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
IMG_53251320×2868 303 KB

2

Copy and pasted code :technologist: lol made the player in my post!!! So I guess it would work…

3

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