滚动窗口时如何设置页面 0 -> 1 -> 0 的声音分布？

Question

我一直在寻找一个通过上下滚动网站窗口来降低音量的代码，但我只找到了一个漂亮的代码，函数为1->0(使用jQuery(窗口(渐变HTML5音频(调整音量(。滚动(

我试着改变函数的值，但没有成功。。。

请告诉我如何在页面上设置声音分布，而不是1->0，但是0->1->0是否以像素或百分比限制网站页面的顶部和底部？

p.s.在此处输入图像描述我想在readymag构造函数中，将此代码作为现成网站中的一种香料。我现在不知道如何从头开始写网站。

<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>

在此处输入图像描述

Answer 1

我已经准备好了这个代码片段。基本上，你必须获得滚动页面的百分比，如果滚动页面小于等于50%，你必须确定条件，在这种情况下，你将计算音量百分比，并以从低到高的方式设置音量。在其他条件下，你将计算体积百分比，用1减去它，然后将体积设置为高到低格式。

注意：要自动播放音频，您必须更改网站设置并允许声音，否则您将听不到任何声音，因为音频在页面加载时不会自动播放

$(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>

Answer 2

这里有一个可能的公式：

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

一开始，scrollTop就是0，所以得到了1 - 2 * Math.abs(0.5 - 0)，也就是0。然后它将增加，直到scrollTop是高度的一半，然后体积将是1(1 - 2 * Math.abs(0.5 - 0.5)(，然后最后它将减少，直到scrollTop等于height，在那里你再次得到0(1 - 2 * Math.abs(0.5 - 1)(

另一个"；"更平滑"；公式是

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