🤫 Shut Up - 以噪制噪

一款基于 Web Audio API 的趣味音频应用，通过"以噪制噪"的方式让噪音源闭嘴。

✨ 功能特性

🎵 四种反击模式

1. 延迟回放 - 延迟 0.5 秒后播放录到的音频，制造认知失衡
2. 声波抵消 - 发出与输入波相反的声波，实现主动降噪
3. 干扰音频 - 播放锯齿波干扰音，扰乱对方注意力
4. 高频刺耳 - 8000Hz+ 高频方波，产生刺耳效果

🎚️ 反击强度调节

• 轻柔 - 30% 音量，温和反击
• 平衡 - 60% 音量，适中反击
• 激烈 - 80% 音量，强力反击
• 超能量 - 100% 音量，全力反击

📊 实时可视化

• 输入波形实时显示（青色）
• 输出波形实时显示（紫色）
• 可切换显示/隐藏波形

📱 移动端支持

• 响应式设计，适配各种屏幕
• 支持 iOS Safari 和 Android Chrome
• 可添加到主屏幕作为 Web App 使用

🚀 快速开始

本地运行

# 克隆项目
git clone <repository-url>
cd SHUT-UP

# 启动本地服务器
python -m http.server 8080

# 或使用 Node.js
npx serve .

# 或使用 PHP
php -S localhost:8080

然后打开浏览器访问 http://localhost:8080

部署到 GitHub Pages

1. Fork 本仓库
2. 进入仓库 Settings > Pages
3. Source 选择 "Deploy from a branch"
4. Branch 选择 "main" / "/ (root)"
5. 保存后即可通过 https://<username>.github.io/SHUT-UP 访问

使用 ngrok 进行 HTTPS 测试

# 安装 ngrok
npm install -g ngrok

# 启动隧道
ngrok http 8080

# 使用生成的 HTTPS 链接在手机上访问

📖 使用说明

桌面端

1. 点击"开始反击"按钮
2. 允许浏览器访问麦克风
3. 选择反击模式和强度
4. 观察波形变化，享受反击效果

移动端

iOS (Safari)

1. 确保使用 HTTPS 访问（或 localhost）
2. 在 设置 > Safari > 麦克风 中允许网站访问麦克风
3. 点击"开始反击"按钮
4. 允许麦克风权限

Android (Chrome)

1. 确保使用 HTTPS 访问
2. 点击"开始反击"按钮
3. 允许麦克风权限

添加到主屏幕

iOS

1. 在 Safari 中打开应用
2. 点击分享按钮
3. 选择"添加到主屏幕"

Android

1. 在 Chrome 中打开应用
2. 点击菜单（三个点）
3. 选择"添加到主屏幕"

🛠️ 技术栈

• HTML5 - 页面结构
• CSS3 - 样式和动画（渐变、毛玻璃效果、响应式）
• JavaScript - 应用逻辑
• Web Audio API - 音频处理
• Canvas API - 波形可视化
• MediaDevices API - 麦克风访问

📁 项目结构

SHUT-UP/
├── index.html          # 主页面
├── styles.css          # 样式文件
├── app.js              # 应用逻辑
├── README.md           # 项目说明
└── .trae/specs/        # 规格文档
    └── create-shut-up-app/
        ├── spec.md
        ├── tasks.md
        └── checklist.md

⚠️ 注意事项

浏览器兼容性

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 14+ (iOS 14+)
• ✅ Edge 79+

安全要求

由于浏览器的安全策略，必须在以下环境之一运行：

• localhost / 127.0.0.1
• HTTPS 环境

在非安全环境下，麦克风访问将被拒绝。

性能提示

• 建议使用较新的设备以获得最佳性能
• 关闭其他占用麦克风的应用
• 如果音频有延迟，尝试降低反击强度

🔧 自定义配置

修改延迟时间

编辑 app.js 中的 intensityConfig：

this.intensityConfig = {
    low: { gain: 0.3, delay: 0.5 },      // 修改 delay 值
    medium: { gain: 0.6, delay: 0.5 },
    high: { gain: 0.8, delay: 0.5 },
    extreme: { gain: 1.0, delay: 0.5 }
};

修改波形颜色

编辑 app.js 中的 drawWaveform 调用：

// 输入波形颜色
this.drawWaveform(inputCtx, inputCanvas, inputData, '#00d4ff');

// 输出波形颜色
this.drawWaveform(outputCtx, outputCanvas, outputData, '#9b59b6');

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🙏 致谢

• 设计灵感来自原始手绘稿
• Web Audio API 文档
• 开源社区

---

⚠️ 免责声明：本应用仅供娱乐和技术学习使用，请勿用于恶意干扰他人。使用时请遵守当地法律法规，尊重他人权益。