How to set the sound distribution on the page 0 -> 1 -> 0 when scrolling the window?

George 6ix9ine 0
Viewed 21

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

audio jquery javascript html
2 Answers

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>

Vijay Hardaha0

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
Guillaume Brunerie0
Related