开发一个简谱学习小工具：几分钟记住 Do Re Mi 的网页应用

前言

最近在学习简谱，遇到了一个小痛点：每次看到 1 2 3 这些数字时，大脑总要停顿半拍才能反应过来对应的是 Do Re Mi。在实际演唱或练习时，这种延迟经常导致卡壳，影响流畅度。相信很多音乐初学者都有类似的困扰。为了解决这个问题，我利用业余时间开发了一个简谱学习小工具，希望通过游戏化的方式帮助大家快速建立数字与唱名之间的肌肉记忆。

介绍

这是一个纯网页应用，核心功能非常简洁：

• 即开即用：无需下载安装，也不需要注册登录，打开网页就能开始练习
• 多感官学习：点击卡片后会同时显示数字简谱和对应的唱名，并播放准确的音高，通过视觉和听觉的结合加深记忆
• 游戏化设计：提供了多个练习模式，既可以自己训练，也可以当作音乐小游戏给孩子玩

使用场景

这个工具适合以下人群：

1. 正在学习简谱的音乐初学者
2. 需要提高视唱练耳能力的学生
3. 家里有正在学琴的小朋友的家长
4. 想快速掌握数字简谱体系的任何人

体验地址

项目地址：https://happy-numbered-notation.app/

完全免费使用，欢迎大家体验并提出宝贵意见！如果觉得有帮助，也欢迎分享给有需要的朋友。

编程体会

刚经历一次 AI 重写。

原来是厚重的 nextjs+tts api，这么点小功能要拖着 1 个多 G 的 node_modules。发布，编译都很麻烦还慢。

忍不了了，直接和 AI 讨论了下，连 AI 都建议新开坑从头写，反正又不是我写，直接开干。

几个小时后，变成了 no-build 模式，vuejs + 模板、简单本地 bun 打包去缓存、装配、优化体积、预生成音频文件、无服务器直开。

干干净净，日后修改也非常方便。旧项目直接垃圾桶去干活。

其实 vibe 这么一个小项目也不需要太洁癖花几个小时重构的，但我做这个是为了以后做类似的小应用的时候，直接复用这个项目做 AI 的上下文，这就有用多了。

而且作为一个老架构师，还是着实惊讶这种架构推翻式重构现在竟然像儿戏一样，这在以前是不可思议的。

这个小工具源于一个真实的学习痛点，通过技术手段将枯燥的记忆训练变得更加有趣和高效。希望它能帮助更多人快速建立简谱与唱名之间的联系，让音乐学习更加轻松愉快。如果你也在学习简谱，或者有 AI 编程方面的问题，欢迎在评论区交流！