键盘钢琴应用技术架构

1. 架构设计

2. 技术说明

• 前端框架: 原生 HTML + CSS + JavaScript (无框架依赖)
• 构建工具: 无需构建，纯静态文件
• 音频技术: Web Audio API (合成音频)
• 部署方式: EdgeOne Pages 静态托管
• 状态管理: JavaScript 模块化状态

3. 文件结构

piano-app/
├── index.html          # 主页面
├── css/
│   └── style.css       # 样式文件
├── js/
│   ├── app.js          # 主应用逻辑
│   ├── audio.js        # 音频引擎
│   ├── keyboard.js     # 键盘映射
│   └── share.js        # 分享功能
├── assets/
│   └── favicon.ico     # 网站图标
└── README.md           # 项目说明

4. 核心模块设计

4.1 音频引擎 (audio.js)

interface AudioEngine {
    context: AudioContext;
    playNote(frequency: number, duration: number): void;
    stopNote(): void;
    setVolume(level: number): void;
    setWaveform(type: OscillatorType): void;
}

interface NoteConfig {
    note: string;       // 音符名称
    frequency: number;  // 频率(Hz)
    key: string;        // 对应键盘按键
}

4.2 键盘映射 (keyboard.js)

interface KeyMapping {
    [key: string]: {
        note: string;
        frequency: number;
        octave: number;
    };
}

interface OctaveConfig {
    current: number;     // 当前八度 (3, 4, 5)
    min: number;         // 最小八度
    max: number;         // 最大八度
}

4.3 分享功能 (share.js)

interface ShareData {
    notes: string[];     // 演奏的音符序列
    tempo: number;       // 节奏速度
    octave: number;      // 八度设置
}

interface ShareManager {
    generateLink(data: ShareData): string;
    parseLink(url: string): ShareData;
    copyToClipboard(text: string): Promise<void>;
}

5. 音符频率对照表

音符	C4	D4	E4	F4	G4	A4	B4	C5
频率(Hz)	261.63	293.66	329.63	349.23	392.00	440.00	493.88	523.25
键盘键	A	S	D	F	G	H	J	K

八度频率计算

• C3 = C4 / 2 = 130.81 Hz
• C5 = C4 * 2 = 523.25 Hz

6. 背景音乐设计

类型	描述	实现方式
节拍器	稳定节拍	定时播放click音效
和弦垫	氛围和弦	Web Audio和弦合成
静音	无背景	默认选项

7. 性能优化策略

7.1 音频预加载

• 页面加载时初始化 AudioContext
• 首次用户交互后激活音频上下文
• 缓存振荡器配置减少创建开销

7.2 懒加载

• 背景音乐按需加载
• 分享功能动态导入

7.3 触摸优化

• 使用 touch-action CSS 属性
• 防止触摸滚动干扰
• 支持多点触控

8. 部署配置

8.1 EdgeOne Pages 配置

# edgeone.yaml
name: piano-app
type: static
build:
  command: echo "No build required"
  output: .
routes:
  - path: /*
    serve: index.html

8.2 部署步骤

1. 创建 GitHub 仓库
2. 推送代码到仓库
3. 在 EdgeOne Pages 控制台导入仓库
4. 配置构建设置
5. 部署并获取访问域名

9. 页面展示