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 ()функция