Search bar processing using javascript on HTML5 tag

Question

I have my codes 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 explained at http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

My problems 1) The maximum value of the search parameter is not set according to the duration of the sound. (The width of the search device is approximately half the length of the sound). 2) In the sound playback mode, no progress is displayed, but if you drag the search bar, the actual currenTime change changes.

Can someone help me modify my code so that it functions correctly?

Answer 1

If you run into the same problem, here is 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 too stupid! lol