Google chrome Html5音频“；预加载=“预加载”；无”；将暂停（）和当前时间（）弄乱

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

如果我设置preload=“none”，那么“pause（）；”和“currentTime=0；”将不会执行。当我删除preload=“none”时，一切正常

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

$('.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>

$（'.link'）。在（'click'，函数（e）上{
$（'.pagecontainer>div'）.fadeOut（）；
$（this.getAttribute（“href”））.fadeIn（）；
停止音频（）；
});
函数stopAudio（）{//淡出并停止任何当前音频
$（'audio'）.animate（{volume:0}，1000）；
setTimeout（函数（）{
$。每个（$（'audio'），函数（）{
这个.currentTime=0；
这个。暂停（）；
警报（“音频已停止并重置”）；
});
},1000)
}
$（'.sound'）。在（'play'，函数（）{//上，由于音量已淡出，请在单击“播放”按钮时重置音量
$（'audio'）。制作动画（{volume:1}，100）；
});
....
....
//所有三个音频元素都位于完全相同的位置
//单击页面链接在当前音频中淡出，在新音频中淡出

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

如前所述，如果我删除preload=“none”，则会触发警报（“音频已停止并重置”），一切正常

有人知道我如何才能在需要时加载音频（如果我取出preload=“none”），那么我的网站将无法在Chrome中工作，大约20个音乐文件将尝试同时加载，导致Chrome挂起），但让我的脚本工作

---

~z~谢谢

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

$("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');
});

---

这一点也很重要，因为所有iOS设备都强制执行preload=“none”选项，以避免带宽过载。只有用户输入（如触摸事件）才能触发音频或视频加载。这意味着这个问题也将使iPhone、iPad和iWatches崩溃！