为了听到代码的声音，我vibecoding了一架钢琴丨code piano

哈喽，大家好！

大家好，

今天跟大家分享一个我最近做的code piano，

它会把代码转成音乐来播放。听声音戳它👇🏻

你点一下播放，它就会一边“演奏”，一边把代码逐行跑出来。

每一行都会给一个比较简单的解释，同时对应一段旋律。

你可以一边看代码，一边听它“在干嘛”

哈哈笑死我了😂说到这里我自己都觉得挺好笑，

感觉终于无聊的生活里有一点有意思的事了。

一开始做的时候，

其实只是想让代码别那么枯燥，后来发现还挺上头的😳

一、我给它做了几种“演奏模式”

比如一个是 shot，就是比较干净的基础旋律，像正常演奏一样；🥃

然后是 soft，会在音符上加一些修饰音，听起来更柔一点🍸

还有一个 wine，红酒模式🍷 会加很多装饰音，音乐性更强一点，但有时候也会有点“花”。

我感觉soft模式比较好听。

这一刻我感觉代码、酒都是一种音乐。

这个世界上很多介质可能都是和音乐相通的吧。

同一段代码，用不同模式听起来完全不一样，这点还挺有意思的。

除了随意粘贴任何代码都可以演奏，

我还预置了一些脚本，比如 app 的代码、model 配置、还有一些 test service，

你可以试试随便选一段代码，听听它长什么声音。

下面还有一个电子钢琴的演奏区，会跟着播放位置走，

当前弹到哪里就高亮哪里，上面是五线谱在跳。

它是在“演奏代码”。对，代码演奏代码，原地循环了(◕_◕)💭

二、背后的思路，没有想象中复杂

核心就是先把代码拆开，再把它“翻译”成音乐。

一层是做结构上的映射，比如 function、if、return、class，这些不同的结构，会对应不同的节奏或者音型。也就是说，它先不是看内容，而是先看“形状”。

一层是语义映射。比如一些关键词，像 model、dictionary 这种，我会提前给它们做一些定义，这样在演奏的时候就不会每一行都一样，可以规律中有一些变化，不至于听起来太机械。

一层是处理那些没见过的词。如果一个词没有被提前定义，它也会有一个比较稳定的输出，这样整体听起来不会乱掉，至少是和谐的。

最后再做一层后处理，相当于给旋律加一些修饰音，

让它在shot、soft、wine的模式下添加不同程度的修饰音。

更像“音乐”，而不是一堆生硬的音符。

三、一个音符从头到尾经历了什么？

前端这块我用的是 react，加了一些动画库去做那些跳动的效果。

五线谱是用 VexFlow 渲染的，就是你看到上面那个在跳的音符。

下面的键盘区域会跟着当前播放位置做高亮。

音频这块我没有用真实采样的音源，是直接做的合成音。也就是说，你听到的那些钢琴声，其实都是实时生成的，不需要去找素材或者音源。

一开始我还尝试过做大提琴版本，但大提琴的弦和钢琴不太一样，映射起来比较麻烦，后来就干脆统一用电钢琴了，简单直接。

整个系统的流程也比较直观。用户把代码粘进去，点播放，前端会把代码发到解析层，做分词、做语义处理，然后按照时间轴去调度这些音符，一边渲染，一边播放，再把进度同步回前端，让界面滚动和高亮。

有一点我当时也纠结过，就是要不要给每一行加一个很“智能”的 AI 解释。

后来试了一下，会有两三秒延迟，体验不太好，

所以现在用的是比较轻量的解释方式，优先保证播放是流畅的。

如果想进一步精细化解释代码的含义再上AI吧。现在只做粗颗粒度的解释。

另外它还有一个 BPM，可以调节速度。

其实做到现在，

我觉得它更像一个“解闷”的东西，

但也不完全是。

你在听的时候，其实是在用另一种方式感受代码，有点像把语义变成了声音。

四、会比单纯盯着代码更有趣一点

这个项目整体没有特别重的前置工作，很多东西其实是直接让gemini、codex帮忙一起做的，

包括一些方案和实现路径。做一个娱乐版的话，也不需要真的去做复杂的音频采样，直接生成就够了。

大概就是这样，一个把代码变成音乐的小尝试。

如果你觉得有意思，可以自己去复现一个试试，或者也可以想想有没有别的表达方式可以加进去。

ok，我是阿星

更多AI应用，

我们下期再见！