【Code With SOLO】用 SOLO 15分钟搭建"波形与包络"音乐教育游戏
1. 摘要
用 SOLO 开发了一款交互式音乐教育网页游戏，通过 Web Audio API 让用户"边画边听"地理解波形（音色）和包络（音量变化）这两个音频处理中的核心概念。支持录制用户声音作为采样，通过实时调制对比，直观感受两者的本质区别。
2. 背景
我是一名艺术与科技专业大二学生，在学习音频处理时发现"波形"和"包络"这两个概念经常让人困惑：
- 波形决定音色（声音听起来像什么）
- 包络决定音量变化（声音如何变大变小）
传统教学方式很难让学习者直观感受两者的区别，因此我想制作一个可以"边玩边学"的交互游戏。
3. 实践过程
3.1 任务拆解
核心需求：
1. 双画板设计：波形绘制 + 包络绘制
2. Web Audio API 生成声音
3. 麦克风录制采样（最长5秒）
4. 调制功能：波形/包络调制采样
5. 历史存档：保存/加载创作版本
6. 教育说明：实时解释每个操作的效果
3.2 SOLO 关键能力应用
第一轮：生成基础框架
- Prompt：生成包含两个 Canvas 画板的 HTML 页面，左边波形，右边包络
- SOLO 直接输出完整的 HTML/CSS/JS 代码框架
第二轮：修复绘制问题
- 问题：录制功能正常但波形/包络画板无法绘制
- 原因：三个 Canvas 共用了全局尺寸变量
- Prompt：修复多画布尺寸冲突问题
- 方案：使用
getCanvasSize()函数动态获取每个画布的实际尺寸
第三轮：添加采样和调制功能
- Prompt：添加麦克风录制功能，录制后支持波形调制和包络调制
- SOLO 生成了完整的 MediaRecorder 实现，包含音频解码和调制播放逻辑
第四轮：完善存档功能
- Prompt：添加历史存档功能，保存当前波形和包络，支持加载和删除
- 方案：使用 localStorage 持久化存储，自动生成缩略图预览
3.3 踩过的坑
| 问题 | 解决方案 |
|---|---|
| 多画布尺寸被覆盖 | 移除全局变量，每次动态获取画布尺寸 |
| 录制超时 | 添加 5 秒自动停止机制 |
| 解释文本格式错误 | 重构对象结构，正确映射预设说明 |
| 音频上下文未初始化 | 添加 initAudio() 函数在用户交互时初始化 |
4. 成果展示
核心功能：
-
波形画板（蓝色）
- 可绘制曲线或选择预设：正弦波、方波、三角波、锯齿波
- 播放时波形循环重复，决定音色
-
包络画板（粉色）
- 可绘制曲线或选择预设：ADSR、渐强、渐弱、脉冲
- 播放时音量随曲线变化，决定音量变化
-
采样录制（绿色）
- 麦克风录制最长 5 秒
- 显示录制波形的可视化
-
调制功能
- 波形调制采样 → 改变音色
- 包络调制采样 → 改变音量
- 同时应用 → 体验组合效果
-
历史存档
- 保存当前波形和包络
- 加载/删除历史记录
- localStorage 持久化存储
-
教育功能
- 实时解释文本
- 联动模式
- 底部概念卡片对比
技术栈：
- 纯 HTML/CSS/JS，无外部库
- Web Audio API（AudioContext, MediaRecorder）
- Canvas 2D 绘图
- localStorage 持久化
- 响应式设计
5. 效果与总结
学习效果：
- 用户可以亲自听到波形和包络的区别
- 通过录制自己的声音，调制后对比，更容易理解
- 预设 + 解释文本组合，降低学习门槛
典型学习路径：
1. 录制自己的声音
2. 播放原始采样
3. 选择"正弦波"预设，点击"波形调制" → 听到音色变柔和
4. 选择"渐弱"预设，点击"包络调制" → 听到声音慢慢消失
5. 选择"方波"+"ADSR"，点击"同时应用" → 听到音色空洞+音量有起有落
技术收获：
- 深入理解了 Web Audio API 的音频处理流程
- 掌握了 Canvas 多画布独立管理
- 学会了用户交互驱动的 AudioContext 初始化
可复用方法：
- 先完成核心功能，再优化细节
- 用户反馈驱动开发（根据"无法绘制"的问题重构代码）
- 教育类产品需要实时反馈，让用户"所见即所得"
感想：
作为编程小白也能轻松实现所想做的程序，对于学习过程中很多晦涩难懂的概念都能以可视化的形式实现