JSFiddle - React, Tailwind, and code Playground

by AlexP11223

HTML

<ol class="playlist">
  <li data-src="https://www.kozco.com/tech/piano2-CoolEdit.mp3" data-name="Aerosmith - Walk This Way">Aerosmith</li>
  <li data-src="https://www.kozco.com/tech/organfinale.mp3" data-name="Animals - House of the Rising Sun">Animals</li>
  <li data-src="source/audio/Bravo.mp3" data-name="Bravo">Bravo</li>
</ol>

<audio autoplay></audio>

<marquee>Сейчас ничего не играет</marquee>

<script>
  const statusBar = document.querySelector('marquee')

  const audio = document.querySelector('audio')

  const songElements = document.querySelectorAll('.playlist li')
  songElements.forEach(el => {
    el.addEventListener('click', () => {
      const src = el.dataset.src
      const name = el.dataset.name

      statusBar.innerHTML = `Сейчас играет ${name}`

      audio.src = src
    })
  })
</script>