音频上的 HTML5 进度条 - 如何在点击时更改音频位置？答案

【问题标题】：HTML5 progress bar on audio - how to change audio position on click?音频上的 HTML5 进度条 - 如何在点击时更改音频位置？
【发布时间】：2020-02-25 11:54:40
【问题描述】：

我重新创建了我正在处理的类似代码的fiddle。问题是我无法更改音频位置。例如，如果音频在第 5 秒播放，我想跳过部分曲目并走到最后，它不会改变。

在小提琴中，进度条发生了变化，但音频继续没有变化。在我的测试环境中，进度条在点击时会发生变化，然后它会立即回到音频正在播放的正确位置，并且在这里音频继续没有变化。

如何更改点击时音频的进度？

这是我的代码：

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>

【问题讨论】：

这能回答你的问题吗？ Custom progress bar for <audio> and <progress> HTML5 elements

标签： javascript jquery html5-audio

【解决方案1】：

您缺少两件事 - 一个使用音轨进度更新进度条的侦听器，以及根据您在进度条上的点击更新音轨 currentTime 的功能。 SO上已经有很多关于这个的帖子了，请先搜索！

Audio Progress Bar html5 with interaction

Custom progress bar for <audio> and <progress> HTML5 elements

【讨论】：

【解决方案2】：

您需要在 click 函数中添加一个 currentTime 事件监听器，在这里，将您的点击功能替换为：

$("#progressbar").on("click", function(e) {
var progbar = $('#progressbar');
var pos = e.pageX - progbar.offset().left; //Position cursor
var percent = pos / progbar.width(); //Get width element
audio.currentTime = percent * audio.duration;
progbar.value = percent / 100;
});

【讨论】：