jQuery toggleClass example

Toggle class name on click in jQuery

by joshmoto

HTML

<div class="media">

  <audio controls>
    <source src="https://dev.joshmoto.wtf/mp3/crane-flock-aproaching.mp3" type="audio/mpeg">
  </audio>

  <div class="progress-bar">
    <div class="progress"></div>
  </div>

</div>

<div class="media">

  <audio controls>
    <source src="https://dev.joshmoto.wtf/mp3/crane-flock-aproaching.mp3" type="audio/mpeg">
  </audio>

  <div class="progress-bar">
    <div class="progress"></div>
  </div>

</div>

<div class="media">

  <audio controls>
    <source src="https://dev.joshmoto.wtf/mp3/crane-flock-aproaching.mp3" type="audio/mpeg">
  </audio>

  <div class="progress-bar">
    <div class="progress"></div>
  </div>

</div>

CSS

HTML {
  height: 100%;
  min-height: 100%;
}

BODY {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  height: 100%;
}

.media {
  margin: 0 0 45px 0;
}

.media AUDIO {
  width: 100%;
  padding: 0;
  margin: 0 0 15px 0;
}

.media .progress-bar {
  position: relative;
  height: 15px;
  border-radius: .5rem;
  background: #fff;
}

.media .progress-bar:hover {
  cursor: pointer;
}

.media .progress-bar .progress {
  display: block;
  height: 100%;
  width: 0;
  background: #2e71ff;
  border-radius: .5rem;
}

.media .progress-bar .tooltip {
  position: absolute;
  top: calc(100% + 10px);
  width: 100%;
  transform: translateX(-50%);
  text-align: center;
}

.media .progress-bar .tooltip > SPAN {
  display: inline-block;
  color: #fff;
  padding: .25rem .5rem;
  border-radius: 5px;
  background: rgba(0,0,0,.5);
}

JavaScript

// progress data funct
function progress_data(e, elem, aud) {

  // our progress data obj
  let data = {};

  // get our data obj values
  data.posX = e.pageX - $(elem).offset().left;
  data.progressBarWidth = $(elem).outerWidth();
  data.percentage = parseFloat((data.posX / data.progressBarWidth) * 100);
  data.newTime = data.percentage / 100 * aud.duration;

  // return the data obj   
  return data;

}

// window on load
$(window).on('load', function(e) {

  // each media item
  $('.media').each(function(i, media) {

    // once audio loaded get the audio object
    let aud = $('audio', media)[0];
    let progressBar = $('.progress-bar', media);
    
    // on prorgess bar wrapper click
    $(progressBar, media).on('click', function(e) {

        // get progress data
        let data = progress_data(e, this, aud);

        // set the audio current time to progress position
        aud.currentTime = data.newTime;

        // update the progress bar width
        $('.progress', this).css('width', data.percentage + '%');

      })

      // on mouse enters and moves within progress bar
      .on('mouseenter mousemove', progressBar, function(e) {

        // get progress data
        let data = progress_data(e, this, aud);

        // tool tip val
        let tooltip = (Math.round(data.percentage * 10) / 10) + '% / ' + (Math.round(data.newTime * 10) / 10) + 's';

        // do we already have a tooltip
        let hasTooltip = $(this).has('.tooltip').length;

        // if we have tooltip
        if (hasTooltip) {

          // update tooltip text and left position
          $('.tooltip', this).css('left', data.posX + 'px').find('SPAN').html(tooltip);

        } else {

          // append new tool tip and left position
          $(this).append('<div class="tooltip" style="left:' + data.posX + 'px;"><span>' + tooltip + '</span></div>');

        }

      })

      // when mouse leaves current progress bar
      .on('mouseleave', progressBar, function(e) {

       ...