为了听到代码的声音，我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应用我们下期再见