Question

我的页面上有多个html5音频播放器实例，我使用jQuery fadeIn（）fadeOut（）来确定要播放的歌曲。当点击指向其他页面的链接时，我将当前的播放声音淡出音量，然后停止，然后将进度重置为0秒，然后页面（连同音频播放器）淡出，新页面淡入.I'我可以淡出音量，但由于某种原因我无法将定时器重置为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秒
单击指向page2的链接，不停止music1.mp3，music1.mp3音量与page1一起淡出，page2与music2.mp3的音乐播放器一起成功淡出
让我们说10秒后，我点击第1页的链接返回第1页
music1.mp3的播放器仍在播放（进度为20秒）且尚未停止，但现在零音量

我不明白为什么music1.mp3没有将其计时器重置为0秒并完全停止。

谢谢！

Answer 1

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

编辑：

$('audio').each(function() {
    $(this).currentTime = 0;
});

无法停止声音和重置时间

1 个答案: