Slider seekbar drag function for the audio player on website

Question

Yesterday, somebody very helpful converted the code for me into one that works fine but I'd like to format this code so that it has a draggable function. More specifically, I have a seekbar and to rewind a song I have to click on this seekbar and I can't drag it (you click and drag). I would like to add such a feature so that I can drag to scroll through the song. I have no idea what to do. :/ Here's code.

var audio = document.querySelectorAll('audio');
var playBtn = document.querySelectorAll('.play');
var seekBar = document.querySelectorAll('.seek-bar');
var fillBar = document.querySelectorAll('.fill');
var pointerdown = false;
var playing = undefined;

function getP(e, i) {
  var p = (e.clientX - seekBar[i].offsetLeft) / seekBar[i].clientWidth;
  p = clamp(0, p, 1);
  return p;
}

function clamp(min, val, max) {
  return Math.min(Math.max(min, val), max);
}

function updateFillBar(i, val) {
  fillBar[i].style.width = val + '%';
}

function handleTimeline(i) {
  if (pointerdown) return;
  var p = audio[i].currentTime / audio[i].duration;
  updateFillBar(i, p * 100);
}

function resetAudio(i) {
  audio[i].currentTime = 0;
  updateFillBar(i, 0);
}

function handleSeekbar(e, i) {
  pointerdown = true;
  var vidDur = audio[i].duration;
  var seekCoords = Math.round(
    (e.clientX - seekBar[i].offsetLeft) *
      (vidDur / seekBar[i].clientWidth)
  );
  handleAudioPlayback(i, seekCoords);
  var p = getP(e, i);
  updateFillBar(i, p * 100);
}

function handleButtonClick(i, time) {
  if (playing === undefined) {
    playing = i;
  }
  handleAudioPlayback(i, time);
}

function handleAudioPlayback(i, time) {
  if (playing !== i) {
    audio[playing].pause();
    playing = i;
  }
  var a = audio[i];
  if (pointerdown) {
    a.currentTime = time;
    a.play();
    pointerdown = false;
  } else if (a.paused) {
    a.play();
  } else {
    a.pause();
  }
}

audio.forEach((node, i) => {
  node.addEventListener('timeupdate', function(e) {
    handleTimeline(i);
  });
  node.addEventListener('ended', function(e) {
    resetAudio(i);
  });
  seekBar[i].addEventListener(
    'pointerdown',
    function(e) {
      handleSeekbar(e, i);
    },
    false
  );
  playBtn[i].addEventListener('click', function(e) {
    handleButtonClick(i, 0);
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #0f0f0f;
  color: #fff;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: none;
}
.audio-player {
  width: 80%;
  height: 200px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.play {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  margin-bottom: 30px;
  outline: none;
  border: none;
}
.play:focus {
  background-color: #ff0;
}
.seek-bar {
  width: 90%;
  margin: 0 auto;
  height: 4px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.fill {
  height: 4px;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
}
.handle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  background: #fff;
  transform: translate(50%, -50%) scale(0);
  transition: transform 0.2s;
}
.seek-bar:hover .handle {
  transform: translate(50%, -50%) scale(1);
}

Slider seekbar drag function for the audio player on website

Answers (1)

Related Questions