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

<audio id="myAudio" src="audio.mp3"></audio>

<input type="range" id="progressBar" min="0" max="100" step="1" value="0">

var audio = document.getElementById("myAudio");
var progressBar = document.getElementById("progressBar");

progressBar.addEventListener("click", function(e) {
  var percent = e.offsetX / this.offsetWidth;
  audio.currentTime = percent * audio.duration;
});

audio.addEventListener("timeupdate", function() {
  var percent = (audio.currentTime / audio.duration) * 100;
  progressBar.value = percent;
});

<audio id="myAudio" src="audio.mp3"></audio>
<input type="range" id="progressBar" min="0" max="100" step="1" value="0">

<script>
  var audio = document.getElementById("myAudio");
  var progressBar = document.getElementById("progressBar");

  progressBar.addEventListener("click", function(e) {
    var percent = e.offsetX / this.offsetWidth;
    audio.currentTime = percent * audio.duration;
  });

  audio.addEventListener("timeupdate", function() {
    var percent = (audio.currentTime / audio.duration) * 100;
    progressBar.value = percent;
  });
</script>