在脚本中设置默认音量答案

【问题标题】：Set Default Volume in script在脚本中设置默认音量
【发布时间】：2018-03-20 20:48:38
【问题描述】：

我有一个网站可以在加载时循环播放音乐，但声音太大。我有一个滑动条来改变音乐音量，但我如何将其默认为 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>

【问题讨论】：

顺便说一句，除非您正在建立一个音乐网站，否则我强烈建议您在网站上自动播放音频。您不喜欢在网上随机播放歌曲，其他人也不喜欢。关闭标签（不会破坏我最喜欢的 youtube 歌曲）比搜索不存在的静音按钮更容易......不要谈论连接稀缺或移动计划低的人。
SetVolume(25); 外；和 document.getElementById("vol-control").value=val 在你的函数中。

标签： javascript html

【解决方案1】：

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

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

【讨论】：

将音量设置为 0.25 但将音量处理程序保留在 N% 是糟糕的 UI...

【解决方案2】：

如果您使用audio 标签，只需在Javascript 中获取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 最响亮。

【讨论】：

【解决方案3】：

input 是一个 Void 元素，因此不需要关闭 </input>
你正在使用max，min，好吧，也使用value。
避免使用内联 JavaScript。让你的逻辑远离你的标记。
像setVolume()一样初始化你的函数
使用 camelCase setVolume 而不是 PascalCase SetVolume，因为它是一个普通函数，而不是方法、类或构造函数...

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>

我想你也会喜欢this example。

【讨论】：