1

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>

別のページへのリンクをクリックすると、3 つのオーディオ要素すべてを停止してリセットする必要があります。現在は停止しないため、フェードインするオーディオ要素の再生ボタンをクリックした瞬間に、2 つのオーディオが同時に再生されているように聞こえます。興味深いことに、オーディオはフェードアウトします。

前述のように、preload="none" を削除すると、アラート ('audio has been stopped and reset') が発生し、すべて正常に動作します。

必要なときにのみオーディオをロードする方法を知っている人はいますか (preload="none" を取り出した場合)、私のウェブサイトは Chrome で機能しません。約 20 の音楽ファイルがすべて同時にロードされ、Chrome がハングします。 )、しかし私のスクリプトを機能させますか?

至急〜よろしくお願いします!

4

1 に答える 1