javascript - 音量进度条，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>

标签： javascriptjqueryjquery-mobile