javascript - Use input type range to seek audio - Stack Overflow

admin管理员组

文章数量:1401849

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

Share Improve this question Follow asked Dec 10, 2016 at 13:39 JeffsonJeffson 5922 silver badges88 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

本文标签： javascriptUse input type range to seek audioStack Overflow