滚动音频

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

 $(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); });  

这使得我的音频在网站加载后立即启动并在整个网站的范围内逐渐淡出,所以当你滚动到底部时,它完全是静音的。 我试过在脚本中弄乱“高度”变量,但无济于事。 声音总是大大降低,但仍然在背景中微弱地播放。 有没有办法让它在某个滚动点闭嘴? 例如,让音频播放在$(窗口).scrollTop()= 500并停在$(窗口).scrollTop()= 3000?

 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