HumanInput Clapper插件实战3步把拍掌和鼓掌变成网页事件完整实现Clap On Clap Off【免费下载链接】HumanInputA JavaScript library for handling keyboard shortcuts and other human-generated events项目地址: https://gitcode.com/gh_mirrors/hu/HumanInputHumanInput 是一个轻量级gzip 后约 8.1KB的 JavaScript 事件库用于处理键盘快捷键等人类产生的各类事件。它的Clapper 插件能让浏览器听见你的拍手声拍一下、拍两下、鼓掌分别触发不同的网页事件从而实现Clap On Clap Off拍一下打开、再拍一下关闭的免键盘交互体验全程无需任何第三方依赖。一、Clapper 插件能识别哪 3 种拍手事件打开官方演示页 demo/clapper/index.html 就能看到全部效果页面上有一个清单你拍手时会依次被勾掉——事件名触发方式典型用途clap单次拍手切换播放/暂停、点亮页面doubleclap快速拍两下Clap On Clap Off 开关applause连续鼓掌触发庆祝动画演示页会显示Thank you, thank you!演示页甚至用了一个小技巧第一次鼓掌显示感谢语第二次用HI.once只响应一次的掌声监听器显示Youre too kind!非常生动。二、工作原理麦克风 频谱峰值检测为什么不会误报插件源码位于 src/clapper.js核心思路比想象中更聪明通过getUserMedia申请麦克风权限用 Web Audio API 的AnalyserNode对声音做快速傅里叶变换FFT 大小 128每 60ms 采样一次拍手声的能量峰值集中在频谱最前段低频段且音量是突然跳变的。插件会把当前峰值与最近约 3 秒50 个采样的滚动平均值对比跳变超过阈值才可能是拍手再用两个magic ratio低频能量与中频能量的比值和峰值数量检查过滤掉音乐、语音等电脑合成的平滑声波——这也是它在嘈杂环境下依然稳定的关键。三、快速上手3 步接入拍手事件 第 1 步引入包含全部插件的完整版。Clapper 插件会自动打包进 full 版本构建入口见 src/humaninput-full.js产物见 lib/humaninput-full.jsscript srchumaninput-latest.js/script第 2 步创建实例并监听三种掌声事件var HI new HumanInput(window, { autostartClapper: true }); HI.on(clap, () console.log(一次拍手)); HI.on(doubleclap, () console.log(两次拍手)); HI.on(applause, () console.log(掌声));第 3 步如果没设置autostartClapper就手动调用HI.startClapper()开始监听。四、实现 Clap On Clap Off双击拍手控制开关 Clap On Clap Off的玩法是拍两下打开功能再拍两下关闭。核心就是用一个状态变量配合doubleclap事件var featureOn false; HI.on(doubleclap, function() { featureOn !featureOn; if (featureOn) { HI.startClapper(); // 开启 // 打开你的功能如计时器、灯光特效…… } else { HI.stopClapper(); // 关闭并释放麦克风 // 关闭功能 } });HI.stopClapper()会停止音频轨道并断开音频处理链见 src/clapper.js 中stopClapper方法既省电又保护隐私。五、3 个配置参数调灵敏度、控开关Clapper 插件支持以下设置详见 README.rst 的 Clapper Plugin 章节clapThreshold数字代码默认 130麦克风输入幅值需超过该相对阈值才算一次拍手。拍手声小、老麦克风 → 调小环境吵、容易误触发 → 调大autostartClapper布尔默认false实例化后是否立即开始监听。出于麦克风权限考虑官方默认不自动启动autotoggleClapper布尔默认true页面切到后台时自动暂停监听、回到前台时自动恢复避免看不见的页面还在悄悄听你说话。六、使用前的 2 个重要注意事项 ⚠️必须使用 HTTPS或 localhost浏览器仅允许安全环境下访问麦克风和 Web Audio API用 http 打开本地文件大概率失败——演示页对此有明确警告首次会弹出麦克风授权用户拒绝授权时插件会记录错误日志但不报错崩溃建议监听授权结果并做好降级方案比如同时提供一个屏幕按钮。七、延伸参考插件源码src/clapper.js含findPeaks峰值检测、clapThreshold判定逻辑官方演示demo/clapper/index.htmlClap / Clap Clap / Applause 三合一互动演示完整文档README.rst事件类型总表、插件浏览器兼容性说明测试用例tests/index.html把拍手变成和ctrl-s一样可靠的事件HumanInput 的 Clapper 插件只用一个插件文件就做到了。下次做 Web 互动装置、课堂演示或无障碍辅助工具时不妨让用户拍两下试试。【免费下载链接】HumanInputA JavaScript library for handling keyboard shortcuts and other human-generated events项目地址: https://gitcode.com/gh_mirrors/hu/HumanInput创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考