JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="article1"><p> Scroll Down</p>
    <audio loop id="scrollaudio" src="http://k007.kiwi6.com/hotlink/5qbkhmt57i/Klrx_-_New_Beginnings.mp3"></audio>
</div>
<div class="article2"><p>HTML5 Audio Loop Infinite Play with fade on scroll. Inspired from BKWLD.</p>
    <p> Crafted with <3 by MySkins Studio : www.myskins.org </p>
      <p> Song : KLRX- New Beginings </p>
</div>

CSS

.article1 {
    height:800px;
    background:#124A70;
    color: #fff;
    font-size: 2em;
    text-align: center;
    padding: 10px;
}
.article2 {
    height: 900px;
    background: #E04006;
    color: #fff;
    font-size: 2em;
    text-align: center;
    padding: 10px;
}

p {
    font-family: Tahoma, Arial, sans-serif;
    text-shadow: 0px 1px 1px #111;
}

JavaScript

jQuery(document).ready(function($) {
    var audioElm = $('#scrollaudio').get(0);
    audioElm.play();
    
    var height = $(document).height() - $(window).height();
    
    $(window).scroll(function() {
        audioElm.volume = 1 - $(window).scrollTop() / height;
        console.log(audioElm.volume);
    });
});