Объем ProgressBar, OffsetX не определен

Question

Я создал аудиоплеер в javascript / jquery.Настольная версия работает хорошо, но на мобильных телефонах я не могу использовать индикатор прогресса громкости.

Сначала у меня были те же проблемы с кнопкой воспроизведения / паузы, но теперь это исправлено.

Я обнаружил, что offsetX, похоже, не работает с мобильными устройствами.

Я пробовал pageX и clientX, но не исправил это.

Я абсолютный новичок сjavascript, поэтому я надеюсь, что кто-то может помочь.

function updateVolumeProgressBar(audio) {
    let volume = audio.volume * 100;
    $(".volumeBar .progress").css("width", volume + "%");
}
this.audio.addEventListener("volumechange", function() {
        updateVolumeProgressBar(this);
    });

$(".volumeBar .progressBar").on("mousedown touchstart", function() {
            mouseDown = true;
          console.log("test4");
        });

        $(".volumeBar .progressBar").on("mousemove", function(e) {
            if(mouseDown === true) {
                let percentage = e.offsetX / $(this).width();
            console.log(e.offsetX);
                if(percentage >= 0 && percentage <= 1) {
                    audioElement.audio.volume = percentage;
                }
            }
        });
$(".volumeBar .progressBar").on("mouseup", function(e) {
            let percentage = e.offsetX / $(this).width();
            if(percentage >= 0 && percentage <= 1) {
                audioElement.audio.volume = percentage;
            }
        });


        $(".volumeBar .progressBar").on("touchend", function(e) {
          var orig = e.originalEvent;
            let percentage = (orig.offsetX) / $(this).width();
          console.log(orig.offsetX);
            if(percentage >= 0 && percentage <= 1) {
                audioElement.audio.volume = percentage;
            }
        });
$(document).mouseup(function() {
            mouseDown = false;
        });

        $(document).on("touchend", function() {
            mouseDown = false;
        });

ОБНОВЛЕНИЕ: Мой Javascript изменился

function initProgressBar(audio) {

    var length = audio.duration;
    var current_time = audio.currentTime;

    // calculate total length of value
    var totalLength = calculateRemainingTime();
    jQuery(".progressTime.remaining").text(totalLength);

    // calculate current value time
    var currentTime = calculateCurrentValue(current_time);
    jQuery(".progressTime.current").text(currentTime);

    var progressbar = document.getElementById('timeSeek');
    progressbar.value = (audio.currentTime / audio.duration);
    $(progressbar).on("vclick", seek);


    function seek(evt) {
        var seekto = audio.duration * (progressbar.value / 100);
        var percent = evt.offsetX / this.offsetWidth;
        audio.currentTime = percent * audio.duration;
        progressbar.value = percent / 100;
    }

}



function Audio() {

    this.currentlyPlaying;
    this.audio = document.createElement('audio');

    this.audio.addEventListener("ended", function() {
        nextSong();
    });


    this.audio.addEventListener("timeupdate", function(){
        if(this.duration) {
            initProgressBar(this);
        }
    });

    this.audio.addEventListener("volumechange", function() {
        updateVolumeProgressBar(this);
    });

    this.setTrack = function(track) {
        this.currentlyPlaying = track;
        this.audio.src = track.path;
    };

    this.play = function() {
        this.audio.play();
    };

    this.pause = function() {
        this.audio.pause();
    };

}

HTML-часть

<div class="playbackBar">

        <span class="progressTime current">0:00</span>

        <div class="progressBar">
                <div class="progressBarBg">
                        <progress id="timeSeek" value="0" max="1"></progress>
                </div>
        </div>

        <span class="progressTime remaining">0.00</span>


</div>