1

我在暂停和重置 html5 音频的进度时遇到了一个非常奇怪的问题。

如果我设置 preload="none"，那么 "pause();" 和“当前时间=0；” 不会执行。我删除 preload="none" 的那一刻，一切正常。

这是我的代码。我淡入/淡出几个页面，每个页面在同一位置（预期）都有一个 html 5 音频元素，因此用户可以在访问该页面时播放该页面的音乐。

$('.link').on('click', function(e){
    $('.pagecontainer>div').fadeOut();
    $(this.getAttribute("href")).fadeIn();  
    stopAudio();
});

function stopAudio() { //fade out and stop any current audio
    $('audio').animate({volume: 0}, 1000);
    setTimeout(function(){
        $.each($('audio'), function () {
            this.currentTime=0;
            this.pause();
                            alert('audio has been stopped and reset');
        });
    },1000)
}

$('.sound').on('play', function () { //since volume was faded out, reset volume when click play button
    $('audio').animate({volume: 1}, 100);
});

....
....

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

<div class="pagecontainer">

    <div id="page1"> //all three audio elements are in exact same spot
                     //clicking page link fades in current audio and fades in new one
        <audio controls loop class="sound" preload="none">
            <source src="../../site/music/music1.mp3"/>
            <source src="../../site/music/music1.ogg"/>
        </audio>
    </div>

    <div id="page2">
        <audio controls loop class="sound" preload="none">
            <source src="../../site/music/music2.mp3"/>
            <source src="../../site/music/music2.ogg"/>
        </audio>
    </div>

    <div id="page3">
        <audio controls loop class="sound" preload="none">
            <source src="../../site/music/music3.mp3"/>
            <source src="../../site/music/music3.ogg"/>
        </audio>
    </div>

</div>

当我单击另一个页面的链接时，我需要停止并重置所有三个音频元素。目前由于它没有停止，当我点击淡入音频元素的播放按钮时，我听到两个音频同时播放。虽然有趣的是，音频确实会淡出。

如前所述，如果我删除 preload="none"，则警报（'音频已停止并重置'）将触发，并且一切正常。

有谁知道我如何仅在需要时加载音频（如果我取出 preload="none"）然后我的网站将无法在 Chrome 中运行，大约 20 个音乐文件将同时尝试加载导致 Chrome 挂起)，但让我的脚本工作？

急~谢谢！

4

1 回答 1

0

在尚未加载的音频标签上设置 currentTime 会触发 DOM 异常。因此，请确保已加载音频。然后才尝试设置它的currentTime。

$("audio").one("loadeddata", function ()
{
    $(this).data("dataLoaded", true);
});


$.each($('audio'), function () {
    if($(this).data("dataLoaded"))
    {
       this.currentTime=0;
        this.pause();
    } 
    alert('audio has been stopped and reset');
});
于 2013-05-03T10:22:07.683 回答