在滾動事件上禁用/啟用音頻

Question

我想在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> 

Answer 1

 // Scrool div anchor var danceEl = $("#employee-dance"); var danceElOffset = danceEl.offset().top; var danceElHeight = danceEl.height(); var myAudio = document.getElementById("myAudio"); var $w = $(window).scroll(function() { if ($w.scrollTop() >= danceElOffset && $w.scrollTop() <= (danceElOffset + danceElHeight)) { myAudio.play(); myAudio.volume = 0.2; } else { myAudio.pause(); myAudio.volume = 0; } }); 

 #employee, #employee-dance, #down-text { height: 700px; } #employee { background: green; } #employee-dance { background: red; } #down-text { background: orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="employee"></section> <section id="employee-dance"> <audio loop id="myAudio"> <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"> </audio> </section> <section id="down-text"></section>