JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div id="podcast">
  <p><b>SEZANE PARLE MOI</b></p>
  <p>Le podcast de Morgane</p>
  <p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</i></p>
  <div>
    <button class="player-btn-play"></button>
  </div>
  <div>
    <button class="player-btn-vol-down">VOL -</button>
    <a href="https://open.spotify.com/track/6wkF1G57gJyjaborSgEmEd?si=9882b443de164f5d">Lire sur Spotify</a>
    <button class="player-btn-vol-up">VOL +</button>
  </div>
  <audio src="https://file-examples.com/storage/fe8c7eef0c6364f6c9504cc/2017/11/file_example_MP3_700KB.mp3"></audio>
</div>

JavaScript

const handleAudioPlayer = (id) => {
  const el = document.getElementById(id);
  const player = el.querySelector('audio');
  const playButton = el.querySelector('.player-btn-play');
  const volDownButton = el.querySelector('.player-btn-vol-down');
  const volUpButton = el.querySelector('.player-btn-vol-up');

  // handle initial state
  if (!player.paused || player.autoplay) {
    playButton.innerHTML = 'PAUSE';
  } else {
    playButton.innerHTML = 'PLAY';
  }

  // handle play / pause button
  playButton.addEventListener('click', () => {
    if (player.paused) {
      player.play();
      playButton.innerHTML = 'PAUSE';
    } else {
      player.pause();
      playButton.innerHTML = 'PLAY';
    }
  });

  // handle volume down
  volDownButton.addEventListener('click', () => {
  	if (player.volume > 0) {
      player.volume = (Math.floor(player.volume * 100) - 10) / 100;
    }
  });

  // handle volume up
  volUpButton.addEventListener('click', () => {
    if (player.volume < 1) {
      player.volume = (Math.floor(player.volume * 100) + 10) / 100;
    }
  });
}

handleAudioPlayer('podcast');