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

Question

我重新创建了一个我正在处理的类似代码的小提琴。 问题是我无法更改音频位置。 例如，如果音频在第 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>

Answer 1

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

带交互的音频进度条 html5

<audio> 和 <progress> HTML5 元素的自定义进度条

Answer 2

您需要在点击函数中添加一个 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;
});