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 がハングします。 )、しかし私のスクリプトを機能させますか?
至急〜よろしくお願いします!