поиск панели управления с JavaScript на аудио-теге HTML5 - PullRequest
Новая
       1

поиск панели управления с JavaScript на аудио-теге HTML5

7 голосов
/ 23 августа 2010

У меня есть мои коды, как показано ниже 

<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) Панель поиска не показывает никакого прогресса при воспроизведении звука, но если вы перетащите панель поиска, то currentTime действительно изменится.

Может ли кто-нибудь помочь мне изменить мой код, чтобы он функционировал должным образом?

1 Ответ

6 голосов
/ 24 августа 2010

Если вы столкнулись с той же проблемой, вот решение.(Я получил это с другого форума).Просто добавьте эти две строки: 

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

Или, может быть, я был слишком глуп!лол

...