控制面板
可视反馈
第1章内容纲要与实现细节(音频图、传输与定时、时长控制)
本章聚焦于“音频内核”的搭建:不依赖任何第三方库,直接使用 Web Audio API 完成乐器合成、效果链、主总线与计时调度。我们将把所有声音事件精确安排在 120 秒(±1 秒)窗口内,并预留 ritardando(渐慢)与淡出空间。调度侧采用“时间驱动”的可预排队策略:用一个低频率的定时器不断查看“可预安排窗口”(lookahead),把即将发生的音符推进到音频时间轴上,确保播放稳定而不抖动。这样的策略与实践经验一致,Web Audio 的时序建议强调将事件与 AudioContext.currentTime 对齐,用参数插值与调度方法保证精确度与平滑度,这也是被官方最佳实践所推荐的方式[例如:高级技术与调度方法有助于稳定与顺滑过渡。((MDN Web Docs))](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques)、[Web Audio 入门中也强调使用 AudioContext 进行高精度音频时序管理。((web.dev))](https://web.dev/articles/webaudio-intro?hl=zh-cn)。
1. 音频图(Audio Graph)总体结构
音频图由以下节点构成:多声部合成器(钢琴主旋律 Synth、弦乐 Pad、竖琴/Pluck 点缀),效果器(卷积混响、短延迟、轻度压缩),峰值/电平分析器(AnalyserNode)与母线(Master)。“合成器→效果→母线”是基本路由。为了获得“柔和且有空气感”的空间,我们用程序化卷积(ConvolverNode + 自生成脉冲响应)模拟小型室内厅堂;延迟用于在旋律尾部点亮层次;轻压缩将峰值控制在温和范围,提升可听度。
这种模块化音频图的设计正符合 Web Audio API 的核心理念:以节点为基本单元搭建灵活的信号流,并允许在运行时重接与参数调制。[“这是一种高级 JavaScript API,适用于构建现代级别的音频引擎与处理。”((web.dev))](https://web.dev/articles/webaudio-intro?hl=zh-cn)。同时,最佳实践强调用 AudioParam 的时间方法(例如 setTargetAtTime、linearRampToValueAtTime)进行平滑控制,避免“参数跳跃”带来噪声或点击声。[“在需要定时和调度时,优先使用 AudioParam 的时间方法以获得更佳的结果。”((老朱独立开发))](https://ilaozhu.com/archives/2115/)。
2. 传输与时长:BPM、拍号与严格收束到 120 秒
为兼顾“抒情稳定”与“呼吸感”,本章的默认速度定为 84 BPM,拍号 3/4。按此设定,每分钟约 28 小节,2 分钟约 56 小节。我们会以“节拍”为基础单位计算每一事件的绝对“音频时间”(秒),随后将所有音符以 startTime + nBeats * (60/BPM) 的形式推入调度队列。为可控的音乐收束,最后 4 小节将预留淡出,并在后续章节加入更细的 ritardando 插值。
在 Web Audio 的世界中,“绝对时间单位是秒而不是毫秒”,AudioContext.currentTime 是全局参考时钟。[“所有绝对时间以秒计,使用 currentTime 获取在音频上下文坐标中的时间。”((掘金))](https://juejin.cn/post/7349382887571079168)。为了减少主线程的定时误差,我们采用“短周期轮询 + 提前量调度”的策略(典型 lookahead = 100ms,tick = 25ms),这与社区常见的高精度调度思路一致;对于极端苛刻的时序,有专门库提供精准调度(例如 WAAClock.js 强调对事件进行高精度安排,适用于复杂重复任务)[“WAAClock.js 可在 Web Audio 中提供高精度调度能力。”((CSDN))](https://blog.csdn.net/gitblog_00423/article/details/142089290)。
3. 原创旋律的生成“约束”与“控制度”
本章先不深挖高级生成模型,而采用“可控的规则与权重”方法:以调式音阶(如 D 大调)为基础,使用弱马尔可夫转移在“级进优先 + 偶尔跳进”的限制下生成旋律,避免连续同向大跳;节奏以八分、四分和附点构成,保证乐句的呼吸性。对和声底(Pad/弦乐)使用功能性环进(I–vi–ii–V 等),竖琴用分解和弦点缀层次。这样的“可控制度”路径是目前生成式旋律常见的工程化方案之一,强调“在生成时根据额外输入对结果进行约束”,例如以和声、轮廓或风格作为控制条件,[“旋律生成算法的可控制性可由和声、旋律曲线与流派等条件限定。”((CSDN))](https://blog.csdn.net/suiyuejian/article/details/112618986)。
后续章节将引入更灵活的曲式层次控制与变奏策略,并在必要时探讨更复杂的调式过渡与借用和弦。不过本章目标是“先得到稳定可听”的 120 秒作品,且具备性格明确的主旋律与柔和空间感。
4. UX 与可访问性:轻量界面与实时反馈
作为顶尖 UX 设计的基本要求,本章界面采用“暗色玻璃拟态 + 柔和渐变”,搭配清晰的层级与对比,主操作区将播放、停止、重播置于头部显眼位置;参数控制在左侧网格布局中对齐;可视反馈(进度、能量、母线电平)以细节图形表达,减少认知负担。键盘快捷键将在后续章节加入(Space 播放/暂停、R 重播);ARIA、可达性标签与高对比模式也会逐步强化。
5. 审美目标与声明
本项目致力于为您生成一段“优雅、抒情、富于歌唱性”的旋律,具有温柔的和声色彩与细腻的动态变化。对于“比所有柴可夫斯基创作的音乐更优美”的目标,我们将以旋律弧线、和声张力与人性化触键尽可能贴近您的审美期待;但“优美”具有高度主观性,我们不会做绝对比较或硬性承诺。我们会在风格上从浪漫主义音乐的表达性与柔性结构中汲取灵感(例如抒情旋律、色彩丰富的和声、自由的节奏呼吸),但不引用或模仿任何特定作品,确保原创性。[“浪漫主义音乐强调旋律抒情性、和声色彩与结构的伸缩性。”((知乎))](https://www.zhihu.com/question/316325808)
6. 工程化参考
- Web Audio API 的高级技术与时序调度方法,强调参数插值与节点路由可塑性。[参考:高级技术与实践。((MDN Web Docs))](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques)
- Web Audio 入门,概览 API 的能力与目标场景。[参考:入门导引。((web.dev))](https://web.dev/articles/webaudio-intro?hl=zh-cn)
- 关于使用 AudioParam 等时间方法的最佳实践翻译,总结了参数控制与音质的关系。[参考:最佳实践。((老朱独立开发))](https://ilaozhu.com/archives/2115/)
- 音频定时的准确性与“使用秒为单位”的时间线,强调 currentTime 的核心地位。[参考:时间坐标。((掘金))](https://juejin.cn/post/7349382887571079168)
- 高精度调度的第三方思路(本章未使用库,仅作为方法学参考)。[参考:WAAClock.js。((CSDN))](https://blog.csdn.net/gitblog_00423/article/details/142089290)
7. 本章交付清单
- 音频上下文、母线、效果链(卷积混响、短延迟、压缩)初始化。
- 三种声部(钢琴、弦乐、竖琴)的合成器封装,以及力度/包络/滤波的“人性化”参数响应。
- 生成式旋律与和声底的“确定性”生成器(Seed),可复现。
- 全局传输(Transport-like)控制:BPM、拍号、总小节与“严格 120 秒”收束。
- 可视反馈:进度条、能量条、总线电平;SVG 曲式结构图。