小编Bze*_*zer的帖子

使用jQuery(窗口).scroll淡化HTML5音频(调整音量)

我正在尝试创建一个页面,使用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>
Run Code Online (Sandbox Code Playgroud)

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);
});  
});
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/8X6Wn/

有人想拍这个吗?谢谢!!!

jquery html5 scroll html5-audio

2
推荐指数
1
解决办法
5013
查看次数

标签 统计

html5 ×1

html5-audio ×1

jquery ×1

scroll ×1