Update midi editor
This commit is contained in:
@@ -15,7 +15,9 @@
|
||||
- 移动音符:拖拽音符块调整位置和音高
|
||||
- 调整音头:拖拽音符左边缘调整开始时间
|
||||
- 调整音尾:拖拽音符右边缘调整结束时间
|
||||
- **快捷音高调整**:Command/Ctrl + 上/下键微调选中音符的音高
|
||||
- **快捷音高调整**:
|
||||
- Command/Ctrl + 上/下键调整选中音符的音高
|
||||
- 通过功能区的移调功能来整体移动音高
|
||||
- **双击添加**:在钢琴卷帘空白处双击快速添加新音符
|
||||
- **钢琴键试听**:点击左侧钢琴键可试听对应音高
|
||||
|
||||
@@ -44,15 +46,12 @@
|
||||
### ⚠️ 重叠检测
|
||||
|
||||
- **可视化标注**:时间重叠的音符显示为红色并闪烁
|
||||
- **智能容差**:紧邻的音符(上一个结束 = 下一个开始)不视为重叠
|
||||
- **一键修复**:点击消除重叠按钮自动修复所有重叠
|
||||
- **导出提醒**:导出时如有重叠会弹出警告
|
||||
|
||||
### 📥 导入导出
|
||||
|
||||
- **MIDI 导入**:支持标准 MIDI 文件,自动解析歌词元数据
|
||||
- **MIDI 导出**:导出包含歌词信息的 MIDI 文件
|
||||
- **中文支持**:完整支持中文歌词的导入导出(UTF-8 编码)
|
||||
|
||||
### 🎨 界面特性
|
||||
|
||||
@@ -97,7 +96,7 @@ npm run preview
|
||||
|
||||
1. **导入 MIDI**:点击导入 MIDI 按钮选择 .mid 文件
|
||||
2. **编辑音符**:在钢琴卷帘中拖拽调整音符位置和时长
|
||||
3. **添加歌词**:在右侧列表中输入每个音符的歌词
|
||||
3. **添加歌词**:在右侧列表中输入句级别的歌词或单字编辑
|
||||
4. **对齐音频**(可选):导入参考音频进行对照编辑
|
||||
5. **导出文件**:点击导出含歌词 MIDI 保存文件
|
||||
|
||||
@@ -120,9 +119,9 @@ npm run preview
|
||||
| 按钮 | 功能 |
|
||||
|------|------|
|
||||
| ⏮ | 回到开头 |
|
||||
| ⏪ 2s | 后退 2 秒 |
|
||||
| ⏪ | 后退 2 秒 |
|
||||
| ▶ / ⏸ | 播放 / 暂停 |
|
||||
| 2s ⏩ | 前进 2 秒 |
|
||||
| ⏩ | 前进 2 秒 |
|
||||
| ⏭ | 跳到结尾 |
|
||||
| 选定区域 | 播放选定区域 |
|
||||
|
||||
@@ -153,19 +152,19 @@ npm run preview
|
||||
├── vite.config.ts
|
||||
├── public/
|
||||
└── src/
|
||||
├── App.css
|
||||
├── App.tsx
|
||||
├── constants.ts
|
||||
├── index.css
|
||||
├── main.tsx
|
||||
├── types.ts
|
||||
├── assets/
|
||||
├── App.css # 主样式(含主题变量、布局、组件样式)
|
||||
├── App.tsx # 主应用组件(走带、导入导出、移调等)
|
||||
├── constants.ts # 常量定义(网格宽度、行高、音域范围)
|
||||
├── i18n.ts # 国际化(中英文翻译、歌词智能分词器)
|
||||
├── index.css # 全局样式(Tailwind、根字体、主题渐变)
|
||||
├── main.tsx # React 入口
|
||||
├── types.ts # 类型定义(NoteEvent、TimeSignature 等)
|
||||
├── components/
|
||||
│ ├── AudioTrack.tsx
|
||||
│ ├── LyricTable.tsx
|
||||
│ └── PianoRoll.tsx
|
||||
│ ├── AudioTrack.tsx # 音频波形显示组件
|
||||
│ ├── LyricTable.tsx # 歌词编辑表格组件
|
||||
│ └── PianoRoll.tsx # 钢琴卷帘编辑器组件
|
||||
├── lib/
|
||||
│ └── midi.ts
|
||||
│ └── midi.ts # MIDI 导入导出工具(含 UTF-8 歌词编解码)
|
||||
└── store/
|
||||
└── useMidiStore.ts
|
||||
└── useMidiStore.ts # Zustand 状态管理
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user