-1

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>
Chris Hansen
  • 7,813
  • 15
  • 81
  • 165
  • Set your progress bar max to the same as the length of the audio, then it's a direct relation between aud.currentTime and the progress bar value. – freedomn-m Oct 21 '20 at 14:18
  • The `audio` tag is missing in your HTML code. – Alessio Cantarella Oct 21 '20 at 14:19
  • I think this give you a awnser https://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element – damjuve Oct 21 '20 at 14:20
  • *"I have a custom progress bar that I created"* and *"How do I detect the position of where the person clicked in the div [progress bar?]"* - well, if you created the progress bar then you should be providing an event or know how to do this - if it was third party progress bar, then that would provide a .value or event. So it entirely depends on how you created your progress bar. – freedomn-m Oct 21 '20 at 14:20
  • Is the audio part relevant to the question? Or is it entirely about finding where you clicked on your progress bar? If so, please remove the audio parts and include how you created your "progress bar". – freedomn-m Oct 21 '20 at 14:22
  • just set `audio_element.currentTime = `, in seconds! if you need percents, just divide using `audio_element.duration` – Flash Thunder Oct 21 '20 at 15:25

1 Answers1

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>
Oussama Bouthouri
  • 615
  • 2
  • 8
  • 23