如何阻止进度栏出现故障？

Question

我遇到进度条后面的问题，如果单击THIS LINK并转到第二首歌曲，您会看到进度条都弄乱了。如果有人有解决方案，请帮忙！ 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

我相信这个问题在您的js/html5audio.js文件中。 timelineWidth是在DOMContentLoaded上定义的，但是在调整页面大小时永远不会重新定义-因此，只要您调整页面大小，都将遇到此问题。尝试添加此：

window.onresize = function(event) {
    timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
};