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