skip to Main Content

I have been looking for a long time for a code to fade the volume by scrolling the site window up and down, but I found only a beautiful code with the function 1 -> 0.
(Fade HTML5 audio (adjust volume) using jQuery (window).scroll)

I tried to juggle the values of the function, but it didn’t work out…

Please, could you advise how to set the sound distribution on the page not 1 -> 0, but 0 -> 1 -> 0 with restrictions on the top and bottom of the site page in pixels or percentages?

p.s.enter image description here
I would like to formulate this code as a spice in my ready-made website in the readymag constructor. I don’t know how to write websites from scratch right now.

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


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

enter image description here

2

Answers


  1. I have prepared this code snippet. Basically, you’ll have to get scrolled page percent and you’ll have to make if condition if the page scrolled is less and equal to 50%, in that case, you’ll calculate the volume percent and set to volume in a low to the high way. and in else condition you’ll calculate the volume percent and you’ll minus it with 1 then you’ll set the volume high to low format.

    NOTE: to autoplay the audio you’ll have to change the site setting and allow sound, otherwise you won’t hear any sound, as audio won’t play automatically on page load.

    $(document).ready(function() {
      var audioElm = $('#soundTour').get(0);
      audioElm.play();
      audioElm.volume = 0;
    
      const twoDigit = (value) => parseFloat(parseFloat(value).toFixed(2));
    
      const percent = (value, per) => twoDigit((parseFloat(value) * parseFloat(per * 2)) / 100);
    
      $(window).scroll(function(e) {
        const scrollPercent = $(window).scrollTop() / ($(document).height() - $(window).height());
        const sp = Math.round(scrollPercent * 100);
    
        $('#scroll>span').html(sp);
    
        let newVolume = 0;
    
        // When are on and above 50% page scroll.
        if (sp <= 50) {
          /**
           * Suppose we have scrolled 2% of the whole page,
           * which means 4% completed in the range of 0-50% page
           * so our percent function has (per * 2) that will make 2 -> 4
           * we're calculating percent from value 1, so our percent will come
           * like 0.1, 0.22, and so on, and we'll set it to volume
           */
          newVolume = percent(1, sp);
        } else {
          /**
           * Here we have minus -50 from scrolled page
           * so if we have scrolled to 52% so by -50 we'll
           * set the value to 2% and the same 4% logic from apply will
           * be applied using the percent function.
           * then we'll get values like 0.1, 0.22, and so on
           * but here we have to go from high to low
           * so we'll subtract the value from 1 and will set that volume
           */
          newVolume = twoDigit(1 - percent(1, sp - 50));
        }
    
        audioElm.volume = newVolume;
    
        $('#volume>span').html(newVolume);
      });
    });
    body {
      margin: 0px;
      padding: 0px;
    }
    
    #fake-height {
      height: 6000px;
      width: 1px;
    }
    
    article {
      background: #f0f0f0;
    }
    
    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    
    .fixed p {
      background: #fff;
      color: #000;
      font-weight: 700;
      border: 1px solid #000;
      padding: 1rem;
      margin: 0 0 1rem 0;
      display: block;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <article>
      <audio loop id="soundTour" src="https://brendansheehanworks.com/100/aaaa/examples/b/longdong.wav"></audio>
      <p id="fake-height"></p>
      <div class="fixed">
        <p id="scroll">Scrolled: <span>0</span>%</p>
        <p id="volume">Current Volume: <span>0</span>%</p>
      </div>
    </article>
    Login or Signup to reply.
  2. Here is one possible formula:

    audioElm.volume = 1 - 2 * Math.abs(0.5 - $(window).scrollTop() / height) 
    

    At the beginning, scrollTop is 0, so you get 1 - 2 * Math.abs(0.5 - 0) which is 0.
    It will then increase until scrollTop is half of the height, and the volume will then be 1 (1 - 2 * Math.abs(0.5 - 0.5)) and then finally it will decrease until scrollTop is equal to height where you get again 0 (1 - 2 * Math.abs(0.5 - 1))

    Another "smoother" formula is

    audioElm.volume = (1 - Math.cos($(window).scrollTop() / height * 2 * Math.PI))/2
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search