google-chrome - HTML5音频 “preload=” none“弄乱了pause()和currentTime()

Question

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

如果我设置preload =“none”，则为“pause();”和“currentTime = 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挂起)，但可以使我的脚本正常工作吗？

紧急〜谢谢!

Answer 1

在尚未加载的音频标签上设置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');
});