Scrolling Audio

Question

I am making a site with the skrollr plugin and I am almost done with the pictures and scrolling myself, so I am trying to add sound now, but I can not get the sound to start and stop when I want it. This is a script I'm currently working with:

<script> $(window).scroll(function() { var height = $(document).height() - $(window).height(); var scroll = $(window).scrollTop(); var audioElm = $('#soundTour').get(0); audioElm.play(); audioElm.volume = 1 - $(window).scrollTop()/height; console.log(audioElm.volume); }); </script> 

This makes my sound start as soon as the website loads and disappears throughout the website, so when you scroll to the bottom, it completely mutes. I tried messing around with the "height" variable in the script, but to no avail. The sound is always very low, but still plays poorly in the background. Is there a way to make it shut up at a certain scroll point? For example, play audio at $ (window) .scrollTop () = 500 and stop at $ (window) .scrollTop () = 3000?

Answer 1

 var playing = false; var audioElm = $('#soundTour').get(0); $(window).scroll(function() { var pageScroll = $(window).scrollTop(); if(!playing && pageScroll > 500 && pageScroll < 3000){ audioElm.play(); playing = true; }else if(pageScroll > 3000 || pageScroll < 500){ audioElm.pause(); playing = false; } }); 

You need to add some conditions. (I define variables outside of performance, since jQuery scrolling has very poor performance, which gets worse on phones).

Handle: http://codepen.io/vandervals/pen/KpWzVJ