Question

我有一个自定义音频播放器用于我正在处理的网站。它的进度条是可点击的（也就是它会跳到歌曲的某个部分，具体取决于点击编辑栏的位置。

滑块默认为1000px，当vw低于1000px时，播放器变为大众的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;

        });

Jquery Clickable音频滑块，可以改变窗口宽度

1 个答案: