JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<audio class="wp-audio-shortcode" id="audio-123588-1" preload="none" style="width: 100%;" controls="controls"><source type="audio/mpeg" src="https://www.regnumchristi.com/en/wp-content/uploads/2024-01-14_mixdown.mp3?_=1"><a href="https://www.regnumchristi.com/en/wp-content/uploads/2024-01-14_mixdown.mp3">https://www.regnumchristi.com/en/wp-content/uploads/2024-01-14_mixdown.mp3</a></audio>
<div id="customAudioPlayer">
  <button id="playButton" title="Play/Pause"><img src="https://catholicmeditation.com/wp-content/uploads/2024/01/play.png" id="playOn" style="display: block"><img src="https://catholicmeditation.com/wp-content/uploads/2024/01/pause.png" id="pauseOn" style="display: none"></button>
 <input id="audioSlider" type="range" min="0" value="0" step="any">
  <input id="volumeSlider" type="range" min="0" max="1" step="0.01" value="1">
  <span id="audioTime">00:00/00:00</span>
 
  
</div>

CSS

.wp-audio-shortcode {
  display: none;
}
#customAudioPlayer {
  background: orange;
  border-radius: 7px;
  text-align: center;
}
#audioSlider {
    appearance: none;
    width: 40%;
    height: 15px;
    background: #ddd;
    border-radius: 5px;
}

#audioSlider::-webkit-slider-thumb {
  appearance: none; /* remove default styles */
  width: 10px;
  height: 30px;
  background: #cc0000; /* increase size and change color */
  cursor: pointer;
  border-radius:3px;
}
#audioTime {
  color: #fff;
}

#audioSlider::-moz-range-thumb {
  width: 10px;
  height: 16.18px;
  background: #00CC00; /* increase size and change color */
  cursor: pointer;
}
#volumeSlider {
  width: 10%;
}
#playButton {
  background: transparent;
  border: none;
  transform: scaleY(.8);
  cursor: pointer;
}

JavaScript

// Get elements
  var audioPlayer = document.querySelector('#audio-123588-1');
  var playButton = document.querySelector('#playButton');
  var playOn = document.querySelector('#playOn');
  var pauseOn = document.querySelector('#pauseOn');
  var audioSlider = document.querySelector('#audioSlider');
  var audioTime = document.querySelector('#audioTime');
  var volumeSlider = document.querySelector('#volumeSlider');

  // Update the max value of the slider when audio metadata is loaded
  audioPlayer.addEventListener('loadedmetadata', function() {
    audioSlider.max = audioPlayer.duration;
    audioTime.textContent = formatTime(0) + ' / ' + formatTime(audioPlayer.duration);
  });

  // Update the position of the slider as the audio plays
  audioPlayer.addEventListener('timeupdate', function() {
    audioSlider.value = audioPlayer.currentTime;
    audioTime.textContent = formatTime(audioPlayer.currentTime) + ' / ' + formatTime(audioPlayer.duration);

    // Also update the play button symbol
function playButton() {
    if (playOn.style.display === 'block') {
        playOn.style.display = 'block';
        pauseOn.style.display = 'none';
    } else {
        playOn.style.display = 'none';
        pauseOn.style.display = 'block';
    }
}
  });

  // Seek the audio when the slider is moved
  audioSlider.addEventListener('input', function() {
    audioPlayer.currentTime = audioSlider.value;
  });

  // Play or pause the audio when the button is clicked
  playButton.addEventListener('click', function() {
    if (audioPlayer.paused) {
      audioPlayer.play();
    } else {
      audioPlayer.pause();
    }
  });

  // Adjust volume when the volume slider is moved
  volumeSlider.addEventListener('input', function() {
    audioPlayer.volume = volumeSlider.value;
  });

  // Helper function to format a time in seconds as "mm:ss"
  function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    var seconds = Math.floor(seconds - minutes * 60);
    return...