barre de recherche de manutention avec javascript sur la balise audio HTML5

J'ai mes codes ci-dessous

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

C'est comme expliqué dans http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

Mes problèmes sont
1) La seekbar max valeur n'est pas définie en fonction de la durée audio. (La seekbar largeur est seulement environ la moitié de la durée audio).
2) La seekbar ne pas montrer tous les progrès que l'audio joue sur, mais si vous faites glisser la seekbar, le currenTime change réellement.

Quelqu'un peut-il m'aider à modifier mon code pour qu'il fonctionne correctement??

OriginalL'auteur ptamzz | 2010-08-23