I'm doing a website with the skrollr plugin and I'm almost done with the pictures and scrolling itself, so I'm trying to add the audio now, but I can't seem to make the audio start and stop when I want it to. This is the script I am 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 audio start as soon as the website is loaded and fade out across the span of the entire website, so when you've scrolled to the bottom, it's pletely silent. I've tried messing with the "height" variable in the script, but to no avail. The sound always ends up heavily lowered, but still faintly playing in the background. Is there a way to make it shut up at a certain scroll point? For example, make the audio play at $(window).scrollTop() = 500 and stop at $(window).scrollTop() = 3000?

I'm doing a website with the skrollr plugin and I'm almost done with the pictures and scrolling itself, so I'm trying to add the audio now, but I can't seem to make the audio start and stop when I want it to. This is the script I am 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 audio start as soon as the website is loaded and fade out across the span of the entire website, so when you've scrolled to the bottom, it's pletely silent. I've tried messing with the "height" variable in the script, but to no avail. The sound always ends up heavily lowered, but still faintly playing in the background. Is there a way to make it shut up at a certain scroll point? For example, make the audio play at $(window).scrollTop() = 500 and stop at $(window).scrollTop() = 3000?

• javascript
• jquery
• css
• audio
• skrollr

• Do you want it to play between 500 and 3000 or fade from 500 to 3000? – Vandervals Commented Jun 2, 2015 at 14:32
• I'd like it to start at 500 and stop at 3000, no fading, just start and stop. – Milad Emadi Commented Jun 2, 2015 at 14:33

1 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 the variables outside for performance matters, as jQuery scroll has really bad performance, that gets even worse on phones).

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