# UkuleleStudio

**Repository Path**: stillwindows7/ukulele-studio

## Basic Information

- **Project Name**: UkuleleStudio
- **Description**: 尤克里里简谱生成
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-01
- **Last Updated**: 2026-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎸 尤克里里简谱转四线谱工具

> 将简谱转换为尤克里里四线谱的 H5 可视化工具

## ✨ 功能特性

- 🎼 **简谱解析** - 支持标准简谱符号（音符、高低音、休止符、延音线、小节线）
- 🎸 **四线谱生成** - 自动生成可视化四线谱，每行2小节
- 🎹 **多调式支持** - 支持 C / F / G / A 四种常用调式
- 🎵 **音频播放** - Web Audio API 播放旋律，音符实时高亮
- 📝 **示例曲目** - 内置5首经典示例（小星星、生日快乐、两只老虎、茉莉花、欢乐颂）
- 📱 **响应式设计** - 完美适配手机和电脑浏览器

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

在浏览器中打开 `http://localhost:5173/`

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 📖 使用说明

### 输入格式

| 符号 | 说明 | 示例 |
|------|------|------|
| 基础音符 | 1 2 3 4 5 6 7 | `1 2 3` |
| 低音 | 逗号在前 | `,1 ,2 ,3` |
| 高音 | 单引号在后 | `1' 2' 3'` |
| 休止符 | 0（不发声） | `0` |
| 延音线 | -（延长前一音） | `-` |
| 小节线 | \|（分隔小节） | `\|` |
| 分隔符 | 空格（必需） | `1 2 3 5 \|` |

### 示例

```
1 1 5 5 | 6 6 5 - | 4 4 3 3 | 2 2 1 -
```

## 🛠️ 技术栈

- **框架**: React 18 + TypeScript
- **构建工具**: Vite
- **样式**: Tailwind CSS
- **音频**: Web Audio API

## 📁 项目结构

```
src/
├── components/
│   └── TabDisplay.tsx      # 四线谱显示组件
├── App.tsx                  # 主应用组件
├── main.tsx                 # 应用入口
├── types.ts                 # TypeScript 类型定义
├── parser.ts                # 简谱解析器
├── notation.ts              # 四线谱映射逻辑
├── audio.ts                 # 音频播放器
└── examples.ts              # 示例曲目数据
```

## 🎯 核心功能实现

### 简谱解析
- 支持标准简谱符号
- 自动识别音高和八度
- 错误容错处理

### 四线谱映射
- 根据调式自动转换音符
- 优先选择低把位指法
- 每行2小节自动换行

### 音频播放
- Web Audio API 合成音色
- 三角波模拟尤克里里音色
- ADSR 包络优化音质

## 📝 待办事项

- [ ] 添加速度调节功能
- [ ] 支持导出图片
- [ ] 添加歌词对齐
- [ ] 支持自定义调式
- [ ] 添加和弦标记

## 📄 许可证

MIT

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！