JSFiddle - React, Tailwind, and code Playground

by AlexP11223

HTML

<ol class="playlist">
  <li data-src="source/audio/Aerosmith.mp3" data-name="Aerosmith - Walk This Way">Aerosmith</li>
  <li data-src="source/audio/Animals.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>
</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>