Hinzufügen eines onclick-Ereignisses zur Audio-Zeitleiste mit jquery

Question

Wie würden Sie dieser Audio-Zeitleiste ein onclick-Ereignis hinzufügen, das zu der Position des Audiomaterials im Verhältnis zu der Stelle führt, an der Sie klicken.

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

Die einfachste Methode, um diezu bekommen wäre,des Klicks innerhalb der Tracking-Leiste und arbeiten Sie als Prozentsatz der Gesamtbreite aus.

Dann können Sie diesen Prozentsatz nehmen und die Dauer des Audios multiplizieren, um die currentTime Eigenschaft des Audioelements festzulegen. Etwas wie folgt aus:

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