Folia 的 lofi 听感是怎么算出来的Web Audio 效果链四路走读【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-majorFolia 是以歌词动画出名的音乐播放器它的 Web Audio 效果链不引用任何采样文件黑胶底噪、磁带抖动、饱和染色与大厅混响全靠浏览器原生音频节点实时合成凑出整套复古听感。这篇走读笔记按音色、时间、空间、噪底四路拆开它参数均对照过源码。从开一段 lofi 听起我把 lofi 预设打开按下播放键。鼓点进来之前先垫着一层很细的沙沙声像唱针压上盘面鼓声偏暖偏闷中频微微鼓起高频像隔了一层纱放到尾最后一个和弦收掉之后声音并不立刻断而是拖出一小段带混响的尾巴偶尔还有那么一两处整句旋律的音高慢慢往上飘一点又落回来像转速不稳定的老机器。听着像加载了采样但效果链的代码里没有一处指向音频文件。这些声音都是算出来的——谁在算、怎么算往下看。四路声音四组节点四件事四条路音色路管声音像什么时间路管音高稳不稳空间路管人在哪个房间噪底路管安静处有什么。十个均衡器频段加九个效果旋钮全部分进这四格里。路主要节点听感作用音色10 段 BiquadFilter 两个 WaveShaper均衡器打底tanh 饱和与阶梯碎化把波形做脏时间DelayNode 两个 LFO 振荡器12ms 延迟线被慢速调制音高漂移出磁带味空间ConvolverNode 分裂/合并节点2.2 秒脉冲铺出大厅中侧拓宽撑开声场噪底循环 AudioBufferSourceNode 带通滤波黑胶嘶声与爆点垫在音乐底层后文按这个顺序走。串行路径是高通→低通→饱和→碎化→wow 延迟→立体声拓宽→压限器→补偿增益混响与噪声是两条并行支路节点清单见effectNodes.ts。音色路均衡器打底饱和与碎化曲线怎么把波形做脏音色路是三段式一段安静的均衡器负责像音乐两条曲线负责不像干净的音乐。十段滤波从 31Hz 排到 16kHz首段 lowshelf 管低频整体抬落末段 highshelf 管高频中间八段 peaking钟形滤波Q 统一 1.4每段 ±12dB。节点在 audioEqualizerGraph.ts 里随音频上下文创建一次此后只动增益、不动结构改增益走setTargetAtTime做 15ms 平滑拖滑块听不到咔哒声。频段表定义在 audioEqualizer.ts另有一个容易忽略的钳制每个滤波器频率都被压在采样率 × 0.475 以内离奈奎斯特频率太近响应会开始变形。饱和用一个 WaveShaper装转移曲线的节点承载一条 tanh 曲线shape 1 amount × 4。旋钮拉满时峰值信号约 20% 总谐波失真预设常用值停在 5% 上下——所以它加的是温暖不是破音。节点开了 4x 过采样因为软削波产生的谐波会越过奈奎斯特频率混叠后的谐波正是发毛听感的来源。更讲究的一步在 effectSources.tsmeasureSaturationCompensation先让一个 0.5 幅度的参考正弦过曲线量出能量被抬了多少再把补偿系数反向乘回曲线。专业工具管这叫 loudness matched翻译过来就是只加颜色、不加音量。碎化同样是 WaveShaper曲线是一张 8192 点的楼梯。等效位深按bits 16 − √amount × 12计算从 16bit 一路掉到 4bit对 amount 开方是为了让人耳最敏感的 8~10bit 区间落在滑块中段而不是最末端。量化本身只有一行Math.round(input × steps) / stepssteps 取 2^(bits−1)最少 2 级。时间与空间路12ms 延迟线调制与 2.2 秒脉冲生成时间路的全部家当是一条延迟线空间路的全部家当是一段白噪声脉冲。磁带抖动的物理来源是转速不稳换到数字域就是延迟时间在极小范围内缓慢变化。wowBranch.ts 把延迟线基准拉到 12ms再让两个低频振荡器同时往delayTime上叠——像两只手一快一慢地推同一个旋钮0.7Hz 的慢 wow深度随旋钮最多 4.5msamount × 0.00456.8Hz 的快 flutter深度最多 0.6ms。慢的负责整句旋律一起飘快的负责细微颤音老磁带两条都有。大厅混响是并行发送结构干信号直通输出湿信号从压限器之后分出去进 ConvolverNode拿一段脉冲响应做房间回声指纹卷积的节点再汇回输出。脉冲响应在 reverbBranch.ts 首次开启时现算2.2 秒白噪声包络按 (1 − t)^2.8 指数衰减。旋钮推大时湿腿升到0.75 × amount干腿同时降到1 − 0.2 × amount——相当于原声与回声两只音量旋钮反向微调总电平因此稳得住声音不会被炸开。拓宽走中侧M/S处理信号先分裂成左右四根增益做交叉馈送直达(1 width) / 2、交叉(1 − width) / 2width 从 0 到 2中点 1 是原样。链尾的压限器则三个参数联动阈值-6 − 26 × punch、比率1 7 × punch、软拐点30 − 18 × punch压掉的响度再由补偿增益补回最多 3dB——动态是压出来的响度是补回去的。两条并行支路和 wow 共用一套延迟释放关闭时先淡出800ms 后才真正拆节点effectBranchRelease.ts统一封装。这 0.8 秒里再打开节点原封还在省掉反复创建 ConvolverNode 带来的爆音。噪底路3 秒循环缓冲的 Web Audio 噪声生成黑胶声最反直觉的一点它不是录下来的是掷出来的。noiseBranch.ts 每次开启时现算一段 3 秒双声道缓冲每个采样点先叠一层幅度 0.12 的随机嘶声再以 0.0007约 0.07%的概率掷出一个 ±1 的爆点爆点随后每采样乘以 0.88 快速衰减、按 0.9 的权重叠回。稀疏的爆点加持续的低嘶正是唱片上咔、咔、滋的来源source.loop true让这 3 秒无限循环。噪声不直接进输出先过 2600Hz 带通Q 0.5只放行中间一段频率让沙沙声坐在音乐里而不是盖在上面。音量也不是线性的amount^1.4 × 0.55小幅度调节时更细腻再经 0.12 秒斜坡过渡。面板里碎化和噪声两个旋钮带addsNoise标记见 audioEffects.ts 的控件定义。注释写得很直白这俩的声音和播放器坏了几乎一模一样真的有人报过障——噪音最响的地方恰好在音乐最安静的小节。标出来之后噪音从哪来的答案就摆在滑块旁边。饱和和 wow 刻意不标音乐一停它们就无声不构成底噪。音量为什么必须排在最后一次踩坑与三组实测数据接线顺序里最容易翻车的位置是音量——它放在哪不是很随意吗不。音量节点最初接在混音点也就是效果链之前。麻烦在于三个效果是绝对量而非相对量黑胶噪声混在效果链的输出端音量调得再低它纹丝不动碎化按满幅的固定台阶量化信号先被衰减再进量化台阶占的比例反而变大压限器阈值固定输入一变小就够不着。修复不是拍脑袋是把整条链搬进OfflineAudioContext前后各测了一遍数据写在playbackGraph.ts的注释里黑胶噪声音量 1.00 / 0.50 / 0.25 三档前置时爆点电平恒在 -51.9 dBFS音乐每小一半、噪声相对抬 6dB后置后变成 -51.8 / -57.9 / -64.0 dBFS跟着走碎化喂一个 -12 dBFS 正弦前置时信噪比从 38.2dB音量 1.00掉到 25.8dB音量 0.25相当于凭空少了两个 bit 的位深后置后任何音量都是 38.2dB全部效果置中时两种顺序测得完全相同82.6dB 信噪比关着效果的人根本听不出差别最终顺序还打了个保险启动时console.log把链打出来decks → mix → equaliser → effects → volume → fade → analyser → out注释里写着如果哪天顺序又读成 volume 在 effects 前说明黑胶噪声已经不再听音量管了。六份配方 两个空槽一份预设 一份均衡器曲线 一整条效果链的状态这是 lofi 能一键还原卧室录音的原因。在 audioPresets.ts 里flat 全零纯净原声lofi 高通 90Hz、低通 6kHz叠 drive 0.28、crush 0.45、wow 0.32、noise 0.22、punch 0.416k 处拉 -10dB复古全套radio 只留 420Hz~3.8kHz 窄带加 punch 0.6电台味hall 把 space 拉到 0.55、width 1.3大厅感加宽vocal 高通 110Hz500Hz 与 1kHz 各抬 4dB 再点 0.08 轻混响人声往前站bass 把 31~125Hz 抬 6~3dB 配 punch 0.45下盘整体加厚。除六个内置还有 custom1、custom2 两个自定义槽各存一份曲线 效果链组合并持久化。audioEqualizer.ts里还能看到老版本 tape、vinyl 两个内置预设退役后迁入自定义槽的迁移逻辑——改预设结构时不丢用户已经存下的声音。可以带走的 5 条工程纪律走读完这条链真正值钱的不是参数表是五条纪律参数全部斜坡化所有 AudioParam 更新走rampParameffectParams.ts封装setTargetAtTime默认 30ms均衡器用 15msUI 怎么乱拖都不爆音延迟释放昂贵支路先淡出、800ms 后再拆effectBranchRelease.ts0.8 秒内反悔节点原封不动素材全部运行时现算饱和曲线、楼梯曲线、2.2 秒脉冲、3 秒噪声都在effectSources.ts里现生成包里一个音频素材都没有UI 与音频路径解耦React 状态从不进处理环均衡器节点创建一次后结构永不变audioEqualizerGraph.ts顺序靠实测数据背书接线顺序之争用OfflineAudioContext的 dBFS 数据裁决而不是听感投票playbackGraph.ts想动手的话从playbackGraph.ts的buildPlaybackGraph读起顺着effectChain.ts的apply函数看九个旋钮怎么落到节点参数再回头翻effectSources.ts的曲线生成半小时足够摸全这条链。然后把 lofi 预设复制进自定义槽把 lowpass 拧到 4kHz、noise 加到 0.4——你的专属听感就一步之遥。【免费下载链接】folia-major专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器项目地址: https://gitcode.com/GitHub_Trending/fo/folia-major创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考