7

私は以下のように私のコードを持っています

<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）オーディオの再生中にシークバーは進行状況を表示しませんが、シークバーをドラッグすると、currenTimeが実際に変化します。

誰かが私のコードを正しく機能するように変更するのを手伝ってもらえますか？

4

1 に答える 1

7

同じ問題に巻き込まれた場合の解決策は次のとおりです。（別のフォーラムから入手しました）。次の2行を追加するだけです。

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

あるいは、ちょっとバカすぎたのかも！笑

于 2010-08-24T06:17:06.263 に答える