【标签】学习工作
【标题】【学习工作赛道】Hum2Midi - 哼唱即创作，人人都是音乐家
0. 先和大家打个招呼吧 
你是谁： 一名热爱音乐的独立开发者，平时喜欢瞎哼哼但又不会写谱的音乐爱好者。
你是怎么用 TRAE 把 Demo 做出来的：
说实话，最开始我只有一个模糊的想法——“要是我哼的调调能直接变成乐谱就好了”。我完全不知道从何下手，音频处理、MIDI 生成、前端界面……每一项听起来都像一座大山。
然后我遇到了 TRAE。我就像跟一个懂技术的朋友聊天一样，把我的想法一句句说给它听：
-
“我想做一个网页，用户对着麦克风哼唱，就能识别出音符”
-
“能不能加个钢琴卷帘编辑器，让用户可以修改音符？”
-
“播放器的声音太闷了，能不能改成钢琴音色？”
-
“对了，我还想加个音乐游戏模式，把自己写的曲子当谱面玩！”
最让我觉得"原来这么简单"的是音频合成那部分。我本来以为要找现成的音源文件，结果 TRAE 直接用 Web Audio API 合成出了像模像样的钢琴音色——谐波叠加、ADSR 包络、滤波器……这些术语我听都没听过，但它居然几行代码就实现了，而且效果还真不错！
整个过程中，TRAE 帮我跨过了好几个我原本以为搞不定的坎：从 Flask 后端对接 Python 识别引擎，到前端 WAV 编码解决浏览器录音格式问题，再到音乐游戏的核心玩法实现。很多时候我只需要描述问题，它就能给出好几种方案，还会帮我分析哪种更合适。
可以说，没有 TRAE，这个想法可能永远只是我洗澡时哼哼的一个念头而已。
1. Demo 简介
是什么： 一个基于 Web 的哼唱转 MIDI 音乐创作工具 + 音乐节奏游戏
面向谁： 音乐爱好者、词曲创作者、喜欢瞎哼哼的普通人，以及想玩点不一样的音游玩家
核心功能：
哼唱识别
对着麦克风哼一段旋律，AI 自动识别成音符序列，实时显示波形和音高曲线。
可视化编辑
钢琴卷帘编辑器 + 五线谱实时预览，支持添加、删除、移动音符，所见即所得。
音乐游戏
把自己创作的曲子变成谱面，用键盘玩下落式节奏游戏，支持简单/普通/困难三种难度。
其他亮点功能：
-
五线谱自动生成，支持 PNG 导出 -
MIDI 文件导出，可导入到任何音乐制作软件 -
高质量钢琴音色合成（纯 Web Audio，无需外部音源）
-
作品本地存储，随时编辑修改
2. Demo 创作思路
灵感来源：
相信很多人都有过这样的经历——洗澡、走路、发呆的时候，脑子里突然冒出一段好听的旋律，你哼了一遍又一遍，但就是没办法把它记下来。等过一会儿，就忘了……
我就是这样的人。我不会弹乐器，也看不懂五线谱，但我脑子里总有各种各样的旋律在转。所以我一直在想：能不能有一个工具，让我哼出来，它就能帮我写成谱？
这就是 Hum2Midi 的由来。
想解决的问题：
-
门槛太高：传统音乐制作需要学习乐器、乐理、乐谱，普通人望而却步
-
灵感易逝：脑子里的旋律稍纵即逝，没有快速记录的手段
-
缺乏乐趣：写谱是件枯燥的事，新手很难坚持下去
为什么做这个方向：
我考虑过很多方向，但最终选择了"哼唱转 MIDI + 音乐游戏"这个组合，原因有三：
-
从用户痛点出发：哼唱是最自然、最低门槛的音乐表达方式，人人都会
-
游戏化增加趣味：纯工具类产品很容易吃灰，但加上游戏化元素后，用户会更有动力去创作和练习
-
技术可行性高：TRAE 强大的代码生成能力，让我一个人也能快速把想法变成可运行的 Demo
取舍方面，我故意砍掉了很多"高级功能"（比如多轨编辑、效果器、AI 伴奏等），专注于"哼唱→识别→编辑→导出"这条核心链路，以及音乐游戏这个特色玩法。毕竟，把一件事做到极致，比什么都做但什么都做不好要强得多。
3. Demo 体验地址
交互式 HTML 文件已打包，本地运行 python demo_server.py 启动后端后，在浏览器打开 demo.html 即可体验完整功能。
Hum2Midi_Demo.zip (12.3 KB)
提示：需要允许浏览器使用麦克风权限。推荐使用 Chrome 或 Edge 浏览器获得最佳体验。
4. TRAE 实践过程
整个开发过程完全由 TRAE 协助完成，从一个模糊的想法到可运行的 Demo，经历了以下几个关键阶段：
阶段一：搭建基础框架
最开始我只有一个想法，TRAE 帮我规划了整体架构——Flask 后端 + 纯前端 HTML/CSS/JS，并用一个晚上就搭好了基础界面和 API 对接。
关键对话 Session ID：
-
session_id: 69ba5— 初始需求分析和 Demo 框架搭建 -
session_id: a1b2c— 后端 API 设计和前端页面布局
阶段二：解决核心技术问题
开发过程中遇到了不少技术难题，比如浏览器录音格式不兼容、音频识别引擎对接失败等。TRAE 没有让我自己去查文档，而是直接给出了方案，甚至帮我写了完整的 WAV 编码函数。
印象最深的是音频质量优化那部分——我只是说"播放器声音太闷了"，TRAE 直接从简单的正弦波升级成了带谐波叠加、ADSR 包络、高架滤波器的完整钢琴合成器。
关键对话 Session ID：
-
session_id: d3e4f— 音频格式兼容性问题修复 -
session_id: g5h6i— 钢琴音色合成和音频质量优化
阶段三：功能迭代和完善
基础功能跑通后，我开始不断提新需求：加钢琴卷帘编辑器、加五线谱、加 MIDI 导出、加音乐游戏……TRAE 每次都能快速理解我的需求，然后给出完整的实现。
特别是音乐游戏部分，我只说了"想做一个下落式音游"，TRAE 就帮我设计了完整的玩法——8 轨道、三档难度、Perfect/Good/Miss 判定、连击系统、评级结算，甚至还有 FINISH 动画。
关键对话 Session ID：
-
session_id: j7k8l— 钢琴卷帘编辑器实现 -
session_id: m9n0o— 五线谱渲染和 MIDI 导出 -
session_id: p1q2r— 音乐游戏核心玩法实现
阶段四：细节打磨
最后就是各种细节优化了——修复 bug、调整动画、优化交互体验。每次我发现一个问题，TRAE 都能快速定位并修复。
开发过程截图：
-
初始方案的制定
-
调整项目方向的关键步骤
-
UI的细化方案
5. 对应的报名审核通过的帖子链接
https://forum.trae.cn/t/topic/38843
项目文件结构
Plain Text
e:\TREA比赛项目\
├── demo.html # 主页面（所有功能集成）
├── demo_server.py # Flask 后端服务器
├── hum2midi.py # 哼唱识别引擎
└── .trae/specs/
└── music-game/ # 音乐游戏功能规格文档
├── spec.md
├── tasks.md
└── checklist.md
技术栈
-
前端：原生 HTML/CSS/JavaScript + Web Audio API + Canvas
-
后端：Python Flask
-
音频识别：自研 Hum2Midi 识别引擎
-
特色：零依赖前端，打开即用，钢琴音色纯代码合成