HTML5 индикатор прогресса на аудио - как изменить положение аудио при клике? - PullRequest
Новая
       13

HTML5 индикатор прогресса на аудио - как изменить положение аудио при клике?

0 голосов
/ 25 февраля 2020

Я воссоздал скрипку аналогичного кода, над которым я работаю. Проблема в том, что я не могу изменить положение звука. Например, если звук воспроизводится до 5 секунд, и я хочу пропустить часть дорожки и go до конца, она не изменится.

В скрипте индикатор выполнения изменяется , но аудио продолжается без изменений. В моей тестовой среде индикатор выполнения изменяется по щелчку, а затем сразу возвращается в правильное положение, в котором воспроизводится звук, а также здесь звук продолжается без изменений.

Что можно сделать, чтобы изменить ход выполнения аудио на клик?

Вот мой код: 

const audio = $('audio')[0];

const progressBar = document.getElementById('progressbar');
function updateProgressBar() {
  const percentage = Math.floor((100 / audio.duration) * audio.currentTime);
  progressBar.value = percentage;
  progressBar.innerHTML = percentage + '% played';
}

$("#progressbar").on("click", function(e) {
  var max = $(this).width(); //Get width element
  var pos = e.pageX - $(this).offset().left; //Position cursor
  var dual = Math.round(pos / max * 100); // Round %
  if (dual > 100) {
    var dual = 100;
  }
  $(this).val(dual);
  progressBar.value = dual
});
<audio src="https://file-examples.com/wp-content/uploads/2017/11/file_example_WAV_10MG.wav"> </audio>
<progress id="progressbar" class="progress_controls" max="100" value="0"></progress>

<div id="play">
PLAY
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

1 Ответ

0 голосов
/ 25 февраля 2020

Вам не хватает двух вещей - слушателя, который обновляет индикатор выполнения с помощью прогресса звуковой дорожки, и функцию обновления звуковой дорожки currentTime в соответствии с вашим щелчком на индикаторе выполнения. На SO уже есть множество сообщений по этому поводу, пожалуйста, сначала выполните поиск!

Аудио индикатор выполнения html5 с взаимодействием

Пользовательский индикатор выполнения для и HTML5 элементы

...