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

滚动音频

1 个答案: