🎹 Piano Sight Reading Trainer (钢琴五线谱认音练习)

一款专为钢琴学习者设计的网页应用，旨在通过互动练习提高五线谱认音能力和键盘定位记忆。

✨ 主要功能

• 🎵 交互式五线谱：

  • 同时支持高音谱号和低音谱号。
  • 随机生成音符，支持自定义音高范围。
  • 实时显示题目音符。

• 🎹 虚拟钢琴键盘：

  • 可滚动的完整钢琴键盘界面。
  • 支持鼠标/触控点击操作。
  • 键上显示音名标记。
  • 正确/错误答题时的视觉反馈。
  • 支持左移、右移、一键回中控制。

• ⚙️ 个性化设置：

  • 练习范围：自由选择练习的音高范围。
  • 谱号选择：专注练习高音谱号、低音谱号或混合练习。

• ⌨️ 键盘快捷操作：

  • 支持电脑物理键盘直接弹奏。
  • 数字键 1-7 对应八度内的白键。
  • 黑键通过相应映射键位触发。
  • 方向键 ← / → 切换八度区域。

• 📊 统计与反馈：

  • 实时判断正误，只有答对才进入下一题。
  • 统计面板显示答题表现。

🛠 技术栈

• 前端框架: React + Vite
• 样式: Tailwind CSS
• 乐谱渲染: VexFlow
• 音频引擎: Tone.js
• 图标: Lucide React

🚀 快速开始

环境要求

• Node.js (推荐 v16+ 或 v18+)

安装与运行

1. 克隆项目到本地：

   git clone <repository-url>
   cd piano-app

2. 安装依赖：

   npm install

3. 启动开发服务器：

   npm run dev

   打开浏览器访问 http://localhost:5173。

4. 构建生产版本：

   npm run build

📖 操作指南

1. 认谱：观察屏幕上方五线谱显示的随机音符。
2. 答题：在下方钢琴键盘上点击对应琴键。
3. 设置：点击左上角设置图标（⚙️）调整音域范围和谱号偏好。
4. 统计：点击统计图标（📊）查看练习数据。

---

本项目旨在帮助音乐爱好者更有趣地学习乐理知识。