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>
CodePudding user response:
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 >
<p id="scroll">Scrolled: <span>0</span>%</p>
<p id="volume">Current Volume: <span>0</span>%</p>
</div>
</article>
CodePudding user response:
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