【DeepSeek 实战】用五声音阶把电脑键盘做成“不跑调”的钢琴

把电脑键盘改造成一件随手可弹的乐器，看似只是键位与声音的简单映射，真正实现时却会遇到音阶选择、音色合成、自动播放限制和录音回放等问题。这次实践从五声音阶的容错思路出发，用 DeepSeek 协助完成一个纯前端键盘钢琴，并在多轮迭代中补齐演奏、教学与作品保存能力。

开篇回顾

程序员这双手，每天在键盘上敲几万下，敲出来的全是代码和 bug。21 期的故事接龙机靠文字接力，预告说 22 期换音符——这期兑现：把电脑键盘变成一台钢琴。同样的 24 个字母键，敲下去变成琴声，而且做了个"保底"设计——默认五声音阶，宫商角徵羽，随便乱按都不难听。零乐理、零安装，打开网页就弹，还配了节拍器、伴奏鼓点、跟弹教学和作品墙。四轮对话、~641 积分，全程在造物台（对话即所见，左边对话右边预览）完成。

引子

"会弹钢琴"是很多人的执念，卡住大家的从来不是琴，是五线谱和指法。但流行音乐里有条捷径：五声音阶（Pentatonic）——把最容易"打架"的半音音级删掉，剩下的音两两组合都不刺耳，中国民乐和无数金曲都建立在这个集合上。换句话说：只要键盘只发五声音阶的音，闭眼乱按也自带旋律感。再加上 Web Audio 能纯代码合成音色，不需要任何音频文件——这事一个页面就能干。于是照例打开造物台，一句话开造。

幕一 · 一句话需求，先交一份规格书

新建对话，需求原样发出：

"做一个键盘钢琴：电脑键盘 26 个字母键映射成琴键，默认用五声音阶（怎么按都不难听），可切换大调五声/小调五声/自然大调；用 Web Audio 合成钢琴音色，按键即发声，按下琴键高亮并有音符粒子上升效果；弹奏自动记录，弹完一键回放（回放时琴键同步亮起）；打开页面自动演示一段内置示例曲"：

这轮又是精细模式，AI 先深度思考再动手，而且出手就把边界条件拍得明明白白：字母键 A→Z 从左到右、音高从低到高顺排（新手好对应，不学 QWERTY 指法）；三个音阶全选 C 大调/A 小调家族，切换后键名永远是 C D E G A 这类自然音名，不出现升降号；浏览器禁止页面无手势出声，所以"打开自动演示"落地为欢迎层——点屏幕任意处立即播示例曲，直接按键就直接开弹。569 秒后交货（~38 积分）：四个文件，index.html、style.css、synth.js（音阶算法 + 音色合成）、app.js（交互 + 录音回放），结构一次到位。

幕二 · 第一版：按下就响，弹完能放

第一版成品，深色舞台面板上一排浅色琴键，按下变暖金、辉光、上浮，音符粒子往上飘：

预览运行界面，每个键下方小字是当前音阶下的实际音名（A=C3、F=C4……）：

弹奏自动记录成 {t, k, d}（时刻、键、时长），一键回放时琴键同步亮起；录音存 localStorage，刷新不丢。初始版演示（动图无声，看键位高亮和粒子）：

到这步"能弹"成立。但一台像样的乐器还差三块：音色表现力、节奏支撑、和作品沉淀。三轮迭代分别补齐。

幕三 · 三轮迭代：音色与八度 → 节拍器与跟弹 → 作品墙与乐谱

迭代 1：音色与八度。 这轮 AI 主动上报了一个需求冲突：你要 26 个字母全是琴键，又要 Z/X 切八度——两个需求打架了。它的拍板是牺牲 X、Z 两个琴键换八度操作，琴键从 26 个变 24 个（A–Y），屏上键盘同步隐藏这两个键。冲突是需求方没意识到的，AI 先发现先拍板还留了活口（"想用别的键切八度告诉我，我来调"）。交付：三种音色（? 钢琴 / ? 音乐盒 / ? 弦乐）、Z/X 切八度（−2~+2 封顶）、Shift 强音、程序生成混响。中途还有个小插曲：AI 怀疑弦乐信号接了双路径，自己去翻代码核实，结论是"我多虑了"——比 21 期那个 40 遍自验循环克制多了，一轮就收手：

迭代 2：节拍器与跟弹模式。 40–200 BPM 节拍器 + 两种伴奏鼓点（流行 4/4：底鼓 1、3 拍，军鼓 2、4 拍；华尔兹 3/4：底鼓第 1 拍），节拍声和鼓点是两个独立开关，可以只要鼓点不要咔嗒。重点是用弹模式：选一首内置曲（小星星五声版 / 玛丽有只小羊羔 / 沧海一声笑——三首都是五声友好曲目），下一个该按的键蓝绿色脉动高亮，状态栏提示"第 x / N 音"；按对才前进，按错只闪红抖动、不发声不前进。零乐理的人也能一分钟跟下一首曲子：

迭代 3：作品墙与乐谱。 这轮 AI 没走深度思考、直接动手（14 步）：弹完填曲名存进作品墙（localStorage），可回放可删除；回放用保存时的音阶和八度还原音高；每首作品能展开一份简易乐谱——音名 + 时值（♪ 半拍 / ♩ 一拍 / ? 两拍）+ 每 4 拍一条小节线，纯文本，等宽字体展示。预置两首示例曲让首页不空：

最终版演示（同样是弹一段五声旋律 + 一个和弦，无声动图）：

