Audio Scrubber遵循时间表

Question

我创建了一个音频播放器，我希望擦除器（而不是圆圈）成为一个跟随的栏，并用不同的颜色填充一首歌的播放部分。话虽如此，我认为我可以简单地设置栏100%并给它一个负left值，但事实并非如此。出于某种原因，我不能让它跟随距离并填补它背后的空间。

以下是我正在使用的<audio>标记：

<div class="scrub">
  <audio id="music" preload="true">
  <source src="http://www.alexkatz.me/codepen/music/interlude.mp3">
            <source src="http://www.alexkatz.me/codepen/music/interlude.ogg">
    </audio>
<div id="audioplayer">

  <div id="timeline">    
          <div id="playhead"></div>
  </div>
</div>

  </div>

  <div class="controls">
    <div id="pButton" class="play" onclick="play()"></div>
</div>

和我用来查找音频文件宽度/长度的JS：

// Moves playhead as user drags
function moveplayhead(e) {
    var newMargLeft = e.pageX - timeline.offsetLeft;
    if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
        playhead.style.marginLeft = "-" + 300 + "px";
    }
    if (newMargLeft < 0) {
        playhead.style.marginLeft = "0px";
    }
    if (newMargLeft > timelineWidth) {
        playhead.style.marginLeft = timelineWidth + "px";
    }
}

// timeUpdate 
// Synchronizes playhead position with current point in audio 
function timeUpdate() {
    var playPercent =  timelineWidth * (music.currentTime / duration);
    playhead.style.marginLeft = playPercent + "px";
    if (music.currentTime == duration) {
        pButton.className = "";
        pButton.className = "play";
    }
}

我使用此 tutorial 作为基础起点。

我目前拥有的代码可以找到 here 。

感谢您的帮助！