使用jQuery（窗口）.scroll淡化HTML5音频（调整音量） [英] Fade HTML5 audio (adjust volume) using jQuery (window).scroll
本文介绍了使用jQuery（窗口）.scroll淡化HTML5音频（调整音量）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个页面，该页面使用html5音频在后台循环声音文件，并在用户向下滚动时淡出。理想情况下，当用户向上滚动时它也会淡入。我知道我离开了，但这是我正在使用的：
I am attempting to make a page that uses html5 audio to loop a sound file in the background and fade out as the user scrolls down. Ideally it would also fade in as the user scrolls back up. I know I am way off, but here is what I am working with:
html：
<html lang="en-US">
<head>
<style>article {height:1000px; background:yellow;}</style>
</head>
<body>
<article>
<audio loop id="soundTour" src="longdong.wav"></audio>
</article>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
</body>
</html>
jQuery：
$(document).ready(function() {
var audioElm = $('#soundTour').get(0);
audioElm.play();
audioElm.volume=1;
$(window).scroll(function () {
//audioElm.volume=.1;
var value = $(window).scroll("value");
audioElm.volume = (value / 100);
});
});
有人想要捅这个吗？谢谢!!!
Anyone want to take a stab at this? Thanks!!!
推荐答案
您可以使用 .scrollTop（）来确定用户滚动的距离：
You can use .scrollTop() to determine how far the user has scrolled:
$(document).ready(function() {
var audioElm = $('#soundTour').get(0);
audioElm.play();
var height = $(document).height() - $(window).height();
$(window).scroll(function() {
audioElm.volume = 1 - $(window).scrollTop() / height;
console.log(audioElm.volume);
});
});
演示： http://jsfiddle.net/8X6Wn/3/
Demo: http://jsfiddle.net/8X6Wn/3/
这篇关于使用jQuery（窗口）.scroll淡化HTML5音频（调整音量）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
