马黑PHP整站系统

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

位置: 首页 > 前端三套件[ 发布时间: 2025.2.20  作者: 马黑  阅读: 40 ]

组合键:

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>

前一篇: CSS 3d属性:backface-visibility
下一篇: 没有了

发表评论:

       

评论列表 [3条]

#3 | 小希 于 2025-2-20 14:49 发布: 现在试了下小键盘上的加减号,音量变化成功。。。主键盘除了0旁边的加减号哪里还有个加减号么。。神奇的 。

#2 | 悄然 于 2025-2-20 14:44 发布: 奇了,音量加减怎么也不成功。。是我的键盘有问题么。。还是我按错了。。

#1 | 飞飞 于 2025-2-20 14:43 发布: 这个音乐好听。。。看到增加了功能,不仅能暂停播放,还可以一键静音。。。还有音量加减。。

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com