我正在用 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 处停止?
最佳答案
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 的性能非常差,在手机上更糟)。
关于javascript - 滚动的音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30598817/