放假期间给娃做了个儿童钢琴网页版,求各位拍砖

[vvong]

五一期间那几天在家带闺女,看她一直想玩平板,就想着反正是玩不如找个钢琴 app,多多少少磨磨耳朵。

应用市场翻一圈,真服了:开屏广告卡 5 秒、跳过按钮藏得贼小，小孩儿一点就跳到别的页面去了;敲几下弹一个"开通会员 xx/月";

干脆周末用 Claude Code vibe 了一个,纯网页版,挂在 Cloudflare Pages 上:

https://piano.toolkitfun.com/

横屏打开就能玩,啥都不用装,iPad / 手机 / 桌面浏览器都行。完全免费,没账号没付费没广告(没后端,localStorage 只存了最近选的歌和勋章状态)。

现在有这些东西

键盘三档可切:8 键(纯白键彩虹色)/ 15 键 / 25 键(带黑键),跟孩子能力走。

25 首儿歌,中文民谣 + 英文经典 + 古典启蒙 + 节日歌都覆盖了(小星星、欢乐颂、Brahms 摇篮曲、粉刷匠、Old MacDonald 、恭喜恭喜、月亮船 之类)。每首有"听一遍"按钮带节奏播放 + 实时高亮下一个该按的键,对完全不识谱的小孩友好。有些歌为了塞进 8 键做了移调,切到 15/25 键的话能听原调(比如生日快乐 F 大调、卡农 D 大调)。

非钢琴模式四个:动物音效(每个键一个动物叫,纯振荡器合成不是音频文件)、打鼓(8 键变成 kick/snare/hat/clap/tom)、节拍挑战(类似劲舞团的进度条,marker 滑到右端绿区就该拍)、一个简单的剧情冒险"音乐森林",20 章 60 关,每关一个目标(找最高音、跟弹片段、辨别音色之类的)。

还有录音回放,录的是音符事件不是音频流,iOS 上才稳。累计弹奏 / 通关会发勋章。

顺便说点技术决定

• React + Vite 静态站,Cloudflare Pages,bundle gzip 后 100KB 左右
• 所有乐器音色 Web Audio API 合成(三角波 + 正弦 + ADSR + 短混响),没用任何 mp3 采样,首屏不需要预加载
• 唯一的 mp3 是冒险模式的旁白,Edge TTS 离线 bake 出来的。

代码周末抠出来的,没怎么打磨,也是给女儿一边玩，一边修 bug,各位老哥要是遇到 bug 直接喷就行不用客气。

[luotuoxiaohui]

挺好的，给小孩用，

[jucelin]

赞