Question

A ：我想在音频播放时更新进度条和音频播放器的句柄。

B ：我还想将手柄拖到音频的不同位置。

我将Howler.js用于音频，并将rangelider.js用于输入范围滑块。

当前，我可以使两个功能A＆B一起工作，但不能一起工作，换句话说，如果我注释掉另一个代码块，则只能使用一个代码块。

原因：我知道这样做是因为我正在同一元素上触发事件

$("#playerRangeSlider")

我尝试过尝试在一个代码块上执行“ mousedown”事件，而在另一个代码块上进行“ input”，但是“ mousedown”无法按预期工作。

我正在使用

requestAnimationFrame(updateTimeline);

基本上会不断检查范围滑块的值，并更新手柄和进度位置。

// Update the timeline (time elapsed etc.)
 $rangeslider = $("#playerRangeSlider");
 var updateTimeline = function() {

`requestAnimationFrame(updateTimeline)`;
 if(currentAudioPlaying) {
  var sliderCurrentValue = currentAudioPlaying.seek();
   $rangeslider.val(sliderCurrentValue).change();
 }
 };

问题在于，我有另一个函数可以在拖动滑块手柄时获取音频的当前位置（换句话说，当触发on（'input'）时）：

$rangeslider.on("input", function(){
seekSong(afterPausePlaySong);
 });

function seekSong (callback) {
$songCurrentTime = $(".songSlider").val();
$newCurentTmeValue = ($songCurrentTime / $max) *    currentAudioPlaying.duration();
currentAudioPlaying.pause();
cb = callback.bind();
cb();
}

function afterPausePlaySong() {
 currentAudioPlaying.seek($newCurentTmeValue).play();
}

看起来像是来自requestAnimationFrame(updateTimeline)的恒定循环甚至使我无法拖动手柄，但仍然触发了seekSong（）函数

输入Rangeslider更新进度不断在Howler JS seek（）上触发输入事件

0 个答案: