Question

近几年来，我一直在为此奋斗

我甚至可以使用输入类型范围控制html5音频的音量，但我不能通过使用输入类型范围控制/搜索音频来做同样的事情

并且我希望输入类型范围在播放音乐时动态更改其滑块，具体取决于当前的曲目状态

所以让我们假设音乐是20秒，我也会将输入范围最大值更改为20

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

我真的需要你帮助这些家伙:) 它只是使用输入类型范围

来寻找轨道

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我知道，当您寻找范围时，您无法获得连续值。要在搜索操作中立即获取值，您需要监听input事件，每次移动范围头时此事件都会触发。也许您可以使用与更改相同的代码，只需将其添加到on列表

中即可

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

https://jsfiddle.net/d39ycvu1/

使用输入类型范围来搜索音频

2 个答案: