如何实现窗口滚动时页面音量按0→1→0规律调节？

需求说明 #

需要实现页面滚动时音频音量从0逐渐升到1，到达指定区间中点后再逐渐降到0，同时支持通过像素值或百分比设置音量变化的上下边界。

修改后的代码实现 #

方式1：按页面百分比设置边界 #

适合希望音量变化范围跟随页面长度的场景，比如在页面20%到80%区间完成0→1→0的变化：

<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();
    // 初始化音量为0
    audioElm.volume = 0;

    // 设置音量变化的上下边界（页面总高度的百分比）
    var startPercent = 0.2; // 开始升音量的位置：页面20%处
    var endPercent = 0.8;   // 开始降音量的位置：页面80%处
    var docHeight = $(document).height() - $(window).height();
    var startPos = docHeight * startPercent;
    var endPos = docHeight * endPercent;
    var midPos = (startPos + endPos) / 2; // 音量峰值位置

    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        let volume = 0;

        // 滚动位置在开始边界之前：音量保持0
        if (scrollTop <= startPos) {
            volume = 0;
        } 
        // 滚动位置在开始边界到中间点之间：音量从0升到1
        else if (scrollTop > startPos && scrollTop <= midPos) {
            volume = (scrollTop - startPos) / (midPos - startPos);
        } 
        // 滚动位置在中间点到结束边界之间：音量从1降到0
        else if (scrollTop > midPos && scrollTop <= endPos) {
            volume = 1 - (scrollTop - midPos) / (endPos - midPos);
        } 
        // 滚动位置在结束边界之后：音量保持0
        else {
            volume = 0;
        }

        // 确保音量在0-1范围内，避免出现负数或超过1的值
        audioElm.volume = Math.max(0, Math.min(1, volume));
        console.log(audioElm.volume);
    });
}); 
</script>

方式2：按固定像素值设置边界 #

适合页面长度固定，希望在指定像素区间内完成音量变化的场景，比如从滚动100px开始升音量，到600px处达到峰值，1100px后音量回到0：

<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();
    audioElm.volume = 0;

    // 设置固定像素边界
    var startPos = 100;   // 开始升音量的滚动像素
    var endPos = 1100;    // 结束降音量的滚动像素
    var midPos = (startPos + endPos) / 2; // 音量峰值位置

    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        let volume = 0;

        if (scrollTop <= startPos) {
            volume = 0;
        } else if (scrollTop > startPos && scrollTop <= midPos) {
            volume = (scrollTop - startPos) / (midPos - startPos);
        } else if (scrollTop > midPos && scrollTop <= endPos) {
            volume = 1 - (scrollTop - midPos) / (endPos - midPos);
        } else {
            volume = 0;
        }

        audioElm.volume = Math.max(0, Math.min(1, volume));
        console.log(audioElm.volume);
    });
}); 
</script>

参数调整说明 #

• 若使用方式1，修改startPercent和endPercent的值即可调整音量变化区间，比如startPercent: 0.1代表从页面10%处开始升音量。
• 若使用方式2，直接修改startPos和endPos的像素值，就能指定音量变化的滚动范围。
• 代码内置了音量范围限制，确保volume始终在0-1之间，避免音频报错。

内容的提问来源于stack exchange，提问作者George 6ix9ine