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

Question

我的代码如下

<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>

这在http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/中有解释.

我的问题是1)没有根据音频持续时间设置搜索栏最大值.(搜索栏宽度大约是音频持续时间的一半).2)当音频播放时,搜索栏不显示任何进度,但如果你拖动搜索条,则currenTime实际上会改变.

任何人都可以帮我修改我的代码,以便它正常运行??

Answer 1

如果你遇到同样的问题,这就是解决方案.(我是从另一个论坛得到的).只需添加以下两行:

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

或者也许我只是有点太愚蠢!大声笑