我重新创建了正在处理的类似代码的fiddle。问题是我无法更改音频位置。例如,如果音频在第二秒播放,而我想跳过曲目的一部分并移至结尾,则它不会改变。
在小提琴中,进度条会更改,但音频会继续不变。在我的测试环境中,单击时进度条会发生变化,然后立即回到播放音频的正确位置,这里的音频也将继续不变。
如何更改点击时音频的进度?
这是我的代码:
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>
您缺少两件事-一个监听器,使用音频轨道的进度更新进度条,以及一个根据您单击进度条来更新音频轨道currentTime的功能。已经有很多关于此的帖子,请先搜索!
Audio Progress Bar html5 with interaction
Custom progress bar for <audio> and <progress> HTML5 elements