https://github.com/nikaple/auto-chord
https://github.com/nikaple/auto-chord
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nikaple/auto-chord
- Owner: Nikaple
- License: other
- Created: 2025-05-06T02:02:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-15T15:54:50.000Z (about 1 year ago)
- Last Synced: 2025-10-30T14:35:49.748Z (8 months ago)
- Language: TypeScript
- Size: 362 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 自动和弦 (Auto Chord)
自动和弦是一个交互式网页应用，允许用户通过键盘按键或按键组合来播放不同的音乐和弦。该应用旨在为音乐学习者、作曲家和音乐爱好者提供一个便捷的和弦演奏工具，帮助他们探索和学习不同的和弦结构。
## 功能特点
- 支持多种和弦类型（三和弦、七和弦、九和弦等）
- 键盘控制和鼠标点击两种操作方式
- 实时显示当前播放的和弦和包含的音符
- 可调整音色、音量和ADSR包络参数
- 现代响应式UI设计
- 支持不同调性的转换和演奏
- 和弦级数（罗马数字）标记功能
- 支持和弦转位显示
## 在线演示
访问 [GitHub Pages 演示](https://nikaple.github.io/auto-chord/) 体验在线版本。
## 技术栈
- Vue 3 + TypeScript - 前端框架
- Web Audio API - 音频处理
- Pinia - 状态管理
- Vite - 构建工具
## 开发设置
### 前提条件
- Node.js (v16.0.0+)
- npm (v8.0.0+)
### 安装依赖
```bash
npm install
```
### 开发环境运行
```bash
npm run dev
```
### 构建生产版本
```bash
npm run build
```
### 运行测试
```bash
npm run test
```
## 部署
项目配置了自动部署到 GitHub Pages 的工作流。当您将代码推送到 `main` 分支时，GitHub Actions 将自动构建并部署到 GitHub Pages。
### 手动部署
1. 构建项目
```bash
npm run build
```
2. 将 `dist` 目录部署到你喜欢的静态网站托管服务
## 使用说明
### 和弦类型切换
使用数字键和 Shift 键组合来切换不同的和弦类型：
| 按键 | 和弦类型 | 按键 | 和弦类型 |
|------|----------|------|----------|
| 1 | 小三和弦 | ⇧+1 | 大三和弦 |
| 2 | sus4和弦 | ⇧+2 | sus2和弦 |
| 3 | 小七和弦 | ⇧+3 | 大七和弦 |
| 4 | 属七和弦 | ⇧+4 | 小大七和弦 |
| 5 | 小六和弦 | ⇧+5 | 大六和弦 |
| 6 | 减三和弦 | ⇧+6 | 增三和弦 |
| 7 | 小九和弦 | ⇧+7 | 大九和弦 |
### 键盘布局
#### 第二排键位 (S-L) 映射到C大调的基础和弦：
- **S D F G H J K L**: 白键，用于演奏基本和弦
- 键位按照钢琴键盘排列，从C到C跨越一个八度
#### 第一排键位 (E/R/Y/U/I) 映射到黑键和弦：
- **E**: C♯/D♭
- **R**: D♯/E♭
- **Y**: F♯/G♭
- **U**: G♯/A♭
- **I**: A♯/B♭
#### 第三排键位 (Z-,) 用于演奏七和弦：
- **Z X C V B N M ,**: 按照白键的排列对应七和弦
### 调性选择功能：
- 使用调性选择下拉菜单选择不同的调性
- 通过升/降半调按钮（♯/♭）快速切换调性
- 当前调性始终显示在界面中
- 键盘上的按键将根据选择的调性自动映射到相应的和弦
### 和弦显示功能：
- 实时显示当前和弦名称和组成音符
- 显示和弦类型（如大三和弦、小七和弦等）
- 显示和弦转位状态
- 在大调音阶中显示和弦级数（罗马数字标记）
## 项目结构
```
src/
├── components/ # Vue 组件
│ ├── ChordDisplay.vue # 和弦显示组件
│ └── Keyboard.vue # 键盘组件
├── composables/ # Vue 组合式函数
│ └── useKeyboardHandler.ts
├── stores/ # Pinia 状态管理
│ └── chordStore.ts
└── utils/ # 工具函数
├── music.ts # 音乐相关工具
└── chordUtils.ts # 和弦工具函数
```
## 贡献指南
欢迎提交 Issue 和 Pull Request。在提交 PR 之前，请确保：
1. 更新测试用例
2. 更新相关文档
3. 遵循现有的代码风格
4. 添加必要的注释
## 许可
ISC License