The scrollbar of the audio player does not work

Question

The scrollbar of the audio player does not work

Navigation

#1 by (0 votes)

0

What am I doing wrong? It seems that the bar that controls the time of the audio does not work.

Inside the script (I initialize variable seeking=false ):

seekslider = document.getElementById("seekslider");

seekslider.addEventListener("mousedown", function(event) {
  seeking = true;
  seek(event);
});
seekslider.addEventListener("mousemove", function(event) {
  seek(event);
});
seekslider.addEventListener("mouseup", function() {
  seeking = false;
});

function seek(event) {
  if (seeking) {
    seekslider.value = event.clientX - seekslider.offsetLeft;
    var seekto = audio.duration * (seekslider.value / 100);
    audio.currentTime = seekto;
  }
}

<div align="center">
  <input id="seekslider" type="range" min="0" max="100" value="0" step="1" />
</div>

javascript

asked by Raspijabi 08.06.2017 в 19:21

source

1 answer

I do not know how to handle a "no selection" in a select javascript refresh the src of an iframe when it has an anchor

score 0 · Accepted Answer

The bar works well, you only have to define the variable seeking global, and for the example to work define the audio object

seekslider = document.getElementById("seekslider");
var audio = {
  duration: 30
};
var seeking = false;
seekslider.addEventListener("mousedown", function(event) {
  seeking = true;
  seek(event);
});
seekslider.addEventListener("mousemove", function(event) {
  seek(event);
});
seekslider.addEventListener("mouseup", function() {
  seeking = false;
});

function seek(event) {
  if (seeking) {
    seekslider.value = event.clientX - seekslider.offsetLeft;
    var seekto = audio.duration * (seekslider.value / 100);
    audio.currentTime = seekto;
    console.log(audio);
  }
}

<div align="center">
  <input id="seekslider" type="range" min="0" max="100" value="0" step="1" />
</div>