<!DOCTYPE html>

    <html>

    <head>

        <style>

            #employee,

    #employee-dance,

    #down-text {

      height: 700px;

    }

    #employee {

      background: green;

    }

    #employee-dance {

      background: red;

    }

    #down-text {

      background: orange;

    }

        </style>

        <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>

    </head>

    <body>

    <button type="button">Click Me!</button>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <section id="employee"></section>

    <section id="employee-dance">

      <audio loop id="myAudio">

        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">

      </audio>

    </section>

    <section id="down-text"></section>

        <script type="text/javascript">

            // Scrool div anchor

    var danceEl = $("#employee-dance");

    var danceElOffset = danceEl.offset().top;

    var danceElHeight = danceEl.height();

    var myAudio = document.getElementById("myAudio");

     

    var $w = $(window).scroll(function() {

      if ($w.scrollTop() >= danceElOffset && $w.scrollTop() <= (danceElOffset + danceElHeight)) {

        myAudio.play();

        myAudio.volume = 0.2;

      } else {

        myAudio.pause();

        myAudio.volume = 0;

      }

     

    });

        </script>

    </body>

    </html>