JS:使用快捷组合键操控audio控件

马黑黑

组合键：

Alt + X ：暂停/播放
Alt + J : 静音/恢复声音
Alt + + ：音量加（支持数字键盘）
Alt + - ：音量减（支持数字键盘）

代码：

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=31654479" autoplay loop controls></audio>

<script>
const setVolume = (val) => Math.min(1, Math.max(0, val));

document.addEventListener('keydown', e => {
	if(!e.altKey) return;
	switch (e.keyCode) {
		case 88: //X
			aud.paused ? aud.play() : aud.pause();
			break;
		case 74: //J
			aud.muted = !aud.muted;
			break;
		case 187: case 107: //+
			aud.volume = setVolume(aud.volume + 0.1);
			break;
		case 189: case 109: //-
			aud.volume = setVolume(aud.volume - 0.1);
			break;
		default:
			return;
	}
});
</script>

马黑黑

第4行：函数，用于设置音量值，范围0~1；

6~24行：页面监听事件——

行7：若 ALT 键没有按下，取消执行下面的代码
然后用 switch 语句检测组合键的另一个键位 keyCode 值，若按下则执行相应的操作。

audio 的静音属性可读写，返回布尔值，所以 aud.muted = !aud.muted 语句会令音频控件在静音和非静音状态间变换；audio 的音量属性可读写，所以通过 0.1 歩幅增加或减少可以控制音量，所调用的函数确保音量增或减时不会超越 0~1 的范围。

马黑黑

音量增减快捷键支持键盘主区域上的加减键位，同时支持数字键盘（常规键盘右边的小键盘）上的加减键位（注意确保 Num Lock 键处于打开状态）。

马黑黑

Firefox或别的浏览器不支持网页音频自动播放时，刚打开页面 alt+X 不能控制音频的播放，需要audio进入播放工作之后才能正常使用。

杨帆

长知识了！谢谢马老师深入浅出、简洁明了的讲解

梦江南

涨知识了，谢谢老师辛苦！

花飞飞

马黑黑 发表于 2025-2-20 13:43
Firefox或别的浏览器不支持网页音频自动播放时，刚打开页面 alt+X 不能控制音频的播放，需要audio进入播放 ...

你可真神，预判很准滴
火狐它就是不自动播放，需要手动点开。。
Edge就会自动播放。

花飞飞

马黑黑 发表于 2025-2-20 13:41
音量增减快捷键支持键盘主区域上的加减键位，同时支持数字键盘（常规键盘右边的小键盘）上的加减键位（注意 ...

奇了，我白天试的时候，主键盘控制音量没试成功，小键盘加减控制成功。。。。
现在换台电脑试下都行了。。
原因不明明天再去试看看。

花飞飞

马黑黑 发表于 2025-2-20 13:37
第4行：函数，用于设置音量值，范围0~1；

6~24行：页面监听事件——

JS又来晕人了。。我看一遍假装看过了。

红影

这么多都是能操控的，涨知识了

马黑黑

红影 发表于 2025-2-20 19:35
这么多都是能操控的，涨知识了

想要的都可以呢

马黑黑

梦江南 发表于 2025-2-20 15:14
涨知识了，谢谢老师辛苦！

红影

马黑黑 发表于 2025-2-20 13:41
音量增减快捷键支持键盘主区域上的加减键位，同时支持数字键盘（常规键盘右边的小键盘）上的加减键位（注意 ...

case 187: case 107: 这个设置了两个，就是对应的主键盘和小键盘的加减键的吧

马黑黑

杨帆 发表于 2025-2-20 14:56
长知识了！谢谢马老师深入浅出、简洁明了的讲解

能看懂吧

马黑黑

花飞飞 发表于 2025-2-20 18:48
JS又来晕人了。。我看一遍假装看过了。

switch是开关的意思。这个开关，依据指定的值来判断要做什么。

马黑黑

花飞飞 发表于 2025-2-20 18:47
奇了，我白天试的时候，主键盘控制音量没试成功，小键盘加减控制成功。。。。
现在换台电脑试下都行了。 ...

也有可能是键盘问题，或忙中出错没有按对 ALT键

杨帆

马黑黑 发表于 2025-2-20 19:38
能看懂吧

还行，谢谢老师厚爱与指导帮助

马黑黑

杨帆 发表于 2025-2-20 19:39
还行，谢谢老师厚爱与指导帮助

JS的学习是一个漫长的过程

马黑黑

红影 发表于 2025-2-20 19:38
case 187: case 107: 这个设置了两个，就是对应的主键盘和小键盘的加减键的吧

是的

马黑黑

花飞飞 发表于 2025-2-20 18:44
你可真神，预判很准滴
火狐它就是不自动播放，需要手动点开。。
Edge就会自动播放。

不过可以设置为支持自动播放