Simple Voice Tools

项目简介

这是一个简单的语音工具应用，用于实时音高检测、音高跟踪和频谱分析。

项目背景

原来的版本因为功能过于复杂被毙掉了，现在重新设计了一版更加简洁、易用的版本。全程使用ai工具构建，页面响应式做的很差，只有移动端视图做的能看，待修改中....个别手机、个别浏览器可能因为性能限制原因导致卡顿，目前没有找到原因...不过经测试 QQ 内置浏览器是可以使用的（？），目前版本也懒得改了，明天还有Java项目要写，真的没有时间，不然我也不至于在github网页里面连续修改两次readme不合并commit了😭

功能特点

• 实时音高检测：实时显示当前检测到的音高和频率
• 音高跟踪：记录并可视化音高变化趋势
• 频谱分析：显示音频的频谱图
• 结果分析：提供音高分析数据
• 设置选项：可自定义主题、图表设置等

技术栈

• React 19
• TypeScript
• Tailwind CSS
• Zustand (状态管理)
• Web Audio API (音频处理)
• Canvas API (可视化)
• GSAP (动画)

开发说明

由于开发者不熟悉前端技术，代码质量可能不是很高，主要关注功能实现。

安装依赖

npm install

开发模式

npm run dev

构建

npm run build

预览构建结果

npm run preview

使用方法

1. 启动应用后，点击顶部的"开始"按钮
2. 允许浏览器访问麦克风权限
3. 开始说话或唱歌，应用会实时显示音高和频谱
4. 可以在不同视图之间切换，查看不同的分析结果
5. 在设置页面可以调整应用的外观和检测参数

注意事项

• 由于使用了 Web Audio API，需要在 HTTPS 环境下运行，或者在 localhost 开发环境中
• 麦克风权限需要用户手动授权
• 音高检测的准确性可能会受到环境噪音的影响

浏览器兼容性

建议使用现代浏览器，如 Chrome、Firefox、Safari 等。