实时噪声雷达 🎵

一款基于浏览器的智能噪声监控与管理应用，通过麦克风实时采集或上传音频文件，自动识别并分析环境中的各类声音。

✨ 核心功能

• 🎯 实时监控: 通过麦克风实时采集音频，显示当前分贝值
• 🔍 声音识别: 自动识别人声、键盘声、脚步声等5类常见声音
• 📊 分贝显示: 实时显示各类声音的分贝值和可视化进度条
• ⚙️ 阈值管理: 用户可自定义各类声音的分贝阈值
• 🎭 智能回怼: 超阈值时显示戏谑化的幽默提醒文本
• 📱 响应式设计: 支持桌面端和移动端，适配各种屏幕尺寸

🚀 快速开始

环境要求

• Node.js 18+
• 现代浏览器 (支持 Web Audio API 和 Web Speech API)

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

🛠️ 技术栈

• 前端框架: React 18 + TypeScript
• 样式方案: Tailwind CSS
• 构建工具: Vite
• 路由管理: React Router
• 音频处理: Web Audio API
• 语音识别: Web Speech API
• 数据存储: LocalStorage

📱 页面结构

主控制台页面 (/)

• 实时监控面板：雷达扫描动画 + 分贝显示
• 声音识别区域：5类声音的实时检测结果
• 智能回怼区：超阈值时的戏谑化提醒

声音管理页面 (/manage)

• 声音分类管理：配置各类声音的阈值和开关
• 过滤规则设置：调整回应风格和全局阈值
• 历史记录查看：噪声检测的时间轴记录

设置页面 (/settings)

• 音频输入选择：麦克风 vs 文件上传
• 参数调节：灵敏度、采样率、更新频率
• 语言风格配置：温和、适中、激烈三种回应风格

🎨 设计特色

• 深色主题: 深蓝色 + 青色的现代化配色方案
• 动画效果: 雷达扫描、脉冲动画、进度条过渡
• 卡片布局: 模块化的信息展示，清晰易读
• 响应式: 移动端优先的自适应设计

🔧 浏览器兼容性

• Chrome 66+
• Firefox 55+
• Safari 14+
• Edge 79+

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

适用场景: 会议室、自习室、宿舍、开放办公区的噪声管理与提醒