3 Replies - 9012 Views - Last Post: 23 August 2010 - 11:13 PM

#1 ptamzz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 103
  • Joined: 04-March 09

Seek bar handling with javascript on HTML5 audio tag

Posted 23 August 2010 - 06:55 AM

I've the following HTML5 & javascript code

<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.com...ideo-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??

Is This A Good Question/Topic? 0
  • +

Replies To: Seek bar handling with javascript on HTML5 audio tag

#2 level1  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 65
  • Joined: 12-June 08

Re: Seek bar handling with javascript on HTML5 audio tag

Posted 23 August 2010 - 02:28 PM

I am no HTML 5 guru by any means, but from playing around ( in Safari 4 on Mac ) none of the 'on' events you wrote were working. You need to instead add an event listener like so:
audio.addEventListener('durationchange', setupSeekbar);
audio.addEventListener('timeupdate', updateUI);

After I changed your 2 'on' events to those respectively, everything worked fine for me. Hope that helps and works in other browsers.
Was This Post Helpful? 1
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Seek bar handling with javascript on HTML5 audio tag

Posted 23 August 2010 - 10:56 PM

View Postlevel1, on 23 August 2010 - 09:28 PM, said:

Hope that helps and works in other browsers.

definitely not in IE and Trident based browsers.
Was This Post Helpful? 0
  • +
  • -

#4 ptamzz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 103
  • Joined: 04-March 09

Re: Seek bar handling with javascript on HTML5 audio tag

Posted 23 August 2010 - 11:13 PM

View Postlevel1, on 23 August 2010 - 01:28 PM, said:

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


yes, it's now working fine. Thanks :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1