使用jquery将onclick事件添加到音频时间线

如何将onclick事件添加到此音频时间线，该时间线指向音频相对于单击位置的位置

jsfiddle：

HTML:

CSS

---

最简单的方法是获取跟踪栏中单击的

offsetX

，并将其计算为总宽度的百分比

然后，您可以将该百分比乘以音频的持续时间，以设置音频元素的

currentTime

属性。大概是这样的：

var player = document.getElementById('player');
var duration = 0;
player.addEventListener("timeupdate", function() {
    var currentTime = player.currentTime;
    duration = player.duration;
    $('.hp_range').stop(true, true).animate({
        'width': (currentTime + .25) / duration * 100 + '%'
    }, 250, 'linear');
});

$('.hp_slide').click(function(e) {
    var pc = e.offsetX / $(this).width();
    player.currentTime = duration * pc;
})

---

谢谢Rory！这是一个超级简单有效的例子！

$('#play').on('click', function() {
    document.getElementById('player').play();
});

$('#pause').on('click', function() {
    document.getElementById('player').pause();
});

var player = document.getElementById('player');    
player.addEventListener("timeupdate", function() {
    var currentTime = player.currentTime;
    var duration = player.duration;
    $('.hp_range').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});

 .hp_slide{
        width:100%;
         height:5px;
          background:red;

    }
    .hp_range{
        width:0;
        background:black;
        height:5px;
    }

var player = document.getElementById('player');
var duration = 0;
player.addEventListener("timeupdate", function() {
    var currentTime = player.currentTime;
    duration = player.duration;
    $('.hp_range').stop(true, true).animate({
        'width': (currentTime + .25) / duration * 100 + '%'
    }, 250, 'linear');
});

$('.hp_slide').click(function(e) {
    var pc = e.offsetX / $(this).width();
    player.currentTime = duration * pc;
})