html - HTML5 seekBar が値を更新してもクリック後に更新されない

Question

クリックした後に seekBar が更新されない理由を探していましたが、これまでのところ運がありません。Firefox は HTML5 オーディオ タグをネイティブにサポートしていないため、Chrome でこれを行ってきました。

基本的に私が持っているものは次のとおりです。

<script>
  var seekBar;
  var player;
  function initPlayer(){
    seekBar = document.getElementById('seekBar');
    player = document.getElementById('playcontrol');
    seekBar.setAttribute('max', player.duration);
    player.addEventListener('timeupdate', function(){
      seekBar.setAttribute('value', player.currentTime);
    });
  }
</script>
...
<audio id="playcontrol" src="Song.mp3" preload="auto"></audio>
<input id="seekBar" type="range" step="any" onchange="player.currentTime = this.value" min="0" max="10" value="0">

ページの読み込み後に initPlayer() を実行し、「player.play();」を実行します。コンソールでオーディオを開始します。seekBar 内の位置を手動でクリックするまで、これはすべてうまく機能します。

すると、オーディオの一部にジャンプしますが、value 属性が更新され続けても、視覚的なバーの位置は変わりません。

クリックした後、視覚的な位置が静的なのはなぜですか? これを修正するためのハックや回避策はありますか?