Pause Hintergrund Musik auf Bildlauf

Question

Ich verwende ein HTML5-Audio-Tag, um Hintergrundmusik zu spielen, und ich möchte die Musik anhalten, wenn der Benutzer einen bestimmten Punkt scrollt, und starten Sie erneut, wenn der Benutzer zurück nach oben scrollt ... Ist das möglich?

Vielen Dank im Voraus!

Answer 1

Das folgende Beispiel (plain javascript, no jQuery) unterbricht die Audiodatei, wenn Sie die Bildlaufleiste 350px nach unten scrollen (und sie erneut abspielen, wenn Sie an die Spitze zurückkehren);

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

Sie zum scroll Ereignis an das Fenster binden kann und eine foreach für $('video') auslösen und pause Methode aufrufen, wenn die Grenze und play wenn Offset 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()}); 
})