使用range滑块调整audio标签音量时出现DOMException错误求助

这个错误是因为audio元素的volume属性只接受0到1之间的浮点数，你直接把range滑块的字符串值赋值给它，要么类型不匹配，要么数值超出了允许范围。

问题核心原因： #

• range滑块的value是字符串类型，直接赋值给volume会触发类型转换异常
• 一般range滑块的取值范围是0-100（方便用户操作），但volume要求的是0-1的浮点数，两者范围不匹配
• 缺少边界校验，万一滑块值超出0-100范围，转换后也会不符合volume的要求

修正后的代码： #

function ppayVolume(){
    var volSlider = document.getElementById("volume");
    var realplayerEL = document.getElementById("real-player");
    // 把滑块值转为数字，再除以100得到0-1区间的浮点数
    var volVAL = Number(volSlider.value) / 100;
    // 强制将数值限制在0-1之间，彻底避免超出范围报错
    volVAL = Math.max(0, Math.min(1, volVAL));
    realplayerEL.volume = volVAL;
    console.log(volVAL);
}

额外要确认的细节： #

• 确保你的range滑块HTML属性设置正确，示例如下：

<input type="range" id="volume" min="0" max="100" value="50" step="1">

• 检查real-player确实是页面中存在的audio元素，避免获取到null

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