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

Posted 2023-02-25

【中文标题】使用 jquery 将 onclick 事件添加到音频时间线

【英文标题】：add a onclick event to audio timeline with jquery

【发布时间】：2016-07-11 21:00:22

【问题描述】：

您将如何将 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;
    

【参考方案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

【讨论】：

谢谢罗里！这是一个超级简单高效的例子！