# piano

**Repository Path**: ytecnsong/piano

## Basic Information

- **Project Name**: piano
- **Description**: 豫唐·星空钢琴 — 数字化时代的钢琴启蒙教育平台
基于 Web 技术的在线钢琴学习工具，三个八度音域，支持键盘弹奏。趣味化引导式学习，让每个人都能在星空下实现音乐梦想。
虚拟钢琴 |  示范曲目 |  引导学习 | 曲目管理
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: https://www.ytecn.com/lab/piano
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-02
- **Last Updated**: 2026-05-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 豫唐·星空钢琴

> 点亮音乐梦想，数字化时代的钢琴启蒙教育平台

**汤阴县豫唐网络科技有限公司** 旗下创新教育产品

[![Vue](https://img.shields.io/badge/Vue-3.4-green)](https://vuejs.org/)
[![Vite](https://img.shields.io/badge/Vite-5.4-646CFF)](https://vitejs.dev/)
[![Tone.js](https://img.shields.io/badge/Tone.js-15.0-8B5CF6)](https://github.com/Tonejs/Tone.js)

## 一、项目背景

### 1.1 问题提出

钢琴作为"乐器之王"，是音乐教育的重要组成部分。然而，传统钢琴学习面临诸多困境：

- **高昂的学习成本**：钢琴购置费用高，一对一教学价格不菲
- **入门门槛较高**：传统练琴方式缺乏趣味性，初学者容易产生畏难情绪而放弃
- **反馈机制缺失**：学习者难以实时了解自己的演奏准确度和节奏掌握情况
- **教育资源不均**：优质音乐教育资源分布不均，偏远地区学生难以获得

### 1.2 解决方案

"星空钢琴"应运而生——这是一款基于Web技术的在线钢琴学习平台，旨在通过数字化手段降低钢琴学习门槛，让每一个热爱音乐的灵魂都能以趣味方式接触艺术启蒙。

### 1.3 命名由来

"星空"象征着无限可能与梦想。每个孩子的音乐梦想都如同浩瀚星空般广阔无垠。我们的愿景是成为点亮学生音乐梦想的第一盏星灯，让每一个孩子都能在数字化时代仰望属于自己的那片艺术星空。

> "仰望星空，脚踏琴键，让每一个热爱音乐的灵魂，都能找到属于自己的星辰大海。"

### 1.4 数字化教育创新

在数字化时代背景下，本项目是数字化赋能音乐教育的创新实践：

| 创新方向      | 项目实践                              |
| --------- | --------------------------------- |
| **教育普惠**  | 采用轻量化Web技术，无需安装即可使用，让优质音乐教育资源触手可及 |
| **趣味教学**  | 沉浸式星空主题设计，通过趣味化学习体验降低门槛，激发学习兴趣    |
| **个性化学习** | 支持自定义曲目导入，因材施教，满足不同学习需求           |
| **技术轻量化** | 多端适配，随时随地练习，打破传统学习的时间和空间限制        |

***

## 二、功能介绍

### 2.1 核心功能

| 功能          | 说明                              |
| ----------- | ------------------------------- |
| 🎹 **虚拟钢琴** | 三个八度音域，支持鼠标点击和电脑键盘弹奏            |
| ⌨️ **键盘映射** | 完整的键盘覆盖，左手右手分工明确                |
| 🎵 **示范曲目** | 内置多首经典曲目，实时播放示范                 |
| ✨ **轻松弹模式** | 引导式学习，高亮提示下一个音符，边看边学            |
| 📝 **曲目管理** | 支持添加、编辑、删除、导入、导出曲目              |
| 🎨 **三种标注** | 唱名(do re mi)、字母(C D E)、隐藏三种显示模式 |

### 2.2 技术亮点

- **Web Audio API + Tone.js**：专业级音频引擎，音色纯净
- **Vue 3 Composition API**：现代化前端架构，代码清晰易维护
- **响应式设计**：适配桌面和移动设备，随时随地练习
- **本地存储**：曲目数据本地保存，保护用户隐私

***

## 三、键盘映射

```
低音区：C4-B4
  白键：Z X C V B N M
  黑键：S D G H J

中音区：C5-B5
  白键：Q W E R T Y U
  黑键：2 3 5 6 7

高音区：C6-B6
  白键：I O P
  黑键：9 0

方向键：
  ← 左箭头：降低八度
  → 右箭头：升高八度
```

***

## 四、技术架构

### 4.1 技术栈

| 类别   | 技术                      |
| ---- | ----------------------- |
| 前端框架 | Vue 3 (Composition API) |
| 构建工具 | Vite 5                  |
| 音频引擎 | Tone.js 15              |
| 样式   | 原生 CSS（含星空动画效果）         |

### 4.2 项目结构

```
├── index.html              # 入口页面
├── package.json            # 依赖配置
├── vite.config.js          # Vite配置
└── src/
    ├── main.js             # 应用入口
    ├── App.vue             # 主应用组件
    ├── style.css           # 全局样式
    ├── constants.js         # 常量配置
    ├── audio-engine.js      # 音频引擎封装
    ├── demo-songs.js        # 示范曲目数据
    ├── song-manager.js      # 曲目管理（localStorage）
    └── components/
        ├── SplashScreen.vue     # 启动引导页
        ├── LoadingOverlay.vue   # 加载提示
        ├── PianoKeyboard.vue    # 钢琴键盘组件
        ├── SongPanel.vue        # 曲目选择面板
        ├── SongEditor.vue       # 曲目编辑器
        ├── KeyboardHint.vue     # 键盘提示
        ├── BgDecorations.vue   # 星空背景装饰
        └── GuideScore.vue       # 引导评分
```

***

## 五、曲目列表

| 曲目      | 难度 | 说明                |
| ------- | -- | ----------------- |
| 小星星     | 简单 | 经典儿歌，全球最知名的儿童曲目之一 |
| 两只老虎    | 简单 | 法国童谣，中文版本广泛传唱     |
| 生日快乐    | 中等 | 生日必备，节奏轻快         |
| 欢乐颂     | 中等 | 贝多芬名作，音乐入门必学      |
| 粉刷匠     | 简单 | 节奏明快，适合初学者        |
| 玛丽有只小羊羔 | 简单 | 英文经典，旋律优美         |
| 小毛驴     | 简单 | 中国儿歌，活泼可爱         |
| 摇篮曲     | 简单 | 勃拉姆斯名作，舒缓宁静       |
| 送别      | 中等 | 中国经典校园歌曲          |
| 多年以前    | 简单 | 英文民谣，优美动听         |

***

## 六、运行项目

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

***

## 七、项目愿景

本项目致力于成为**数字化时代音乐教育的创新实践**：

1. **降低门槛**：让钢琴学习不再遥不可及
2. **激发兴趣**：趣味化设计让练琴不再枯燥
3. **个性学习**：支持自定义曲目，因材施教
4. **普惠教育**：打破地域限制，让每个孩子都有机会接触音乐启蒙

***

## 八、鸣谢

- 音频技术支持：[Tone.js](https://github.com/Tonejs/Tone.js)
- 界面设计灵感：梵高《星月夜》

***

**仰望星空，脚踏琴键**

*让每一个热爱音乐的灵魂，都能找到属于自己的星辰大海。*