<audio id='audio' src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'>
</audio>

<div class="audio-duration">
  <div class="audio-duration-indicator">
  </div>
  <input class="audio-duration-toggler" id="duration-toggler" type="range" value="0" />
</div>

<div class="volume">
  <div class="volume-indicator"></div>
  <input class="volume-toggler" id='volume-toggler' type="range" value="100" />
</div>

<button class="btn btn-play" id="play-btn">Play</button>
<button disabled class="btn btn-pause" id="pause-btn">Pause</button>
<button class="btn btn-mute" id="mute-btn">Mute</button>
.audio-duration {
    height: 10px;
    width: 300px;
    margin: 30px 0;
    border-radius: 10px;
    position: relative;
    box-shadow: 1px 1px 1px grey inset;
    background: rgb(214, 213, 213);
  }
  
  .audio-duration-indicator {
    border-radius: 10px;
    height: 100%;
    background-color: rgb(255, 30, 180);
    width: 0;
  }
  
  input[type=range] {
    -webkit-appearance: none;
    background: transparent;
  }
  
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    transition: transform 300ms;
  }
  
  input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
  }
  
  .audio-duration-toggler {
    width: 100%;
    position: absolute;
    height: 20px;
    top: 0;
    margin-top: -5px;
    left: 0;
  }
  
  .audio-duration-toggler::-webkit-slider-thumb {
    border: 1px solid grey;
    height: 20px;
    width: 10px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    border-radius: 30px;
    margin-left: -3px;
  }
  
  .volume {
    width: 300px;
    height: 3px;
    background-color: rgb(224, 224, 224);
    border-radius: 5px;
    margin-bottom: 20px;
    position: relative;
  }
  
  .volume-indicator {
    width: 100%;
    background-color: rgb(68, 3, 47);
    height: 100%;
  }
  
  .volume-toggler {
    position: absolute;
    top: 0;
    margin-top: -4px;
    width: 100%;
  }
  
  .volume-toggler::-webkit-slider-thumb {
    border: 1px solid rgb(224, 224, 224);
    background: white;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    cursor: pointer;
    margin-left: -3px;
  }
  
  .btn {
    border: none;
    padding: 10px;
    width: 80px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    font-weight: bold;
  }
  
  .btn:disabled {
    opacity: .4;
    cursor: not-allowed;
  }
  
  .btn-play {
    background-color: rgb(32, 189, 84);
    color: white;
  }
  
  .btn-pause {
    background-color: rgb(255, 153, 0);
    color: white;
  }
const durationIndicator = document.querySelector('.audio-duration-indicator');
const volumeIndicator = document.querySelector('.volume-indicator');
const audio = document.getElementById('audio');
const durationToggler = document.getElementById('duration-toggler');
const volumeToggler = document.getElementById('volume-toggler');
const playBtn = document.getElementById('play-btn');
const pauseBtn = document.getElementById('pause-btn');
const muteBtn = document.getElementById('mute-btn');

let duration;

audio.addEventListener('loadedmetadata', () => {
  duration = audio.duration;
})

const setCurrentTime = (currentTime) => {
  audio.currentTime = currentTime;
}

const getAudioProgress = (currentTime) => {
  const progress = currentTime / duration * 100
  durationIndicator.style.width = progress + '%';
  durationToggler.value = progress;
  return progress;
}

audio.addEventListener('timeupdate', (e) => {
  const currentTime = e.target.currentTime;
  getAudioProgress(currentTime);
});

playBtn.onclick = () => {
  playBtn.disabled = true;
  pauseBtn.disabled = false;
  audio.play();
}

pauseBtn.onclick = () => {
  pauseBtn.disabled = true;
  playBtn.disabled = false;
  audio.pause();
}

muteBtn.onclick = () => {
  if (audio.muted) {
    audio.muted = false;
    muteBtn.innerText = 'Mute';
  } else {
    audio.muted = true;
    muteBtn.innerText = 'Unmute';
  }
}

durationToggler.addEventListener('input', (e) => {
  const progress = parseInt(e.target.value);
  const time = progress / 100 * duration;
  setCurrentTime(time);
  getAudioProgress(time, duration);
})

volumeToggler.addEventListener('input', (e) => {
  const value = e.target.value;
  const volume = value / 100;
  audio.volume = volume;
  volumeIndicator.style.width = value + '%';
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.