Arka plan müziği üzerinde kaydırma yapmak için kaydırma

Question

Arka plan müziği çalmak için bir HTML5 ses etiketi kullanıyorum ve kullanıcı belirli bir noktadan geçtiğinde müziğin duraklamasını istiyorum ve kullanıcı tekrar yukarı kaydırdığında tekrar başla ... Mümkün mü?

Şimdiden teşekkürler!

Answer 1

Aşağıdaki örnekte (düz javascript, jQuery yok), kaydırma çubuğunu 350px aşağı kaydırırsanız sesi duraklatır (ve yeniden başa döndüğünüzde tekrar çalar);

window.addEventListener("scroll", myFunction); 
 

 
function myFunction() { 
 
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) { 
 
     document.getElementById("player").pause(); 
 
    } else { 
 
     document.getElementById("player").play(); 
 
    } 
 
}

body { 
 
    background: tomato; 
 
}

<audio controls autoplay loop id=player> 
 
    <source src="http://www.youtube.com/audiolibrary_download?vid=7fad087239069cd4" type="audio/mpeg"> 
 
</audio> 
 
<p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p>

Answer 2

Eğer pencereye scroll olaya bağlamak ve $('video') için foreach tetikleyip sınırı ve play zaman dengelemek için zaman pause yöntemi çağırmak olduğunu edebilir 0

$(window).on('scroll',function(e){ 
    if (document.body.scrollTop === 0) $('video').forEach(function(){this.play()}); 
    if (document.body.scrollTop > 100) $('video').forEach(function(){this.pause()}); 
})