画一条线怎样变成旋律：网页音频调度实践

先把空间变成音乐参数

MelodyCanvas 把横坐标解释为时间、纵坐标解释为音高、线条颜色解释为乐器。画布按 4/4 拍和十六分音符时间格采样，因此用户不需要准确点在某个音符上，系统也能得到有序事件。增加小节时，已有线条保留原来的绝对时间；增加音域时，已有线条保留原来的音高。

量化让自由绘画能够稳定播放，但也会损失一部分手势细节。产品没有假装每个像素都对应无限精确的音乐，而是把它定位为低门槛创作工具。

连续线不能变成一串生硬短音

如果每个时间格都独立播放采样，斜线会听起来像快速重复触发，长横线也可能不断重新起音。实现中会补齐同一连续线经过的时间格，并在相邻声音之间使用短交叉淡化，让音高变化连续，同时避免上一音过早截断。

真实录音样本不可能覆盖每个音高和每种设备格式。系统从邻近样本做小范围变调，并同时提供 Ogg Opus 与 AAC/M4A，让浏览器选择可播放格式；单个样本失败时回退到本地合成声音，而不是让整首作品停止。

为什么不能只依赖页面计时器

页面动画通常跟随屏幕刷新，后台标签页、手机节能和主线程繁忙都会让定时器延后。音频系统拥有自己的连续时钟，更适合安排“某个声音在未来哪个时刻开始”。MelodyCanvas 使用滚动预调度：提前安排接下来数秒的声音，再周期性补充后续事件。

播放竖线也读取音频输出时间，而不是另开一套页面秒表。这样画面跟随用户真正听到的进度，并能减少手机音频设备缓冲造成的视觉超前。

密集作品先保护声音，再降低装饰成本

大量线条可能在同一时刻触发许多声音。混音总线需要限制峰值并压缩过高响度，避免叠加削波。作品超过 400 条线时，页面会降低非关键动画和画面刷新频率，但不会因此删除音符或截断长音：视觉性能可以降级，作品内容不能悄悄改变。