javascript - Jquery Clickable音频 slider ，在窗口宽度变化上搞砸了

Question

我有一个用于我正在开发的网站的自定义音频播放器。它的进度条是可点击的(即它跳到歌曲的某个部分，具体取决于点击进度条的位置。

slider 默认为 1000px，当 vw 低于 1000px 时，播放器变为 vw 的 100%。
现在这是问题开始的地方，因为随着宽度的减小，当前时间会急剧偏离所需的点(在右侧，阅读歌曲的开头)。

我在 vw 上使用该功能时尝试失败，目前完全没有想法。
这是播放器的代码，它是整个播放功能的一部分，但只有这些部分用于进度条:

   audio.ontimeupdate = function () {
          $('.progress').css("width", audio.currentTime / audio.duration * 100 + '%');
    }

        $('#slider').bind('click', function (ev) {
            var $div = $(ev.target);
            var $display = $div.find('#progcont');
            var vW = $(window).width();
            var offset = $div.offset();
            var x = ev.clientX - offset.left;

                $('.progress').css("width", x);
               if (vW > 1000){ 
                /*THIS WORKS BUT ONLY TO vW > 1000*/
            audio.currentTime = (x / 850 * audio.duration);
               } else{
            /*FAILED ATTEMPT BELOW*/
            audio.currentTime = ((x / (vW / 1.7)) * audio.duration) ;

               }
        });

真的很感谢任何帮助。

Answer 1

我通过使脚本不采用像素值，而是采用百分比来解决这个问题:

        $('#slider').bind('click', function (ev) {  

            var $div = $(ev.target);
            var $display = $div.find('#progcont');
            var vW = $(window).width();  
            var pW = $("#progcont").width();
            var offset = $div.offset();
            var x = ev.clientX - offset.left;  
            var ProcRatio = x / pW;

                   audio.currentTime = ProcRatio * audio.duration;

        });