0
section#employee-dance
で音声を有効にしたい。 ユーザーがこの要素をスクロールアウトすると、オーディオが一時停止します。スクロールイベントで音声を無効/有効にする
現在のところ、ユーザーが一番上にスクロールしたときにのみコードを適用し、音声は一時停止します。 次の要素までスクロールすると、オーディオは再生されます。
あなたはここに私のコードと例を見ることができます:素晴らしい
// Scrool div anchor
var targetOffset = $("#employee").offset().top;
$('#employee-dance').hide();
var myAudio = document.getElementById("myAudio");
var $w = $(window).scroll(function(){
if ($w.scrollTop() >= targetOffset) {
setTimeout(
function(){
$('#employee').replaceWith($('#employee-dance'));
$('#employee-dance').fadeIn(2000);
if($('#employee-dance').is(':visible')){
myAudio.play();
myAudio.volume = 0.2;
$(".music-node").css('display','block');
}
},
500
);
}
else{
myAudio.pause();
$(".music-node").css('display','none');
myAudio.volume = 0;
}
});
#top-text, #employee-dance, #down-text, #employee {
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="top-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolor aspernatur reiciendis voluptates enim natus distinctio aliquid. Aut quaerat adipisci nam numquam alias suscipit, consectetur eveniet eius culpa quia explicabo!</section>
<hr>
<section id="employee">
</section>
<section id="employee-dance">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi pariatur nulla delectus dolores. Dolores veniam rerum consequuntur, odit repellendus. Suscipit hic tempore magni ducimus cupiditate adipisci, repellat illum laboriosam eius?
<div class="raido-employee">
<audio loop id="myAudio">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
</audio>
</div>
<div class="music-node"></div>
</section>
<hr>
<section id="down-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa error, aspernatur eius labore recusandae beatae, sapiente, ad id impedit facilis qui debitis similique maxime perspiciatis atque quas dolore, nihil harum.</section>
を。ご協力いただきありがとうございます。 – vanloc