哈喽，大家好！
大家好，
今天跟大家分享一个我最近做的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应用，
我们下期再见！
