jQuery (윈도우)를 사용하여 HTML5 오디오 페이드 (볼륨 조절) .scroll

html5 오디오를 사용하는 페이지를 만들어 백그라운드에서 사운드 파일을 반복하고 사용자가 아래로 스크롤하면 페이드 아웃합니다. 이상적으로는 사용자가 다시 스크롤하면서 페이드 인 할 수도 있습니다. 내가 해제 방법입니다 알지만, 여기에 내가 함께 일하고 무엇 :jQuery (윈도우)를 사용하여 HTML5 오디오 페이드 (볼륨 조절) .scroll

가

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/

누구나에 자상을 먹고 싶어 이? 감사!!!

출처

2012-12-20 Bzer

당신은 사용자가 스크롤 한 결정 .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/

출처

2012-12-20 04:10:58 Blender

딱! 감사!!!!! – Bzer

jQuery (윈도우)를 사용하여 HTML5 오디오 페이드 (볼륨 조절) .scroll

답변

관련 문제