JS:使用快捷组合键操控audio控件
<h2>组合键：</h2><blockquote>Alt + X ：暂停/播放<br>Alt + J : 静音/恢复声音<br>Alt + + ：音量加（支持数字键盘）<br>Alt + - ：音量减（支持数字键盘）</blockquote>
<div id="showRes" style="margin: 30px; text-align: center;"></div>
<h2>代码：</h2>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
var runCodes = (str,target) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
target.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
runCodes(hEpre.innerText, showRes);
</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进入播放工作之后才能正常使用。 长知识了！谢谢马老师深入浅出、简洁明了的讲解{:4_191:} 涨知识了，谢谢老师辛苦！ 马黑黑 发表于 2025-2-20 13:43
Firefox或别的浏览器不支持网页音频自动播放时，刚打开页面 alt+X 不能控制音频的播放，需要audio进入播放 ...
你可真神，预判很准滴
火狐它就是不自动播放，需要手动点开。。
Edge就会自动播放。{:4_173:} 马黑黑 发表于 2025-2-20 13:41
音量增减快捷键支持键盘主区域上的加减键位，同时支持数字键盘（常规键盘右边的小键盘）上的加减键位（注意 ...
奇了，我白天试的时候，主键盘控制音量没试成功，小键盘加减控制成功。。。。
现在换台电脑试下都行了。。{:4_173:}
原因不明明天再去试看看。 马黑黑 发表于 2025-2-20 13:37
第4行：函数，用于设置音量值，范围0~1；
6~24行：页面监听事件——
JS又来晕人了。。我看一遍假装看过了。{:4_173:} 这么多都是能操控的，涨知识了{:4_187:} 红影 发表于 2025-2-20 19:35
这么多都是能操控的，涨知识了
想要的都可以呢 梦江南 发表于 2025-2-20 15:14
涨知识了，谢谢老师辛苦！
{:4_190:} 马黑黑 发表于 2025-2-20 13:41
音量增减快捷键支持键盘主区域上的加减键位，同时支持数字键盘（常规键盘右边的小键盘）上的加减键位（注意 ...
case 187: case 107: 这个设置了两个，就是对应的主键盘和小键盘的加减键的吧{:4_173:} 杨帆 发表于 2025-2-20 14:56
长知识了！谢谢马老师深入浅出、简洁明了的讲解
能看懂吧 花飞飞 发表于 2025-2-20 18:48
JS又来晕人了。。我看一遍假装看过了。
switch是开关的意思。这个开关，依据指定的值来判断要做什么。 花飞飞 发表于 2025-2-20 18:47
奇了，我白天试的时候，主键盘控制音量没试成功，小键盘加减控制成功。。。。
现在换台电脑试下都行了。 ...
也有可能是键盘问题，或忙中出错没有按对 ALT键 马黑黑 发表于 2025-2-20 19:38
能看懂吧
还行，谢谢老师厚爱与指导帮助{:4_190:} 杨帆 发表于 2025-2-20 19:39
还行，谢谢老师厚爱与指导帮助
JS的学习是一个漫长的过程 红影 发表于 2025-2-20 19:38
case 187: case 107: 这个设置了两个，就是对应的主键盘和小键盘的加减键的吧
是的{:4_181:} 花飞飞 发表于 2025-2-20 18:44
你可真神，预判很准滴
火狐它就是不自动播放，需要手动点开。。
Edge就会自动播放。
不过可以设置为支持自动播放