滚动音频

Question

我正在使用 skrollr 插件做一个网站，我几乎完成了图片和滚动本身，所以我现在正在尝试添加音频，但我似乎无法让音频开始和停止当我想要它的时候。这是我目前正在使用的脚本：

<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>

这会使我的音频在网站加载后立即开始播放，并在整个网站范围内淡出，因此当您滚动到底部时，它会完全静音。我试过弄乱脚本中的“高度”变量，但无济于事。声音总是以非常低的音量结束，但仍然在背景中微弱地播放。有没有办法让它在某个滚动点关闭？例如，让音频在 $(window).scrollTop() = 500 处播放并在 $(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;
  }
});

您需要添加一些条件。 （我为性能问题定义了外部变量，因为 jQuery 滚动的性能非常差，在手机上变得更糟）。

笔：http://codepen.io/vandervals/pen/KpWzVJ