Search jQuery

jQuery Forum

jQuery Audio Time Duration Change on Slider Click

in Using jQuery • 2 years ago

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.

Replies(8)

jakecigar

Re: jQuery Audio Time Duration Change on Slider Click

2 years ago

Simple answer is to use the input event. This is a more complete demo that works on IOS, and probably an Android.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width">
<title>Audio Range Slider</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
audio{width:100%;}
#seekslider{
width:50%;
transform: scale(2);
transform-origin: left center;
display:block;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
$(function(){
var audio=$("audio").on("timeupdate",function(e){
$("#seekslider").val(audio.currentTime/audio.duration)
})[0];
$("#seekslider").on("input",function(e){
audio.currentTime = this.value * audio.duration;
})
$("button").click(function(){
if (audio.paused)
audio.play();
else
audio.pause();
})
})
</script>
</head>
<body>
<div id="timeline-box">
<audio src="Watching.mp3"></audio>
<button>Play/Pause</button>
<input id="seekslider" type="range" min="0" max="1" value="0" step=".001">
</div>
</body>
</html>

JΛ̊KE

Aaron Est..

Re: Re: jQuery Audio Time Duration Change on Slider Click

2 years ago

Hi Jake,

I was told the following on StackOverflow:

I 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).

Then I was given the following code to try in which it didn't work either:

//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>

Then one other guy said to use "input" too, but I wasn't sure how to implement it into the code that I have above. Sorry, but I lack the experience in both JS & jQuery.

jakecigar

Re: Re: jQuery Audio Time Duration Change on Slider Click

2 years ago

I updated that last answer with the entire page source of my working demo.

JΛ̊KE

jakecigar

Re: jQuery Audio Time Duration Change on Slider Click

2 years ago

But I am sure. And I’ve done many audio sites. Using mouseup, touchend and just about any other event with a type=range is just wrong. It has to be the input or change event.

Try my code on your android phone.

JΛ̊KE

Aaron Est..

Re: Re: jQuery Audio Time Duration Change on Slider Click

2 years ago

Hi Jake,

Maybe it's not working because I'm not initializing audio from the audio tag like you are. Here's how I'm playing my songs from a list:

var audio = new Audio();
var beat, title, seekslider, seeking, seekto, curtimetext, durtimetext;
function initSettings(){
var img = document.getElementsByClassName("item")[0].getAttribute("cover");
var theTitle = document.getElementsByClassName("item")[0].getAttribute("title");
document.getElementById("title").innerHTML = theTitle;
document.getElementById("cover").src = img;
document.getElementById("title").src = title;
}
window.onload = initSettings();
function play(myBeat){
beat = myBeat.getAttribute("song");
title = myBeat.getAttribute("title");
var cover = myBeat.getAttribute("cover");
document.getElementById("title").innerHTML = '<marquee scrollamount="12">' + title + '</marquee>';
document.getElementById("cover").src = cover;
audio.src = beat;
audio.play();
}

I know my javascript is a little sloppy, but I'm new to this lol.

I'm only using a little jQuery to do some touchup and to simplify the slider controls.

Anyhow, do you think it's because of the way that I'm initializing the audio?

jakecigar

Re: jQuery Audio Time Duration Change on Slider Click

2 years ago

Since most browser won’t play audio without user interaction, and you haven’t given a full example, I will guess yes.

Adding jQuery into your program is probably not the best idea. All the events are actually native events from standard javaScript.

JΛ̊KE

Aaron Est..

Re: Re: jQuery Audio Time Duration Change on Slider Click

2 years ago

I have also tried the following (since you needed more code, should be sufficient):

function play(myBeat){
beat = myBeat.getAttribute("song");
title = myBeat.getAttribute("title");
var cover = myBeat.getAttribute("cover");
document.getElementById("title").innerHTML = '<marquee scrollamount="12">' + title + '</marquee>';
document.getElementById("cover").src = cover;
audio.src = beat;
audio.play();
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; });
audio.addEventListener("timeupdate", function(){ seektimeupdate(); });
}
function seek(event){
if(seeking){
seekslider.value = event.clientX - seekslider.offsetLeft;
seekto = audio.duration * (seekslider.value / 100);
audio.currentTime = seekto;
}
}

jakecigar

Re: jQuery Audio Time Duration Change on Slider Click

2 years ago

A "full example" is something I can run. Best would be a link, second best is a complete self contained MINIMAL HTML file.

A couple of functions off of your page don’t help much.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

jQuery Audio Time Duration Change on Slider Click

Replies(8)

Re: jQuery Audio Time Duration Change on Slider Click

Re: Re: jQuery Audio Time Duration Change on Slider Click

Re: Re: jQuery Audio Time Duration Change on Slider Click

Re: jQuery Audio Time Duration Change on Slider Click

Re: Re: jQuery Audio Time Duration Change on Slider Click

Re: jQuery Audio Time Duration Change on Slider Click

Re: Re: jQuery Audio Time Duration Change on Slider Click

Re: jQuery Audio Time Duration Change on Slider Click

Statistics

Tags

Actions