0

I noticed that the following code runs fine on desktop & laptops, but not on my Android mobile or other mobile devices, to change the duration of the song when user clicks on the slider:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="timeline-box">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><br>           
    </div>

    **//jQuery to detect when user changes the timeline with the seekslider
    $(document).ready(function(){
      $("#seekslider").mouseup(function(e){
                var leftOffset = e.pageX - $(this).offset().left;
                var songPercents = leftOffset / $('#seekslider').width();
                audio.currentTime = songPercents * audio.duration;
            }); 
    });**

I'd appreciate it if someone could help me solve this issue with the duration change when clicking the slider in either jQuery or Javascript.

0

You can't use mouseup on mobile. Instead use touchend. That is basically gonna be the equivalent of mouseup. Also use .on instead of the wrapper functions. By doing that you can bind multiple listeners to the same element (touchend and mouseup).

//jQuery to detect when user changes the timeline with the seekslider
$(document).ready(function(){
    $("#seekslider").on('mouseup touchend',function(e){
        var leftOffset = e.pageX - $(this).offset().left;
        var songPercents = leftOffset / $('#seekslider').width();
        audio.currentTime = songPercents * audio.duration;
     }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="timeline-box">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1"><br>           
    </div>

  • Better to listen for the single input event. – Kaiido Mar 12 at 2:41
  • I've tried the following which it's still not being detected on an Android mobile devices: //jQuery to detect when user changes the timeline with the seekslider $("#seekslider").on('touchend mouseup', function(e){ var leftOffset = e.pageX - $(this).offset().left; var songPercents = leftOffset / $('#seekslider').width(); audio.currentTime = songPercents * audio.duration; }); – Aaron Esteban Mar 12 at 3:42
0

A type=range slider has 2 events, input and change. Using mouse or touch events might be useful if you weren’t using a type=range, but you are.

$("#seekslider").on("input",function(e){
    audio.currentTime = this.value * audio.duration;
})

Use reasonable min max and step, so you don’t have to do much math.

<input id="seekslider" type="range" min="0" max="1" value="0" step=".001">
  • Hi Jake, I saw your over at the jQuery forums too. Thank you for your effort. Unfortunately it's still no success. Here's what I've tried: – Aaron Esteban Mar 12 at 16:20
  • //jQuery to detect when user changes the timeline with the seekslider $("#seekslider").on("input", function(e){ var leftOffset = e.pageX - $(this).offset().left; var songPercents = leftOffset / $('#seekslider').width(); audio.currentTime = songPercents * audio.duration; }); – Aaron Esteban Mar 12 at 16:20
  • Does home.jejaju.com/play/audo-range-slider work for you? – JakeCigar Mar 13 at 17:23
0

Actually it is A LOT EASIER to finish this function in pure Javascript. Here's what I needed to do:

<input type="range" id="audio-slider" min="0" value="0" step="1" onchange="seek()">

As shown above, I just needed to set the input to detect the "onchange" event and trigger the "seek()" function.

Here's the javascript to sync the progress bar to the currentTime:

//set the currentTime to match users click on the progress bar
    function seek(){         
        audio.currentTime = audioSlider.value;          
        play(); 
    }

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.