Javascript Input RangeSlaider更新进度持续触发Howler js seek（）上的输入事件

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

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

我的音频使用Howler.js，输入范围滑块使用rangeslider.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（）函数

最好用完整的代码或可玩的播放器更新问题