How to set the position of the progress bar? - html

Question

I have an audio player on a page. I have a custom progress bar that I created. When users click on that progress bar, I want to tell the audio player to start playing at that position. How do I detect the position of where the person clicked in the div and translate that to a position to play the song?
var aud = $('audio')[0];
var index = 0;
$('.play').on('click', function() {
aud.src = $(this).attr('data-url');
index = $(this).index('.play');
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
});
aud.ontimeupdate = function() {
$('.progress-bar-wrapper').hide();
$('.progress-bar-wrapper:eq(' + index + ')').show();
$('.progress:eq(' + index + ')').css('width', aud.currentTime / aud.duration * 100 + '%')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio src="" style="display: none"></audio>
<div class="play" data-url="{{url}}"><img src="/images/play_course.png" /></div>
<div class="progress-bar-wrapper">
<div class="progress"></div>
</div>

Answer 1

You can get the position of the mouse inside the click event.
I have added two variables inside the click event with both the position of the mouse relative to the element itself and the percentage that the click position represent, use them as you see fit.
Note: I added width and height for the progress bar so I can test your code so keep in mind that the progress wrapper needs to be visible and have a width value.
var aud = $('audio')[0];
var index = 0;
$('.play').on('click', function() {
aud.src = $(this).attr('data-url');
index = $(this).index('.play');
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
});
$(".progress-bar-wrapper").on("click", function (e) {
var posX = e.pageX - $(this).offset().left;
var percentage = parseInt((posX / $(this).width()) * 100);
});
aud.ontimeupdate = function() {
$('.progress-bar-wrapper').hide();
$('.progress-bar-wrapper:eq(' + index + ')').show();
$('.progress:eq(' + index + ')').css('width', aud.currentTime / aud.duration * 100 + '%')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio src="" style="display: none"></audio>
<div class="play" data-url="{{url}}"><img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/play-button-1516951-1285078.png" /></div>
<div class="progress-bar-wrapper">
<div class="progress"></div>
</div>