如何修复我的进度条以防止出现故障？

Question

我遇到进度条滞后的问题，如果您单击 THIS LINK and go to the second song you will see that the progress bar is all messed up. If anyone has a solution please help! This is an image 了解问题所在。这也是我认为解决问题所必需的所有编码。

var timer;
var percent = 0;
var audio = document.getElementById("audioPlayer");
audio.addEventListener("playing", function(_event) {
  var duration = _event.target.duration;
  advance(duration, audio);
});
audio.addEventListener("pause", function(_event) {
  clearTimeout(timer);
});
var advance = function(duration, element) {
  var progress = document.getElementById("progress");
  increment = 10 / duration
  percent = Math.min(increment * element.currentTime * 10, 100);
  progress.style.width = percent + '%'
  startTimer(duration, element);
}
var startTimer = function(duration, element) {
  if (percent < 100) {
    timer = setTimeout(function() {
      advance(duration, element)
    }, 100);
  }
}

#timeline {
  width: 50%;
  height: 4px;
  background: rgba(0, 0, 0, .3);
  margin-top: 27px;
  float: left;
  margin-left: 10px;
  border-radius: 15px;
  background-color: blue;
}


/*Grabable Playhead*/

#playhead {
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: -10.9px;
  background: black;
}

.progress {
  height: 5px;
  background: black;
  transition: width .1s linear;
}

<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
        <source src="https://tunechestmusic.000webhostapp.com/sleepy.mp3">      
    </audio>
<div id="wrapper">
  <!--Audio Player Interface-->
  <div id="audioplayer">
    <button id="pButton" class="play"></button>
    <div id="timeline">
      <div class="progress" id="progress"></div>
      <div id="playhead"></div>
    </div>
  </div>
</div>

Answer 1

您似乎遗漏了一些使其正常工作的关键要素

首先，您的 play 按钮实际上没有任何作用。尝试添加一个事件来处理播放按钮的点击并播放音频

var playButton = document.getElementById('pButton');

playButton.addEventListener('click', e => { audio.play(); });

我看到的第二个问题是您的 audio 标签应该调用 initProgressBar 但该函数不存在。

<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">

我添加了一个占位符函数供您填写。如果您不需要此函数，请将其从HTML中删除。

function initProgressBar() {
  // TODO: What goes here?
}

添加点击事件后，点击时播放音频，进度条正确进行。但是，您的圈子不会随着进度而移动。我假设你还没有得到那部分。

var timer;
var percent = 0;
var audio = document.getElementById("audioPlayer");
var playButton = document.getElementById('pButton');

playButton.addEventListener('click', e => { audio.play(); });

function initProgressBar() {
  // TODO: What goes here?
}

audio.addEventListener("playing", function(_event) {
  var duration = _event.target.duration;
  advance(duration, audio);
});
audio.addEventListener("pause", function(_event) {
  clearTimeout(timer);
});
var advance = function(duration, element) {
  var progress = document.getElementById("progress");
  increment = 10 / duration
  percent = Math.min(increment * element.currentTime * 10, 100);
  progress.style.width = percent + '%'
  startTimer(duration, element);
}
var startTimer = function(duration, element) {
  if (percent < 100) {
    timer = setTimeout(function() {
      advance(duration, element)
    }, 100);
  }
}

#timeline {
  width: 50%;
  height: 4px;
  background: rgba(0, 0, 0, .3);
  margin-top: 27px;
  float: left;
  margin-left: 10px;
  border-radius: 15px;
  background-color: blue;
}


/*Grabable Playhead*/

#playhead {
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: -10.9px;
  background: black;
}

.progress {
  height: 5px;
  background: black;
  transition: width .1s linear;
}

<audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
        <source src="https://tunechestmusic.000webhostapp.com/sleepy.mp3">      
    </audio>
<div id="wrapper">
  <!--Audio Player Interface-->
  <div id="audioplayer">
    <button id="pButton" class="play">Play</button>
    <div id="timeline">
      <div class="progress" id="progress"></div>
      <div id="playhead"></div>
    </div>
  </div>
</div>

如何修复我的进度条以防止出现故障？

How do I fix my progress bar from glitching?

javascript

css

progress-bar

custom-controls