Блог

Главная - Вопросы по программированию - Где пользователь нажимает на индикатор выполнения?

Где пользователь нажимает на индикатор выполнения?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть аудиоплеер и индикатор выполнения. Я разрешаю пользователям нажимать на индикатор выполнения. Когда они нажимают на панель, она продвигает аудиоплеер. Позиция, в которой пользователь нажал на индикатор выполнения, — это место, где должен запускаться аудиоплеер. Вот мой код. Таким образом, если пользователь нажимает на позицию 80% в индикаторе выполнения, аудиоплеер должен находиться на расстоянии 20% от завершения воспроизведения песни.

   var aud = $('audio')[0];
  $('.progress-bar-wrapper').on('click', (e) => {
     var posX = e.pageX - $(this).offset().left;
     var percentage = parseInt((posX / $(this).width()) * 100);
     aud.currentTime = percentage/100 * aud.duration;
     $('.progress:eq('   index   ')').css('width', percentage   '%');
  });

К сожалению, это не точно. Когда я нажимаю на позицию 80% в индикаторе выполнения, аудиоплеер не перемещается на длительность 80%. Что мне делать?

Комментарии:

1. Получить ширину окна и ширину индикатора выполнения. Нормализуйте, и вы получите точные значения.

2. Чем это отличается от того, что я сейчас делаю @MarkusZeller?

3. Нормализации нет. Если вы принимаете ширину окна за 100%, вы можете точно сопоставить позицию x с индикатором выполнения.

Ответ №1:

Я просто запустил ваш код, не меняя слишком много, внес несколько небольших изменений, но ваша математика, похоже, хорошо работает в моей демонстрации.

Я меняю ваш процент на parseFloat вместо parseInt , что делает его более точным.

Смотрите Комментарии в коде ниже и скрипте…

https://jsfiddle.net/joshmoto/v20ndcue/

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

  // once audio loaded get the audio object
  let aud = $('audio')[0];

  // on prorgess bar wrapper click
  $(document).on('click', '.progress-bar', function(e) {
  
    // get x position in progress bar
    let posX = e.pageX - $(this).offset().left;
    let progressWidth = $(this).outerWidth();
    
    // create percentage from position etc
    let percentage = parseFloat((posX / progressWidth) * 100);
    
    // set the audio current time to progress position
    aud.currentTime = percentage / 100 * aud.duration;
    
    // update the progress bar width
    $('.progress',this).css('width', percentage   '%');

  });

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

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

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

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

.progress-bar .progress {
  display: block;
  height: 100%;
  width: 0;
  background: #2e71ff;
}  
 <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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

https://jsfiddle.net/joshmoto/0qydrf3t/

Добавлено еще несколько настроек, но немного грубых, для обработки нескольких аудиоклипов, с функцией обработки / возврата данных аудиоэлемента (глобально)…

https://jsfiddle.net/joshmoto/0qydrf3t/