Html5 音频 "preload="none" 搞砸了 pause() 和 currentTime()答案

【问题标题】：Html5 audio "preload="none" messes up pause() and currentTime()Html5 音频 "preload="none" 搞砸了 pause() 和 currentTime()
【发布时间】：2013-03-27 07:12:08
【问题描述】：

我在暂停和重置 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 挂起），但让我的脚本工作？

紧急~谢谢！

【问题讨论】：

这也很重要，因为所有 iOS 设备都强制执行 preload="none" 选项，以免带宽过载。只有诸如触摸事件之类的用户输入才能触发音频或视频的加载。这意味着这个问题也会导致 iPhone、iPad 甚至 iWatch 崩溃！

标签： google-chrome audio freeze preload

【解决方案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');
});

【讨论】：