传统音乐制作软件(Ableton Live、FL Studio、Logic Pro 等)以时间线编排和 MIDI 钢琴卷帘为核心交互模型,学习门槛高、操作链路长。Doit Synth 将创作入口前移至打击垫网格——用户通过点击 24 个彩色垫即可实时触发声音,配合每垫独立的步进音序器参数(间隔、延迟、重复次数),在分钟级时间内完成一段完整的节奏型或旋律循环。
这一设计使得:
- **零基础用户**可以像使用实体鼓机一样通过触控直觉创作
- **进阶用户**可以通过和弦模式、滤波器包络、侧链压缩等专业参数深度调音
- **协作分享场景**下,用户可通过一键复制的压缩模版码将整套音色与编曲配置传递给其他用户
全链路合成而非采样回放
区别于基于采样的鼓机应用,Doit Synth 的全部声音均由实时合成生成。每个打击垫可独立路由至 8 个合成器槽位,每个槽位配备完整的振荡器、多模滤波器、独立包络发生器和声像控制。鼓声部同样由振荡器与噪声发生器实时合成,支持频率扫频(底鼓音高下降)、多击连击(拍手/滚奏)等精细参数调节。
这意味着:
- 音色具有无限调制空间,不存在采样精度或版权限制
- 同一套参数配置可通过模版码完整传递,在不同设备上获得完全一致的音频输出
- 所有合成运算在浏览器 Web Audio API 中完成,无需服务器或云端处理
| 音频引擎 | Tone.js (Web Audio API) | 8声道多音合成、鼓声部合成、全局效果链、音序器调度 |
| 状态管理 | Zustand 5 + localStorage | 24垫 × 15+ 参数的实时状态同步与持久化 |
| UI 渲染 | React 19 + Vite 7 | 响应式界面,6 个断点覆盖 360px–1400px+ |
| 代码保护 | JavaScript Obfuscator | 控制流扁平化、死代码注入、字符串数组编码 |
### 音频引擎性能指标
- **合成器声道数**:8 路独立 PolySynth,每路支持多音并发
- **鼓声部池化**:每垫独立缓存振荡器+噪声发生器实例,避免运行时 GC 抖动
- **音序器精度**:基于 Tone.Transport 的十六分音符调度,采样级时间精度
- **侧链压缩**:底鼓触发时自动将合成器 1-4 增益从 0.7 压缩至 0.08,实现泵浦效果
- **全局效果链**:混响(可调湿度)、磁带失真(0.04 失真度)、主低通滤波器
### 预设生态与社区分发
| 预设类型 | 数量 | 类别 |
|----------|------|------|
| 合成器预设 | 24 | 贝斯(5)、铺垫(5)、主奏(7)、铃音(5)、效果(5) |
| 鼓预设 | 13 | 底鼓(4)、军鼓(3)、踩镲(3)、拍手(2) |
预设系统的核心创新在于**可移植性**:用户调制的全部参数(振荡器波形、包络形态、滤波器参数、音序器步进配置)可通过 LZString 压缩为一段可复制的文本码,在任意设备上完整还原。这使得音色设计成果可以脱离平台限制进行社区流通,类似于 Chiptune 和 Demoscene 社区的共享文化。
## 用户体验设计
### 视觉与交互
- **像素风 LCD 面板**:复古硬件合成器的视觉语言,降低数字音频软件的陌生感
- **新拟态按钮系统**:多层阴影与内发光实现物理按键的触感暗示
- **8 色编码体系**:垫颜色与合成器槽位一一对应,用户通过色彩即可感知信号路由
- **弹跳动画反馈**:垫触发时的 squish 动画提供即时的触觉视觉同步确认
### 响应式适配
应用完整适配从 360px 小屏手机到 1400px+ 桌面显示器的全尺寸范围,包含:
- 6 个 CSS 断点的自适应布局
- 横屏/竖屏双模式
- 触摸事件防重复触发机制(300ms guard)
- `-webkit-overflow-scrolling: touch` 平滑滚动