一个 techno 音乐机器,装在单个 HTML 文件里,渲染结果可验证
文章摘要
RACK-02 是 SSX360 做的一台「模块化 techno 机器」,它的全部——合成引擎、音序器、效果链、离线渲染器和那套模拟 Eurorack 面板的界面——都装在一个 HTML 文件里,零外部依赖,打开浏览器就能跑,存到本地也照跑不误。页面自己的元描述写得很准:「单个 HTML 文件里的生成式模块化 techno 机器。欧几里得音序、复节拍、触发条件、实时人声输入、24 位分轨导出,全在浏览器里。」
上手引导刻意写得极简:「这是一台自己造 techno 循环的小机器。按下按钮它就开始播放。不喜欢听到的?按 Reroll 换一整套新的。转动任意旋钮改变声音。就这么多——玩就是了。」(首页只有两个入口:「▶ 开始」和「我就随便看看」。)
界面按 Eurorack 的方式排布,每个模块标着 HP 宽度:Clock(8HP,Swing / Human / Density / Chaos / Duck / Master,以及一个每 8 小节自动变异的 Evolve 开关)、Kick(12HP)、Rumble(12HP,把底鼓送进长混响腔再低通并做侧链闪避,「整首曲子的地板——把它当独立分轨导出」)、Bassline(14HP,可选根音与音阶:弗里几亚、自然小调、洛克里亚、半音阶;运动方式:静止、行走、八度跳跃;振荡器:锯+方波、纯方波、FM 咆哮、脉冲/PWM、超级锯、谐波渐变)、Hats / Clap / Perc / Tom(各 6HP)、Stab(12HP)、Drone(6HP,持续的失谐双振荡器配慢速滤波)、Air(6HP,谐振噪声带,「房间的底噪和上行音效」)、Vox(实时麦克风或线路输入)、Grain(重采样器)、Cross-mod(音频率交叉调制)、Mixer、Patchbay、Output、Automation 和 MIDI out。
音序器的交互设计是全篇最见功力的地方,也是「生成式」三个字的落点:点击一个步进格会在「自动 → 强制开 → 强制关」三态间循环;Shift+点击设置棘轮(一格内 2/3/4 次重触发);Alt+点击设置触发条件(1:2、2:2、1:4、4:4、25%/50%/75% 概率、fill、not-fill);每条音轨的长度可以独立设成 2 到 32 步,不等长的轨道会彼此相位错开——这就是复节拍。贝斯线有独立的两条泳道:一条点音高(点击沿音阶升,Shift 降),一条点演奏法(点击加重音,Shift 加滑音)。每个模块右上角有两个小符号:◎ 把该模块锁住,不受 Reroll、Mutate 和骰子影响;⏜ 只随机化这一个模块。往任何模块上拖一个 wav 文件,就能在合成器声部之上叠一层采样。
演奏部分全是按住生效的瞬时键:F 是 Fill(密度和混乱度上升)、D 是 Drop(只留底鼓和低频轰鸣)、S 是 Stutter(节拍重复)、G 是 Freeze(把混响尾音挂住)、V 是 Throw(人声延迟发送与反馈拉满)、C 是 Cut(掐掉干声只留尾巴)。滤波器是双极的——中间是关,往左低通,往右高通。场景 A–D 可以存四套完整状态,再用 Chain 把它们编成走位:机器会按小节走过每个槽位并换场景,图案是硬切,旋钮是在 1/2/4 小节里渐变过去。
标题里那个让人费解的「可验证的渲染(verifiable renders)」,页面自己给了解释:导出是离线渲染的——快于实时、采样级精确、不会掉帧。可以导出循环、分轨、整曲或鼓组,分轨打包成一个 zip 且全部对齐小节线,直接拖进 Ableton 就在网格上;也可以导出 MIDI,还能选择是否把尾音包进去。自动化同理:Arm 之后在运行时转动任意旋钮,动作会被写进一条 4 小节的泳道循环下去,并被烘焙进每一次导出。Grain 模块(从机器自己几个瞬间之前的输出里切出颗粒,变调打散后再扔回去;Send 打开馈送,Spray 决定往回够多远)和 Cross-mod 模块(一个真正的振荡器以音频率接到目标参数上,「边带本身就是音色,而不是抖动」,并按 Ratio 跟踪贝斯音高,整数比保持谐和,Fine 把它拉进金属噪声)都能离线渲染,所以导出的云团和你听到的完全一致。唯一渲染不了的是实时人声——页面的说法很干脆:离线渲染里没有麦克风,所以人声得用 Capture live 实时录。
还有几处诚实到有点罕见的产品说明:托管版没法导出音频,因为「发布出去的页面只能保存很短的一份文件类型清单,而音频不在其中」——想导出音频、分轨或 MIDI,得打开你本地那份 rack.html;不过 patch 的 JSON 在托管版上是能存的。托管页面会记录匿名的聚合使用数据(哪些控件被用了、被转到多远、哪些参数被导出了),页面直说「仅聚合,无账号,无个人数据,你输入的任何东西都不会被读取。本地副本什么都不发」。MIDI out 可以用机器自己的音序器去驱动 Ableton 或硬件(需在 Audio MIDI Setup 里启用 IAC Driver)。页面右下角常驻一个负载表:CPU、每小节调度的声部数、音频延迟——旁边写着一句「导出是离线跑的,所以就算现场卡顿,重的 patch 在导出文件里也绝不会掉采样」。整个页面还做了完整的浅色/深色主题适配。
HN 评论精华
这条 Show HN 拿到 240 分、约 48 条评论。必须先说明两点实情:作者 ssx360 全程没有在帖子里发过一条评论,也没有写 Show HN 自述,所以关于实现细节的问题基本都没有答案;其次,讨论的绝对主角不是音乐,而是「单文件、零依赖」这个形态本身。
- Kuyawa 那条被顶最高的评论定下了整帖的调子:「我热爱漂亮的软件,而这就是。」他随后追加编辑:「我刚把 HTML 文件下载下来,它在本地依然作为一个单页应用正常运行,没有外部库、没有字体、没有图标,没有任何可能出问题的东西。软件就该这么做——可移植、免安装、丢哪儿都能跑。所有细节都执行得完美,致敬。」
- momojo 的共鸣带着一点心酸:「同样爱单文件、零依赖的独立程序。我的日常工作正是从我们一个主力 docker 容器里剥掉几百兆,而路上撞见这样的小项目会让我笑出来。真美。」spawrks:「我爱这个单页处理。打倒 web 框架!好机器。」fallinditch、r0b05、ad_fontes(「这是我这个月见过最酷的网页玩意」)、chandramoulyKK、macwhisperer(「乐器的未来可能是网页的」)都是同一个方向。
- 唯一一条严肃的技术抬杠来自 throwawayffffas:「我明白你的意思,但——『没有外部库、没有字体』?它需要一整个浏览器啊。」drfloyd51 的回应很漂亮:「我懂你的意思。但如果它不需要浏览器,它仍然需要一个运行时、一台电脑、电,以及印制 CPU 的技术,等等等等。一个浏览器只是桶里的一滴水。」Kuyawa 补充说也未必要浏览器,本地网页视图器不到 2MB,他自己就用 Rust 写了一个,只是因为浏览器总开着所以没用上。
- adrianwaj 顺着这个话题写了最长的一串。他在做一个同样是单文件、位置无关的 RSS 阅读器(目前 2500 行 / 101 KiB),最大的障碍是 CORS——他在自建代理和「装 CORS Unblock 扩展直连」之间做了个开关,后来折腾了 Caddy + PHP + PHP-FPM + cURL 和一个负责 URI 编码的 PHP 代理脚本,导入了约 750 个订阅源,「还是有 bug……不容易搞定,但现在浏览器里可以关掉 CORS Unblock 了,代价是这些额外的东西得一直作为服务跑着」。他的畅想是:既然有 theresanaiforthat.com,也该有个 thereisanHTMLforthat.com;甚至可以做成「每月一次的千款最佳应用目录下载」,连同它们的导入依赖一起提前做完安全审计,并设一个代码冻结/隔离期,没出问题才打包进当月那一千个。他还随口问了一句「单个 HTML 是不是很容易做安全审计?它能造成多大破坏?」——dr_kiszonka 温和地纠正:「『严格来说』它通常不只是 HTML;我同意喜欢这种单文件应用,但安全这事很复杂,因为这类页面往往依赖在线包,而那些包眨眼之间就可能被投毒。」
- akx 提了全帖最该被回答却无人回答的问题:「……为什么渲染需要『可验证』?这是什么意思?」 帖子里没有任何人(包括作者)解释过标题里的这个词,读者只能自己去页面上找答案(即离线、采样级精确、可复现的导出)。caidan 则贡献了一句用《模拟城市》老梗接的玩笑:「我知道渲染是可验证的,但样条曲线细分了吗?」
- 上手门槛是共识性的小抱怨。goatydev:「有点难用,但真的很好玩。」jose-reyes:「如果你以前没接触过类似东西会有点难懂,但它有趣到让你想试试。」cdieck88 给出了最合理的辩护:「它按钮是多,但一台真正的调音台常常看起来野得多。恭喜你的点子和成果。」
- 有一条明显的怀疑与反弹支线,同样应该如实记录。 testaccount28 只写了六个字:「看到那个字体,关掉标签页。」kkukshtel 顺势质疑整个评论区:「对一个看起来如此明显是 vibe-coded 的东西,评论区却是一片阿谀,让我怀疑这些一句话的回复是不是全是机器人。」(在另一条热情洋溢的评论下,Drupon 的回复是:「这条评论没通过图灵测试。」)nekooooo 的批评是关于品味的,也是全帖唯一一条真正的音乐批评:「挺酷,但完全没有 sauce(没有自己的味道)。去看看 ReBirth 是怎么做到有观点的。」
- 许可证问题成了这条支线的注脚。herpdyderp 问:这是用什么做的?我怎么用?许可证是什么?「我正急着找开源且非 copyleft 的网页音频播放器用在项目上。」没有作者回应。Diti 的回答混着讥讽与务实:「它是 vibe-coded 的。就当它是公有领域吧。如果它不是,那就让你最喜欢的 LLM 把这个项目洗一遍,让它变成你自己的许可证。」
- behole 贡献了最实用的一条 bug 报告:「顺便,我分享这个链接时,OpenGraph 图片是一张发票,看起来像是你自由职业工作的账单。」
- 功能请求都很具体:jsherer 想要 BPM 上限提到 174 好做 drum’n’bass 实验;noxss 想要一个可开关的背景动画选项;ktzar 提了个很打动人的需求——他儿子在 Chrome Music Lab 上作曲两年已经玩腻了,他想找一个在线的(最好也是可下载的单个 HTML)、允许在浏览器里创作不受音阶约束、任意长度旋律并配鼓组的工具,「有点像 Caustic,但是 HTML 版」。ncr100 在同一个「随机图案生成」的方向上推荐了一台 150 欧元的硬件合成器(cymaforma 的 RND),所有配置都藏在 MIDI 后面,从 USB 输出四个通道,「它是艺术项目和严肃乐器的结合体」。