7

我的代码如下

<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）当音频播放时，搜索栏没有显示任何进度，但是如果您拖动搜索栏，则当前时间实际上会发生变化。

谁能帮我修改我的代码以使其正常运行？

4

1 回答 1

7

如果您遇到同样的问题，这就是解决方案。（我从另一个论坛得到它）。只需添加这两行：

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

或者，也许我只是有点太愚蠢了！！哈哈

于 2010-08-24T06:17:06.263 回答