Question

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

HTML

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

JS CODE（进度条）

// 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

线索在错误消息中。它需要一个double值，并且barSize var在初始化时计算为字符串。添加+＆＃39;％＆＃39;任何数字 - javascript会将其从数字值更改为字符串值。对字符串进行数学运算将为您提供“NaN＆＃39;。

”

但在这种情况下，您希望将媒体按比例增加到发生单击的位置，因此将barSize替换为总条形区域的像素宽度。 $（＆＃39;＃progress_bar＆＃39;）。width（）应该可以满足您的需求。您可能希望像这样移动表达式的操作数...

替换

var newtime = x*audio.duration/barSize;

使用

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

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

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

1 个答案: