【生活娱乐赛道】可在线体验：luminid 轻量化的在线MIDI节奏播放器 —— 让 TRAE 帮我做了一款能玩自己 MIDI 的音游
标签： 生活娱乐
在线访问
0. 先和大家打个招呼吧 
我是谁： 可以叫我YU，一名设计学大三的独立前端开发者，平时喜欢捣鼓音乐和音游，也常把好玩的小点子做成网页 Demo。
我是怎么用 TRAE 把这个 Demo 做出来的：
这个项目的起点其实就是一句话——“我想在浏览器里播放 MIDI，并且能把它当成音游来玩”。老实说，MIDI 解析、Web Audio 实时合成、下落式轨道判定、成绩统计这些东西，如果让我一个人从零开始写，光是想清楚结构就要很久。但和 TRAE 配合的过程中，我发现自己只需要把"要什么"和"为什么"讲清楚，它就能帮我先把骨架搭起来，再一起补细节。
最让我意外的时刻是：当我把"玩家资料页要显示总 PP、Best 20 总分、游玩时间"这种需求丢给它时，它不仅实现了功能，还顺手做了称号分级和进度条。那一瞬间我觉得，原来很多看起来需要"设计半天"的东西，真的可以靠自然语言描述直接落地。TRAE 帮我跨过的最大一个坎，是 Web Audio API 和 soundfont-player 的音色加载——我自己查文档要反复试，但它能直接给出可运行的代码，并解释为什么这样组织音频上下文。
1. Demo 简介
是什么： 一个基于浏览器的 MIDI 可视化播放器 + 下落式节奏音游，支持加载本地 MIDI 文件后选择轨道、调整速度、直接游玩。
面向谁：
-
想把自己收藏的 MIDI 变成可玩谱面的音游爱好者；
-
想用浏览器快速预览 MIDI 结构、试听音乐的制作人；
-
想体验"一首歌打完能看到 PP、称号、排行榜"的休闲玩家。
主要功能：
- MIDI 播放与可视化
支持本地 MIDI 文件加载，自动解析轨道信息，使用 soundfont-player + FluidR3_GM 音色库在线合成音频，并提供播放进度、调速、循环等控制。
- 下落式节奏音游
将 MIDI 音符自动转换为可玩的下落谱面，支持 4K / 6K / 8K 轨道切换、判定线、PERFECT / GREAT / GOOD / MISS 判定、连击、FC / AP 统计，以及实时 PP 显示。
- 玩家资料与称号系统
基于 Best 20 成绩计算 Total PP，设置 39 级称号（Beginner → Transcendent），支持查看称号进度、导入 / 导出成绩、编辑用户名，并在结算时弹出 PP 变化动画。
- AI 扒谱（实验功能）
集成 Spotify basic-pitch ONNX 模型，通过 onnxruntime-web 在浏览器内将 MP3 / WAV 等音频转成 MIDI，直接加载到游戏中游玩。
界面展示：
【由于引擎原因，截图并不是实际显示效果】
2. Demo 创作思路
灵感来源：
我平时会收藏很多 MIDI 文件，也玩各类下落式音游。有一次想：如果能把任何一首 MIDI 直接变成可玩的谱面，是不是就能无限扩展曲库？市面上的音游大多只能玩官方曲目或社区上传谱面，而 MIDI 是一个非常开放的格式。于是就有了这个想法：做一个"MIDI 进来，谱面出来"的浏览器工具。
想解决的问题：
-
普通玩家很难把喜欢的歌做成可玩谱面；
-
浏览器端缺少能同时播放、编辑、游玩的 MIDI 工具；
-
音游成绩数据散落在各处，没有一个轻量级的本地统计面板。
为什么做这个方向：
生活娱乐赛道的核心是让技术服务于"玩"的体验。MIDI 作为一种历史悠久的开放格式，天然适合做成"可玩"的内容。而且整个项目可以完全跑在浏览器里，不需要后端，用户打开网页就能用，这很符合"轻量、即时娱乐"的场景。选择做音游而不是纯播放器，是因为"玩"带来的反馈比"听"更强，也更容易让用户反复打开。
3. Demo 体验地址
体验方式： 在线访问我的个站：https://yuiro.top/midi
内容会根据我的开发来一直更新
建议使用： Chrome / Edge 桌面版，以获得最佳 Web Audio 和 WebGL 性能。
4. TRAE 实践过程
整个 Demo 的开发流程大致分为以下几个阶段，每个阶段都在 TRAE 中通过对话完成：
阶段一：基础 MIDI 播放器
先让 TRAE 搭建一个能加载 MIDI、调用 soundfont-player 播放、并显示基本信息的网页。这一步主要是验证"浏览器里播放 MIDI"是否可行。
阶段二：节奏音游玩法接入
在播放器基础上扩展节奏游戏逻辑：解析 MIDI 音符为下落 Note、实现判定系统、连击与分数计算、FC/AP 判断、结算界面。TRAE 在这里帮我梳理了游戏循环（update / render）与事件处理的结构。
阶段三：成绩与资料系统
实现本地 IndexedDB 存储、Best 20 成绩统计、PP 计算、称号分级、称号进度、导入 / 导出、用户名编辑。这一步我不断调整称号阈值和 PP 权重，TRAE 每次都能快速响应并给出对应改动。
阶段四：AI 扒谱实验
最后尝试加入基于 basic-pitch ONNX 模型的音频转 MIDI 功能。TRAE 帮我完成了音频重采样、滑动窗口分帧、ONNX 推理、后处理生成 MIDI 音符事件的完整链路。
步骤截图
由于第一条对话太多了翻不上去了qwq
关键任务 Session ID
以下为本项目开发过程中关键任务的 TRAE Session ID：
-
基础 MIDI 播放器搭建结束：CN.3868548717618089:09ab8939439a6363d039cec8849981b3_69dcc8932aa53a4e26950a13.69e89e7fe111ce42b5834bbb.69e89e7f3f9a10b177c089d2:TRAE Work CN.1.0.0.1693.8b470d91-29c4-4af7-b804-7efa2fc23feb.no_ppe.T(2026/4/22 18:11:36)
-
节奏音游判定与结算系统：CN.3868548717618089:747c6794451f090d818e8612a55c0c66_69dcc8932aa53a4e26950a13.69ec720d2fba15965bb3a429.69ec720d7b2c592ab10d411f:TRAE Work CN.1.0.0.1693.8b470d91-29c4-4af7-b804-7efa2fc23feb.no_ppe.T(2026/4/25 15:50:59)
-
玩家资料、称号与 PP 系统：CN.3868548717618089:747c6794451f090d818e8612a55c0c66_69dcc8932aa53a4e26950a13.69ec720d2fba15965bb3a429.69ec720d7b2c592ab10d411f:TRAE Work CN.1.0.0.1693.8b470d91-29c4-4af7-b804-7efa2fc23feb.no_ppe.T(2026/4/25 15:50:59)
附：已通过的报名帖
感谢评审阅读，希望这个 Demo 能让更多 MIDI 和音游爱好者找到乐趣！
作为设计学大三的学生，能做到Web Audio实时合成+下落式轨道判定+39级称号系统+AI扒谱（basic-pitch ONNX），技术广度令人佩服。特别是AI扒谱用onnxruntime-web在浏览器端做音频转MIDI的实验功能，这个技术选型很有前瞻性。