在网页开发中，很多人都想让自己的视频播放器更酷一点。最常见的一点就是让用户可以调节声音大小。 我整个人都不好了。 其实这件事很简单，只要知道怎么操作标签里的.volume属性就行啦。

什么是 volume 属性？

标签里的.volume属性是一种控制声音大小的方法。它接收一个从0.0到1.0之间的小数值， 0.0表示静音，1.0表示最大音量，我傻了。。

为什么要控制音量？

• 用户体验：如果你的视频一开始就很大声，用户可能会被吓到。
• 可访问性：听力障碍者需要更低或更高的声音。
• 广告效果：广告声音太大可能导致用户不耐烦。

获取视频元素的方法

"先把你的video元素拿出来然后再来搞 戳到痛处了。 定volume" ——这句老话其实挺对的。

// 正确写法:

var vid = document.getElementById;
// 或者使用 querySelector
// var vid = document.querySelector;
vid.volume = 0.5; // 把声音调到一半
console.log; // 输出当前声音值

(你看，这么几行代码就能把声音调到你想要的位置。如果你不想写这么多， 破防了... 可以直接在浏览器控制台里输入：

document.getElementById.volume = .7;

然后就能听见变化了。)

常见错误示例

// 错误：变量名未定义
var video;
// 未给video赋值
video.volume = .6;
// 错误：语法错误
document.getElementById.volume= .8;
// 错误：数值范围超出合法区间
video.volume = -1;
video.volume = 100;
/* 上面这些都会报错或者根本不起作用 */
// 错误：没有等页面加载完成就施行
document.getElementById.volume= .5;
   

监听事件来实时调节音量

你没事吧？ "听我说 如果你想让滑块随时改变声音，那你得监听滑块事件。"——这句话几乎是所有前端工程师都说过的话。

滑块可以放在任何地方，但请确保与脚本对应哦，加油！！

此页仅用于演示；如需正式使用，请自行检查兼容性与平安问题。

---