0

私のページには html5 オーディオ プレーヤーの複数のインスタンスがあり、再生する曲を決定するために jQuery fadeIn() fadeOut() を使用しています。別のページへのリンクをクリックすると、現在再生中のサウンドがフェードアウトし、停止し、進行状況を 0 秒にリセットすると、ページが (オーディオ プレーヤーと共に) フェードアウトし、新しいページがフェードインします。音量をフェードアウトできますが、何らかの理由でタイマーを 0 秒にリセットできません。

<script>
$('.link').on('click', function(e){
    $('audio').currentTime = 0; /*reset timer*/
    displayNone();   /*fade out current page*/
    $(this.getAttribute("href")).fadeIn();  /*fade in target page*/
    stopAudio();
});

function displayNone() {
    $('.pagecontainer>div').fadeOut();
}

function stopAudio() { //fade out any current audio
    $('audio').animate({volume: 0}, 1000);
    setTimeout(function(){('audio').pause()},1000) /*stop audio after fading out volume*/
}

$('.sound').on('play', function () {
    $('audio').animate({volume: 1}, 100);  /*reset volume to 100% after clicking play button on player*/
});

</script>
....
....

<a href="page1" class="link">page 1</a>
<a href="page2" class="link">page 2</a>
<a href="page3" class="link">page 3</a>

<div class="pagecontainer">

    <div id="page1">
        <audio controls class="sound">
            <source src="music1.mp3"/>
            <source src="music1.ogg"/>
        </audio>
    </div>

    <div id="page2">
        <audio controls class="sound">
            <source src="music2.mp3"/>
            <source src="music2.ogg"/>
        </audio>
    </div>

    <div id="page3">
        <audio controls class="sound">
            <source src="music3.mp3"/>
            <source src="music3.ogg"/>
        </audio>
    </div>

</div>

例えば：

  • 現在、ページ 1 にいて、music1.mp3 を 10 秒間再生しています

  • music1.mp3 を停止せずに page2 へのリンクをクリックすると、music1.mp3 の音量が page1 と共にフェードアウトし、page2 が music2.mp3 の音楽プレーヤーと共に正常にフェードインします。

  • 10秒後、ページ1のリンクをクリックしてページ1に戻ります

  • music1.mp3 のプレーヤーはまだ再生中で (進行状況は 20 秒)、停止していませんが、ボリュームはゼロになっています。

music1.mp3 がタイマーを 0 秒にリセットせず、完全に停止しない理由がわかりません。

ありがとう！

4

1 に答える 1

0

おそらく.currentTimejQueryメソッドではないためです。のようなものを試してください$('audio')[0].currentTime。

編集：

$('audio').each(function() {
    $(this).currentTime = 0;
});
于 2013-03-05T01:43:48.293 に答える