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

可能是因为.currentTime不是 jQuery 方法。尝试类似的东西$('audio')[0].currentTime。

编辑：

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