javascript - HTML range 元素控制音频元素的音量

Question

我尝试使用 HTML range 元素来控制 HTML 音频元素的音量，但遇到了一些问题。

下面的 setVolume 函数只有一行，似乎可以在该网站的另一个答案中使用，除了我收到的错误(“Uncaught ReferenceError: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>

音频播放器的脚本:

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;
    };
  }();
};

Answer 1

setVolume 是一个局部变量，仅在函数范围内可用。这就是为什么它是未定义的。您可以通过删除 var 关键字将其设为全局变量。

虽然这通常不是一个好的做法，但在这种情况下您的代码可以工作。

看看这个 fiddle

https://jsfiddle.net/xyjn4mao/

打开控制台，您将不再收到引用错误。