我尝试使用 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;
};
}();
};
最佳答案
setVolume
是一个局部变量,仅在函数范围内可用。这就是为什么它是未定义的。您可以通过删除 var
关键字将其设为全局变量。
虽然这通常不是一个好的做法,但在这种情况下您的代码可以工作。
看看这个 fiddle
https://jsfiddle.net/xyjn4mao/
打开控制台,您将不再收到引用错误
。
关于javascript - HTML range 元素控制音频元素的音量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34998348/