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

Html5音频“preload =”none“混乱暂停（）和currentTime（）

1 个答案: