第1章 · 音频内核与传输控制(Web Audio 原生)
目标:在浏览器内生成约 120 秒的原创旋律与和声底,具备实时调度、包络与效果链。
⏱️ 84 BPM · 3/4 🎼 D 大调 🎹 钢琴 + 🎻 柔弦 + 🎵 竖琴点缀 🧪 原生 Web Audio
⏳ 等待启动…

控制面板

🎚️84 BPM
🌤️偏明亮
🎛️中等
🧬确定性生成,同参数可复现
目标:120 s 拍号:3/4 总小节:56
就绪。首次播放将初始化音频上下文与效果链。

可视反馈

🎚️ 总线电平
-∞ dB
A(16)主题呈示 B(16)对比段 A'(16)变奏回归 Coda(8)

第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 曲式结构图。

本章结语 · 您现在可以直接点击“播放”试听两分钟的原创旋律

建议使用耳机或带有一定低频回放能力的音箱,以更好感受卷积混响的空间尾韵与柔弦铺底的空气感。若希望更“温暖”,请将“情绪”推向右侧并切换到 B 小调;若希望更“明亮”,保留大调并略微提升 BPM。

提示:为保证完全原创,本系统不引用任何现有乐曲的旋律或片段;它以规则/权重驱动的生成算法在线合成与调度,确保每一次在相同参数和种子下可复现、在不同参数下产生新鲜变化。

🎯 目标长度:约 120 秒 🧬 确定性 Seed:可复现 🎚️ 空间感:卷积混响 + 轻延迟 🕹️ 控制:BPM / 调性 / 情绪 / 复杂度