值得一提的是精细模式那份《需求要点》规格书：每轮深度思考都会把新需求并进去，四轮下来长成一份 160 多行的完整规格——音阶算法怎么算、三种音色的分音表、鼓点每拍的频率包络、跟弹状态机的每个分支、"按住 Shift 不拦、Ctrl/Meta 拦"这种键位细节全在里面。它等于先把设计文档写完，再照着文档实现自己。交付后我用 Playwright 上线实测：24 个键、三音色、节拍器、跟弹、作品墙 2 首预置全部正常，无 undefined/NaN——这期没有返修。

? 技术拆解

从对话记录里，我提炼出 5 个值得带走的技术点：

1. 五声音阶是"容错设计"，不止是乐理。C 大调五声的音级集合是 [0,2,4,7,9]（C D E G A），这个集合里任意两个音的组合都不含小二度和三全音——音乐上最刺耳的两种音程被集合论式地排除了，这就是"怎么按都不难听"的数学保证。键位映射算法一行核心：midi = base + Math.floor(i / 5) * 12 + deg[i % 5]，字母序号进、MIDI 音高出，再 440 * 2^((midi-69)/12) 转频率。产品启示：给新手的工具，先删掉会出错的选项，比加提示框便宜得多。
2. 加法合成：几 KB 代码替代 MB 级采样。三种音色全部用振荡器现算，没有一行音频文件：钢琴 = 三角波基频 + 4 个衰减更快的正弦分音 + 一段带通白噪声模拟琴槌击弦 + 指数包络；音乐盒 = 纯正弦泛音 + 4000Hz 拨齿噪声、attack 2ms；弦乐 = 两只失谐 ±4 音分的锯齿波过低通、90ms 慢起音 + 1.9s 长释放，再挂一只 5Hz LFO 推 detune 做颤音。鼓组同理：底鼓是正弦波 150Hz 指数滑到 48Hz 的"音高坠落"，军鼓/踩镲是白噪声加带通/高通。混响都不下载 IR 文件——用衰减噪声现场生成 2.5 秒脉冲响应喂给 ConvolverNode。
3. 自动播放禁令的合规落地。浏览器规定 AudioContext 必须在用户手势里 resume 才能出声，"打开页面自动演示"这个需求直接做必死。AI 的解法是把限制变成开场仪式：全屏欢迎层"点击任意处 · 先听一段示例曲"，点击即解锁并自动播放；性急的用户直接按键也能解锁，只是跳过示例。把平台限制设计成产品流程，而不是跟它对着干。
4. 录音记字母，不记音高。弹奏记录存的是 {t, k, d}（时刻、字母、时长），回放时按当前音阶和八度现算音高——切到大调五声弹的曲子，切到小调五声再回放，整首曲子自动"转调"。这本质是 MIDI 的精神：记录事件，不记录波形，数据量小一个数量级，还附赠跨音阶迁移能力。配套细节也齐：回放/示例曲/跟弹进行中的按键不记入录音（防混入伴奏）、stopPlayback 先清光所有 setTimeout 再释放高亮（防"幽灵亮键"）、保存作品时对 take 深拷贝（防后续重录清空引用）。
5. 跟弹模式是一个教得动人的状态机。核心循环：showHint()（下一键蓝光脉动）→ 命中则发声 + 前进，未命中则 flashWrong()（闪红抖动 320ms）。最妙的一条拍板是"按错不发声"——对错用视觉反馈分离，耳朵里永远只有正确的旋律，不会越按越乱；配合"按对才前进"，学习曲线变成纯正向积累。曲目选型也服务主题：三首全部能在默认五声音阶上弹全，教学内容和容错设计用的是同一套音阶体系。

代码视图

这期是四个文件：index.html（舞台面板 + 控件区 + 欢迎层）、style.css（深色舞台、金色按下态、粒子动画、脉动提示）、synth.js（音阶/频率/音名算法、三种音色合成、混响、节拍器与鼓点，挂 window.PianoAudio 和 window.Metronome）、app.js（键位构建、事件、录音回放、跟弹状态机、作品墙与乐谱）。合成与交互分文件这个切法值得抄——换音色不用动交互，加功能不用碰合成。

收尾

从"键盘敲出来的全是代码"到一台带教学和作品墙的五声音阶钢琴，四轮对话（38 + 147 + 182 + 274 ≈ 641 积分），无返修。21 期的预告兑现了：接龙的下一句，是音符。

? 点击体验我的作品：键盘钢琴

推荐的体验路径：点屏幕解锁声音、听一遍示例曲 → 闭眼乱按半分钟，体会五声音阶的"保底" → 切到 ? 弦乐再乱按一遍，感受音色差 → 开跟弹模式把《沧海一声笑》拿下 → 存进作品墙、展开乐谱看看自己的"简谱"。因为开了『允许别人改造』，你可以复制到自己的造物台继续改——比如加个录音导出 MIDI？诚实说明：作品和录音都存在浏览器 localStorage，换设备不带走；键盘布局是 A→Z 顺排（非钢琴指法），X、Z 被征用切八度；体验需要出声，开会前调好音量。

利益相关：造物台是作者团队的产品。本文侧重记录 AI 编程的实战过程，链接仅作可交互 demo 体验。

下期预告：琴弹完该上班了。23 期做个打工人仪表盘——发薪日、年假余额、项目 deadline，全部变成一屏倒计时。

抛个问题：你人生中第一首学会（或者一直想学）的曲子是哪首？评论区报菜名——下批跟弹曲目就从这里选。