Question

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

下面的setVolume函数只有一行，似乎在这个网站的另一个答案中工作，除了我得到的错误（“Uncaught ReferenceError：setVolume is not defined”）我觉得我在激活函数时遇到了问题首先。

有人有什么想法吗？

相关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关键字将其设为全局变量。

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

看看这个小提琴

https://jsfiddle.net/xyjn4mao/

打开你的控制台，你将不再获得Reference Error。

用于控制音频元素音量的HTML范围元素

1 个答案: