在脚本中设置默认音量

Question

我有一个网站可在加载音乐时循环播放音乐，但声音太大。 我有一个滑杆来更改音乐音量，但是如何将其默认设置为滑杆的25％？

网站

<audio id=music loop autoplay src="peep.mp3">
  <p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>

<script>
    function SetVolume(val)
    {
        var player = document.getElementById('music');
        console.log('Before: ' + player.volume);
        player.volume = val / 100;
        console.log('After: ' + player.volume);
    }
</script>

Answer 1

只需创建一个设置音量的脚本即可：

var audio = document.getElementById("music");
audio.volume = 0.25;

Answer 2

如果您正在使用audio标签，则只需获取Java脚本中的DOM节点并操纵volume属性

var audio = document.querySelector('audio');
// Getting
console.log(volume); // 1
// Setting
audio.volume = 0.5; // Reduce the Volume by Half

您设置的数字应在0.0到1.0的范围内，其中0.0是最安静的，而1.0是最大的。

Answer 3

• input是一个Void元素，因此不需要结束</input>
• 您正在使用max ， min ，也要使用value 。
• 避免使用内联JavaScript。 使逻辑远离标记。
• 像setVolume()一样初始化您的函数
• 使用camelCase setVolume而不是PascalCase SetVolume ，因为它是常规函数，而不是Method，Class或构造函数...

 const audio = document.getElementById('audio'), input = document.getElementById('volume'), setVolume = () => audio.volume = input.value / 100; input.addEventListener("input", setVolume); setVolume(); 

 <audio id=audio loop autoplay src="//upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg">Audio is not supported on your browser. Update it.</audio> <input id=volume type=range min=0 max=100 value=25 step=1> 

我想你也会喜欢这个例子 。