html - seek bar handling with javascript on HTML5 audio tag - Stack Overflow

admin管理员组

文章数量:1277875

I've my codes as below

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

This is as explained in /

My problems are 1) The seekbar max value is not set according to the audio duration. (The seekbar width is just around half the audio duration). 2) The seekbar doesnt show any progress as the audio plays on but if you drag the seekbar, the currenTime actually changes.

Can anyone help me modify my code so that it functions properly??

I've my codes as below

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

This is as explained in http://dev.opera./articles/view/everything-you-need-to-know-about-html5-video-and-audio/

My problems are 1) The seekbar max value is not set according to the audio duration. (The seekbar width is just around half the audio duration). 2) The seekbar doesnt show any progress as the audio plays on but if you drag the seekbar, the currenTime actually changes.

Can anyone help me modify my code so that it functions properly??

• javascript
• html
• html5-audio

Share Improve this question Follow edited Aug 23, 2010 at 11:53 ptamzz asked Aug 23, 2010 at 11:45 ptamzzptamzz 9,3753131 gold badges9494 silver badges151151 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

If you are caught up with the same problem, here's the solution. (I got it from another forum). Just add these two lines:

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

Or maybe I was just a little too stupid!! lol

本文标签： htmlseek bar handling with javascript on HTML5 audio tagStack Overflow