Javascript HTML范围元素来控制音频元素的音量

我试图使用HTML范围元素来控制HTML音频元素的音量，但遇到了一些问题

下面的setVolume函数只是一行，似乎在这个站点上的另一个答案中起作用，除了我得到的错误（“未捕获的引用错误：setVolume未定义”）之外，我觉得我在一开始启动该函数时遇到了问题

有人有什么想法吗

相关HTML：

<div class="slides">
   <div class="slider-cont">
   <input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0.30'>
    </div>
</div>

---

setVolume

是一个局部变量，仅在函数范围内可用。这就是为什么它没有定义。您可以通过删除

var

关键字使其成为全局变量

虽然这通常不是一个好的实践，但在这种情况下，您的代码将起作用

看这把小提琴

---

打开控制台，您将不会再收到

参考错误

setVolume是函数还是属性？只要range元素的值发生更改，就会触发该函数，或者至少应该是这样！抱歉，我误读了代码。我建议使用

addEventListener（）

而不是

onchange=“…”

。将HTML与JSHmm分开比较干净是的，该函数在移除var关键字的情况下工作，非常感谢！不过，我不想继续做不好的事情！您建议如何在不使其全球化的情况下访问该函数？这是一个很好的问题。我自己也不确定。我尽量避免使用globals，但在这种情况下，我可能也会这样做

window.onload = function() {
var audioPlayer = function() {
    var rainPlaying = false;
    var playRain = document.getElementById('playRain');
    var rainAudio = new Audio('audio/rain1.ogg');
    rainAudio.id = "rainLoop";
    rainAudio.loop = true;

    playRain.addEventListener('click', function() {
        if (rainPlaying) {
            rainPlaying = false;
            rainAudio.pause();

        } else {
            rainPlaying = true;
            rainAudio.play();

        }
    }, false);
    var setVolume = function() {
        rainAudio.volume = document.getElementById("volume1").value;
    };
  }();
};