I have an audio player with a progress bar, and when I scrub the progress bar it doesn't work properly when source maps are enable on Chrome. If you drag the mouse moderately fast, the progress bar resets to zero until the mouse slows down or stops. It drags smoothly when source maps are disabled.
Any ideas how to fix this? Why does it only happen when source maps are enabled? Alternatively, is there a way to disable source maps in javascript, not the browser? I did see this this post, but I can't get that to work.
seekbars = document.querySelectorAll('.seekbar');
seekbars.forEach(function (seekbar) {
var index = seekbar.id.replace('seekbar','');
let mousedown = false;
let dragging = false;
seekbar.addEventListener('mousedown', function() {
mousedown = true;
//ensure only one audio player is playing at a time
if (current_player != index) {
turnOff(current_player);
togglePlay(index);
}
current_player = index;
});
document.addEventListener('mouseup', function() {
mousedown = false;
if (dragging) {
turnOn(index);
dragging = false;
}
});
document.addEventListener('mousemove', function(event) {
if (mousedown) {
dragging = true;
mouseX = event.pageX;
tempOff(index); //this is basically turnOff(index)
seekPos(mouseX,seekbar, index);
}
});
});
function seekPos(mouseX, seekbar, index) {
var player = document.querySelector("#player"+index);
var mouseXRelative = mouseX - $('#seekbar'+ index + ' .value').offset().left;
var percent = mouseXRelative / seekbar.offsetWidth;
player.currentTime = percent * player.duration;
$('#seekbar'+ index + ' .value').css("width", percent+"%");
}