Ход обновления обновления Rangeslider продолжает вызывать событие ввода на Howler js seek () - PullRequest
0 голосов
/ 01 февраля 2019

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();
 }
 };

Проблема в том, что у меня есть другая функция, которая получает текущую позициюзвук при перетаскивании ручки слайдера, (в другихords, когда 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 ()функция

...