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

Question

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

jsfiddle：https://jsfiddle.net/jeffd/6bm3jcfm/1/

HTML：

<audio src="https://99centbeats.com/1e4cb5f584d055a0992385c1b2155786/44ec3770dad9ca5669c4e32439c4c9a1/sick-n-tired-w-vocals-f0fb72ae83.mp3" id="player"></audio>  
<button id="play">Play</button>
<button id="pause">Pause</button>

<div class="hp_slide">
     <div class="hp_range"></div>
</div>

jquery：

$('#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');
});

CSS

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

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

Answer 1

最简单的方法是获取跟踪栏中点击的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;
})

Working example