使用百分比值更新进度条？

Question

我创建了一个响应式的自定义播放器。到目前为止，一切正常，除了我似乎无法在用户单击进度条的位置播放音频。我看到的所有教程都使用像素值，而我的播放器使用百分比，所以当我设置 barSize = 100 + '%'; 时，它会破坏代码并且我收到一条错误消息，提示“无法在 HTMLMediaElement 上设置 currentTime 属性：提供的双精度值是无限的”。

HTML

<!-- PROGRESS BAR -->
<div id="progress_bar">
    <div id="bar"></div>
</div>

JS 代码（用于进度条）

// PROGRESS BAR

// audio display
var progress = document.getElementById('bar');
//click area
var audioBar = document.getElementById('progress_bar');
var barSize = 100 + '%';

audio.addEventListener('timeupdate', updateProgress, false);


function updateProgress() {
    if (audio.currentTime > 0) {
        var value = 0;
        value = Math.floor((100 / audio.duration) * audio.currentTime);

        progress.style.width = value + '%';
    }       
    else{
        $('#play').html('<img src="img/play.png" width="70" height="70" />');

        $(curTimeDisplay).html('0:00');

        progress.style.width = 0;
    }

}

// CHANGING TIME ON PROGRESS BAR

$('#progress_bar').bind('click', function (e) {
    var $div = $(e.target);
    var $display = $div.find('#progress_bar');

    var offset = $div.offset();
    var x = e.clientX - offset.left;

    //$('#bar').width(x);

    var newtime = x*audio.duration/barSize;

    audio.currentTime = newtime;

    progress.style.width = x + '%';
});

CSS

#progress_bar {
border:1px solid #500012;
margin:1em 0;
cursor:pointer;
background:#f2f2f2;
width:100%;
height:20px;
display:inline-block;
padding:0;
}

#bar {
background:#77001A;
height:20px;
display:inline-block;
float:left;
width:0%;
}

任何帮助表示赞赏:) 谢谢！

Answer 1

线索在错误信息中。它需要一个双精度值，并且您的 barSize var 在您初始化它时被计算为一个字符串。当您将 + '%' 添加到任何数字时会发生这种情况 - javascript 会将其从数字更改为字符串值。对字符串进行数学运算会给你'NaN'。

但在这种情况下，您希望媒体与点击发生的位置成比例，因此将 barSize 替换为总条形区域的像素宽度。 $('#progress_bar').width() 应该给你你需要的东西。您可能希望像这样移动表达式的操作数...

替换

var newtime = x*audio.duration/barSize;

有

var newtime = (x / $('#progress_bar').width()) * audio.duration;

了解浏览器中的控制台和调试工具。添加断点和监视对于像这样的代码非常有用。