滚动的音频

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>

这让我的音频在网站加载后立即开始，并在整个网站范围内淡出，因此当您滚动到底部时，它完全没有声音。我试过弄乱脚本中的 "height" 变量，但无济于事。声音总是以极低的音量结束，但仍然在后台微弱地播放。有没有办法让它在某个滚动点关闭？例如，让音频在 $(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 scroll 的性能非常差，在手机上更差）。

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

滚动的音频

Audio on scroll

javascript

css

audio

jquery

skrollr