स्क्रॉल पर ऑडियो

Question

मैं स्क्रॉलर प्लगइन के साथ एक वेबसाइट कर रहा हूं और मैं लगभग चित्रों के साथ किया गया हूं और खुद को स्क्रॉल कर रहा हूं, इसलिए मैं अब ऑडियो जोड़ने की कोशिश कर रहा हूं, लेकिन मैं ऑडियो नहीं लग रहा जब मैं इसे चाहता हूं तो शुरू करें और रोकें। यह स्क्रिप्ट मैं वर्तमान के साथ काम कर रहा हूँ है:

<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> 

यह बनाता है मेरे ऑडियो जैसे ही वेबसाइट लोड किया जाता है शुरू करने और पूरे वेबसाइट की अवधि भर में बाहर हो पाती, इसलिए जब आप नीचे करने के लिए स्क्रॉल किया गया है, यह पूरी तरह से चुप है। मैंने स्क्रिप्ट में "ऊंचाई" चर के साथ गड़बड़ करने का प्रयास किया है, लेकिन इसका कोई फायदा नहीं हुआ है। ध्वनि हमेशा भारी हो जाती है, लेकिन पृष्ठभूमि में अभी भी बेहोशी से खेल रही है। क्या इसे एक निश्चित स्क्रॉल पॉइंट पर बंद करने का कोई तरीका है? उदाहरण के लिए, $ play (window) .scrollTop() = 500 पर ऑडियो प्ले करें और $ (विंडो) .scrollTop() = 3000 पर रुकें?

Answer 1

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 स्क्रॉल में वास्तव में खराब प्रदर्शन होता है, जो फोन पर भी बदतर हो जाता है)।

पेन: http://codepen.io/vandervals/pen/KpWzVJ