Detecting user dragging range type input

Question

I'm creating a simple HTML5 audio player. I want the user to be able to drag the seek bar slider to whatever time they want, but with the code I currently have, when the timeupdate fires, the slider goes back to the original position (+1). How can I disable the seek bar from updating while user is dragging the slider?

$("#html5audio_seek").bind("change", function() {
    html5audio.currentTime = $(this).val();
    $("#html5audio_seek").attr("max", html5audio.duration);
});
html5audio.addEventListener('timeupdate',function (){
    curtime = parseInt(html5audio.currentTime, 10);
$("#html5audio_seek").attr("value", curtime);
});

Answer 1

Modified like @Zeratops suggested in the comments, with modified code from this answer.

Added a boolean "playbool" that is true if the audio is playing (play button has been clicked) and false when the audio is paused (play button has not been clicked yet, or pause button has been clicked).

However, clicking on the seek bar (not moving the mouse at all) while audio is playing will not work.

$("#html5audio_seek").on("mouseup", function () {
    html5audio.currentTime = $("#html5audio_seek").val();
    if (playbool) {html5audio.play();}
});

$("#html5audio_seek").on("mousedown", function () {
    if (playbool) {html5audio.pause();}
});

html5audio.addEventListener('timeupdate',function (){
    curtime = parseInt(html5audio.currentTime, 10);
    $("#html5audio_seek").attr("value", curtime);
});