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

或许我只是有点太傻!!洛尔

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

1 个答案: