如何使用jQuery批量调整DOM中所有audio标签的音量

核心问题原因 #

document.querySelector("audio") 只会返回DOM中匹配的第一个<audio>元素，所以你的代码只能调整第一个音频的音量。要批量修改所有音频，需要获取全部<audio>元素并逐个设置音量。

方案一：使用jQuery实现（推荐，符合你的需求） #

既然你已经在使用jQuery，直接用jQuery的选择器获取所有<audio>元素，然后用.each()遍历设置音量：

$(document).ready(function() {
    const slider = $("input"); 
    
    slider.on("input", function() {
        const sliderVal = Math.round($(this).val());
        // 更新进度条和显示值
        $("progress").val(sliderVal);
        $("span").text(sliderVal);
        
        // 转换为0-1之间的音量值（audio的volume属性范围是0-1）
        const volumeVal = sliderVal / 100;
        
        // 遍历所有audio标签，设置音量
        $("audio").each(function() {
            $(this).prop("volume", volumeVal);
        });
    });
});

代码说明： #

• 用$("input")替代原生querySelector，更贴合jQuery写法
• 用.on("input")绑定事件，替代原生oninput
• $("audio").each()遍历所有音频元素，通过.prop("volume", volumeVal)设置每个音频的音量属性

方案二：原生JavaScript实现 #

如果不想依赖jQuery，用原生JS的document.querySelectorAll("audio")获取所有音频元素，再遍历处理：

document.addEventListener("DOMContentLoaded", function() {
    const slider = document.querySelector("input"); 
    
    slider.addEventListener("input", function() {
        const sliderVal = Math.round(this.value);
        const progressBar = document.querySelector("progress");
        const sliderValueSpan = document.querySelector("span");
        
        progressBar.value = sliderVal;
        sliderValueSpan.textContent = sliderVal;
        
        const volumeVal = sliderVal / 100;
        
        // 获取所有audio元素并遍历设置音量
        const allAudios = document.querySelectorAll("audio");
        allAudios.forEach(audio => {
            audio.volume = volumeVal;
        });
    });
});

注意事项： #

• <audio>的volume属性取值范围是0到1（0为静音，1为最大音量），所以必须把滑块的0-100数值除以100做转换
• 如果页面中有多个滑块、进度条或显示用的span，建议给它们添加特定的class或id，避免误选无关元素（比如用$(".volume-slider")代替$("input")）

内容的提问来源于stack exchange，提问作者kevincarter