# 音乐简谱编辑器

**Repository Path**: ArcherPeng/music-score-editor

## Basic Information

- **Project Name**: 音乐简谱编辑器
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-19
- **Last Updated**: 2026-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎵 简谱编辑器 Music Score Editor

一个功能完整的**在线简谱编辑器**，纯前端实现，无需后端服务。支持简谱/五线谱/双视图/源码四种视图模式，可导出 PDF 和打印。

## ✨ 功能特性

### 🎹 多视图模式
- **简谱视图** — 标准数字简谱渲染，支持高低八度、升降号、附点、连音等完整记谱
- **五线谱视图** — Canvas 绘制的五线谱，自动将简谱音符映射到标准五线谱位置
- **双视图模式** — 简谱与五线谱同屏对照显示
- **源码视图** — 文本源码直接编辑，适合快速输入和批量修改

### 🎼 音符与记谱
- **音符输入**：1-7 音符、0 休止符，支持工具栏按钮和键盘快捷键
- **时值控制**：四分、八分、十六分音符，附点音符
- **音高修饰**：高八度 `^`、低八度 `v`、升号 `#`、降号 `b`
- **小节线**：单小节线 `|`、双小节线 `||`、终止线 `|]`
- **连音**：`(5 3)` 语法支持连音记号
- **延长线**：`-` 短横线表示延长
- **省略符号**：`...` 长横线表示省略段落
- **延音记号**：`~` 在音符上方显示 fermata 标记（如 `5~`）
- **小节号**：自动在每行左上角显示当前小节号

### 🎤 歌词系统
- 歌词与音符绑定，精确对位
- 支持**拖腔**（melisma）— 一个音符对应多个歌词音节
- 点击歌词区域即可**内联编辑**
- 无歌词音符自动留空

### 🎨 常用符号
- 反复记号（反复始 / 反复终）
- 延长记号（fermata）— 可作为独立符号或附加在音符上
- 省略符号（长横线）
- 力度标记（pp、p、mp、mf、f、ff）
- 渐强 `<` / 渐弱 `>` 发夹形记号（hairpin）
- 速度标记：`rit.`（渐慢）、`a tempo`（恢复原速）、`accel.`（渐快）
- 声部组花括号 `{ }`（多声部左侧大括号）
- 换行控制

### ⌨️ 键盘快捷键
| 快捷键 | 功能 |
|--------|------|
| `1` - `7` | 输入对应音符 |
| `0` | 输入休止符 |
| `←` / `→` | 选择上/下一个元素 |
| `Delete` / `Backspace` | 删除选中元素 |
| `Ctrl+Z` | 撤销 |
| `Ctrl+Shift+Z` | 重做 |

### 📄 导出与打印
- **PDF 导出** — 高质量 PDF 文件生成（基于 jsPDF + html2canvas）
- **浏览器打印** — 打印优化样式，自动隐藏编辑界面

### 📝 乐谱信息
- 曲名、作曲者、作词者
- 调号（C、D、E、F、G、A、B 及其升降调）
- 拍号（2/4、3/4、4/4、6/8 等）
- 速度（BPM）

## 🚀 快速开始

### 在线使用

直接用浏览器打开 `index.html` 即可使用，无需安装任何依赖。

```bash
# 克隆仓库
git clone https://gitee.com/ArcherPeng/music-score-editor.git

# 进入目录
cd music-score-editor

# 用浏览器打开（或使用任意本地服务器）
start index.html
```

### 本地开发服务器（可选）

如果需要本地开发服务器，可以使用：

```bash
# Python
python -m http.server 8080

# Node.js
npx serve .

# VS Code Live Server 插件
# 右键 index.html → Open with Live Server
```

## 📁 项目结构

```
music-score-editor/
├── index.html      # 主页面，包含完整 UI 结构
├── style.css       # 样式表，响应式布局 + 打印样式
├── app.js          # 核心逻辑，编辑器引擎 + 渲染 + 交互
└── README.md       # 项目说明
```

## 🛠️ 技术栈

- **纯原生实现** — 零框架依赖，HTML + CSS + JavaScript
- **Canvas 渲染** — 五线谱使用 Canvas 2D API 绘制
- **jsPDF + html2canvas** — PDF 导出（CDN 加载）
- **响应式设计** — 适配不同屏幕尺寸
- **打印优化** — `@media print` 专用样式

## 🎯 源码语法参考

在源码视图中，可以直接用文本输入乐谱：

```
1 2 3 4 | 5 6 7 ^1 |    # 基本音符和小节线
#4 b7 v3 ^5              # 升号、降号、低八度、高八度
5_ 3= 5.                 # 八分、十六分、附点
(5 3)                     # 连音
5~                        # 延音记号（fermata）
- ... |: :| || |]        # 延长、省略、反复、双小节线、终止线
< >                       # 渐强、渐弱（发夹记号）
rit. a tempo accel.       # 速度标记
{ }                       # 声部组花括号
/                         # 换行
```

## 📸 截图

打开 `index.html` 即可看到完整的编辑器界面，包含：
- 顶部操作栏（新建、示例、导出 PDF、打印）
- 工具栏（音符、时值、修饰、小节线）
- 左侧边栏（乐谱信息、常用符号、力度标记）
- 中央谱面区域（简谱/五线谱渲染）
- 底部歌词行和选中信息栏

## 🤝 参与贡献

1. Fork 本仓库
2. 新建 `feat/xxx` 分支
3. 提交代码
4. 新建 Pull Request

## 📄 许可证

本项目为开源项目，欢迎自由使用和修改。