使用 jQuery (window).scroll 淡化 HTML5 音频（调整音量）答案

【问题标题】：Fade HTML5 audio (adjust volume) using jQuery (window).scroll使用 jQuery (window).scroll 淡化 HTML5 音频（调整音量）
【发布时间】：2015-10-06 21:50:47
【问题描述】：

我正在尝试制作一个使用 html5 音频在后台循环声音文件并在用户向下滚动时淡出的页面。理想情况下，它也会随着用户向上滚动而淡入。我知道我很遥远，但这是我正在使用的：

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

http://jsfiddle.net/8X6Wn/

有人想尝试一下吗？谢谢！！！

【问题讨论】：

标签： jquery html scroll html5-audio

【解决方案1】：

您可以使用.scrollTop() 来确定用户滚动了多远：

$(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/

【讨论】：