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

最も簡単な方法は、を取得することですトラッキングバー内のクリックのを合計幅のパーセンテージとして出力します。

次に、オーディオの長さにそれを乗じて、オーディオ要素の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