I've been struggling for this for almost years

I can even control the volume of html5 audio using input type range but I can't do the same by controlling/seeking the audio using input type range

and also I want the input type range to change its slider thumb dynamically when the music is playing depending on the current track state

so let's assume the music is 20 seconds and I will change the input range max value into 20 too

<audio id="song" src="path/to/file.mp3" type="audio/mp3">
</audio>

<input type="range" id="seekbar" min="0" max="20" step="1" value="0">

I really need your help for this guys :) It's just only seeking a track using input type range

I've been struggling for this for almost years

I can even control the volume of html5 audio using input type range but I can't do the same by controlling/seeking the audio using input type range

and also I want the input type range to change its slider thumb dynamically when the music is playing depending on the current track state

so let's assume the music is 20 seconds and I will change the input range max value into 20 too

<audio id="song" src="path/to/file.mp3" type="audio/mp3">
</audio>

<input type="range" id="seekbar" min="0" max="20" step="1" value="0">

I really need your help for this guys :) It's just only seeking a track using input type range

• javascript

• 3 I can even control the volume of html5 audio using input type range but I can't do the same by controlling/seeking the audio using input type range ???? – Vinay Commented Dec 10, 2016 at 15:38
• What I mean is I know how to code that I can control the audio's volume using input type range via onchange function and I was just asking here how to do the same function on seeking music using input type range – Jeffson Commented Dec 10, 2016 at 23:56
• So show us what code you've tried after "almost years" – j08691 Commented Dec 11, 2016 at 3:07

2 Answers 2

// Set max value when you know the duration
$audio.onloadedmetadata = () => $seekbar.max = $audio.duration
// update audio position
$seekbar.onchange = () => $audio.currentTime = $seekbar.value
// update range input when currentTime updates
$audio.ontimeupdate = () => $seekbar.value = $audio.currentTime

<input type="range" step="any" id="$seekbar" value="0">
<audio controls id="$audio"
  src="http://developer.mozilla/@api/deki/files/2926/=AudioTest_(1).ogg"/>

I see , you are not able to get continuous values when you seek the range.To get values instantly in a seeking operation you would need to listen on input event , this event fires everytime you move the range head.Perhaps you can use the same code you used for change just add it in on list

$({range-selector}).on("change input", function () {
    var vid =   $({video-selector})[0]; // get your video
    vid.volume = $(this).val(); //update its volume
});

https://jsfiddle/d39ycvu1/