在HTML5音频标签上使用javascript进行搜索栏处理

我的代码如下

<header>
    <audio src="friends_and_family_03.mp3" id="audio" controls></audio>
    <input type="range" step="any" id="seekbar"></input>
    <script>
        seekbar.value = 0;
        var audio = document.getElementById("audio");

        var seekbar = document.getElementById('seekbar');
        function setupSeekbar() {
          seekbar.min = audio.startTime;
          seekbar.max = audio.startTime + audio.duration;
        }
        audio.ondurationchange = setupSeekbar;

        function seekAudio() {
          audio.currentTime = seekbar.value;
        }

        function updateUI() {
          var lastBuffered = audio.buffered.end(audio.buffered.length-1);
          seekbar.min = audio.startTime;
          seekbar.max = lastBuffered;
          seekbar.value = audio.currentTime;
        }
        seekbar.onchange = seekAudio;
        audio.ontimeupdate = updateUI;

    </script>
    <p>
        <button type="button" onclick="audio.play();">Play</button>
        <button type="button" onclick="audio.pause();">Pause</button>
        <button type="button" onclick="audio.currentTime = 0;"><< Rewind</button>
    </p>

</header>

我的问题是
1） seekbar最大值不是根据音频持续时间设置的。（seekbar宽度仅为音频持续时间的一半左右）。
2） 当音频播放时，seekbar不会显示任何进度，但如果拖动seekbar，当前时间实际上会改变

有人能帮我修改代码，使其正常工作吗？
如果您遇到同样的问题，下面是解决方案。（我是从另一个论坛上得到的）。只需添加以下两行：

audio.addEventListener('durationchange', setupSeekbar);
audio.addEventListener('timeupdate', updateUI);

或者我只是有点太蠢了！！哈哈