一款功能全面的blue即兴吉他学习与练习Web应用 视频地址：https://www.bilibili.com/video/BV1RC1GB6EUi/?spm_id_from=333.1387.homepage.video_card.click
访问地址: https://littleguitar.pages.dev/#/blues
todo:
- 吉他纸板的缩放功能
- 倒计时更具节拍速度大小同步速度
- 经典音频伴奏预加载功能，防止对不上节拍
- 无后端页面访问统计功能
全功能的Blues练习系统，包含完整的虚拟乐队伴奏：
- 三种Blues音阶：小调Blues、大调Blues、Mixolydian
- 12个调式选择：支持所有大调和半音调
- 可视化指板：实时显示音阶位置，根音高亮
- 音符标注：清晰显示每个音符在指板上的位置
- 品位标记：
- 顶部和底部双重品位数字标记
- 特殊品位（3、5、7、9、12、15、17、19品）使用黄色高亮
- 清晰的品位范围显示
- 标准12小节Blues进行：经典I-IV-V进行
- 快速6小节进行：适合快速练习
- 实时和弦显示：当前演奏和弦高亮提示
- BPM速度控制：
- 滑动条调节（60-180 BPM）
- 6个快捷按钮（60/80/100/120/140/160）
- 实时节拍指示器
- 速度描述提示（慢速/中速/快速/极速）
- 三种节奏型：
- Shuffle：Blues摇摆节奏
- Standard：标准四四拍
- Slow Blues：慢板Blues
- 音量独立控制：0-100%可调
- 实时拍号显示：4拍可视化指示器
- 🎹 原生合成伴奏：
- 🎵 口琴伴奏：
- 模拟真实口琴音色（多振荡器合成 + LFO颤音）
- 在强拍（1、3拍）演奏Blues Riff
- 独立音量控制
- 🎸 吉他伴奏：
- Karplus-Strong算法模拟拨弦音色
- 跟随和弦进行自动演奏
- 支持扫弦和闷音效果
- 自动生成属七和弦
- 独立音量控制
- 🎵 口琴伴奏：
- 🎸 经典音频伴奏（新增）：
- 使用真实录音的Blues伴奏音轨
- 智能预加载：页面加载时自动预加载所有可用音频，确保播放无延迟
- 实时速度调节：根据BPM自动调整播放速度（0.5x-2.0x）
- 无缝循环播放：支持设置循环起止点
- 可视化状态：绿点标识已预加载的调性
- 支持12个调性（目前已配置A调）
- 多种Blues节奏型练习
- 节拍器功能
- BPM可调节
- 综合实战练习
- 音阶、和弦、节奏融合
丰富的和弦库和指法图解：
- 常用和弦指法：大三、小三、七和弦等多种类型
- 交互式指板显示：清晰的可视化指法图
- 多维度筛选：按和弦类型和根音快速查找
- 替代指法支持：提供多种演奏选择
无需后端数据库的本地访问统计功能：
- 实时统计：自动记录每个页面的访问次数
- 访客分析：
- 总访问次数统计
- 访问页面数统计
- 会话次数统计（30分钟超时）
- 今日访问次数
- 热门页面排行：按访问次数展示 Top 5 页面
- 时间追踪：记录首次访问和最后访问时间
- 数据管理：
- 导出统计数据（JSON格式）
- 清除所有统计数据
- 数据导入恢复功能
- 隐私保护：所有数据存储在浏览器本地 localStorage，不上传服务器
- 悬浮展示：右下角悬浮按钮，点击展开详细统计面板
精准的实时调音工具，帮助你快速调好吉他：
- 实时音频分析：使用Web Audio API + FFT算法精确检测音高
- 标准调音支持：支持6根弦标准调音 (E2, A2, D3, G3, B3, E4)
- 可视化反馈：
- 实时频率显示
- 音分偏差指示器（±50音分范围）
- 颜色编码精度提示（绿色=完美，黄色=接近，红色=偏离）
- 智能识别：自动识别最接近的音符并显示调整方向
- 历史数据追踪：记录调音过程，便于分析
- 前端框架：React 18
- 构建工具：Vite
- 路由：React Router 6（HashRouter）
- 样式：Tailwind CSS
- 动画：Framer Motion
- Web Audio API：实时音频处理和分析
- FFT算法：频域分析和音高检测
- HPS算法：谐波乘积谱精确检测基频
- 音频合成：
- 振荡器（Oscillator）
- 增益控制（Gain）
- 滤波器（BiquadFilter）
- LFO（低频振荡器）
- Node.js 14+
- npm 或 yarn
npm installnpm run dev访问 http://localhost:5173 即可查看应用
npm run build构建产物将输出到 dist 目录
# 1. 构建项目
npm run build
# 2. 登录云开发
npx @cloudbase/cli login
# 3. 部署到静态托管
npx @cloudbase/cli hosting:deploy ./dist -e cloud1-8g1pwz868e1c211b- 构建项目：
npm run build - 登录 腾讯云开发控制台
- 进入环境 → 静态网站托管
- 上传
dist目录中的所有文件
- 线上地址: https://cloud1-8g1pwz868e1c211b-1302374225.tcloudbaseapp.com/guitar-app
- 环境ID:
cloud1-8g1pwz868e1c211b
little-guitar/
├── public/ # 静态资源
├── src/
│ ├── components/ # 可复用组件
│ │ ├── ChordPractice/ # 和弦进行练习组件
│ │ ├── ScalePractice/ # 音阶练习组件
│ │ ├── RhythmPractice/ # 节奏训练组件
│ │ ├── Improvisation/ # 即兴创作组件
│ │ ├── Navbar.jsx # 导航栏
│ │ └── Footer.jsx # 页脚
│ ├── pages/ # 页面组件
│ │ ├── HomePage.jsx # 首页
│ │ ├── TunerPage.jsx # 调音器页面
│ │ ├── BluesPage.jsx # Blues练习页面
│ │ └── ChordFinderPage.jsx # 和弦查找器页面
│ ├── utils/ # 工具类
│ │ ├── drumKit.js # 鼓组音频合成
│ │ └── accompaniment.js # 伴奏音频合成（口琴/吉他）
│ ├── App.jsx # 应用入口
│ ├── main.jsx # 渲染入口
│ └── index.css # 全局样式
├── index.html # HTML 模板
├── tailwind.config.js # Tailwind 配置
├── vite.config.js # Vite 配置
└── package.json # 项目依赖
- 点击导航栏进入"调音器"页面
- 点击"开始调音"按钮（浏览器会请求麦克风权限）
- 选择要调的弦（1-6弦）
- 弹奏对应的弦，观察：
- 频率显示：当前检测到的频率
- 音符显示：最接近的音符
- 指针位置：偏左=音低，偏右=音高，居中=准确
- 颜色提示：绿色=完美，黄色=接近，红色=需调整
- 根据指示调整琴弦松紧，直到指针居中且显示绿色
- 进入"Blues 即兴"页面
- 选择练习模式：
- 和弦进行：练习Blues和弦变化
- 音阶练习：学习Blues音阶位置
- 节奏训练：培养节奏感
- 即兴创作：综合实战
- 选择调式（A、C、E、G等）
- 选择进行类型（12小节/6小节）
- 调整BPM速度（建议初学者从60-80开始）
- 配置伴奏：
- 开启鼓声，选择节奏型
- 可选：开启口琴伴奏
- 可选：开启吉他伴奏
- 点击"播放"开始练习
- 跟随高亮的和弦提示演奏
- 进入"和弦查找"页面
- 选择根音（C、D、E等）
- 选择和弦类型（大三、小三、七和弦等）
- 查看指法图：
- 黑点表示按弦位置
- 数字表示使用的手指
- X表示不弹该弦
- O表示空弦
- 查看和弦组成音信息
- 零延迟音频分析：使用
requestAnimationFrame实现实时处理 - 高精度频率检测：32768点FFT + HPS算法
- 纯前端音频合成：无需音频文件，使用Web Audio API动态生成
- React Hooks优化：使用
useCallback、useRef避免不必要渲染 - 音频节点复用：减少内存占用
- 异步处理：音频处理不阻塞UI
- 响应式设计：完美适配桌面和移动设备
- 流畅动画：Framer Motion提供丝滑的交互体验
- 即时反馈：所有操作都有清晰的视觉和听觉反馈
