JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<article>
    <audio loop id="soundTour" src="http://brendansheehanworks.com/100/aaaa/examples/b/longdong.wav"></audio>
</article>

CSS

article {height:1000px; background:yellow;}

JavaScript

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