0. 先和大家打个招呼吧 
-
大家好，我是一名死磕原生体验的 HarmonyOS 开发者，曾任微软金牌学生大使（Gold MLSA）。一直以来，我都对“如何用技术拓展人类感官体验”充满热情。
-
你是怎么用 TRAE 把 Demo 做出来的
我本身有较强的开发背景（这个项目的原生版已经在鸿蒙端跑通了），所以这次挑战用 Web 技术复刻空间音频体验时，我没有把 TRAE 当成简单的“代码生成器”，而是把它当作一个能随时跟我 Brainstorm 并帮我踩坑的高级架构师。
最让我觉得“原来这么简单”的一刻，是使用 TRAE 全新的 Design 模式。我只用一段 Prompt 描述了产品逻辑：“一个上传照片，能在上面摆放海浪、风声标记点的编辑器”，它就直接帮我画出了逻辑极其严密的低保真线框原型图。这省去了我大量画原型的精力，直接拿着这份线框图喂给 TRAE 的 Code 模式，整个 Vue 3 的工程架构和 UI 骨架瞬间就立起来了。而在底层性能上，它帮我跨过了一座大山：Web 端的本地音轨分离和音频编码慢得让人抓狂，我把报错和瓶颈抛给它，它直接建议并帮我实现了 ONNX Runtime WebGPU 加速以及从迟缓的 FFmpeg 切换到原生的 WebCodecs，让浏览器的性能压榨到了极致。这种“遇到瓶颈 → AI 调研最优解 → 直接输出工程代码”的配合，实在是太丝滑了。实现了本次 Web 版本的整个前端架构、端侧 AI 音轨分离、HRTF 渲染管线均为本次基于 TRAE 全新开发，与鸿蒙原生版本代码完全独立！
1. Demo 简介
-
是什么：基于 Web HRTF（头部相关传输函数）技术的空间音频可视化编辑器。纯浏览器端运行，即开即用。
-
面向谁：追求内容临场感的 Vlogger、摄影爱好者，想要制作Live 现场空间音频的普通玩家，想要定制属于自己最佳听感的白噪音助眠的助眠用户，以及希望通过声音复刻往昔记忆、寻求情感陪伴的银发群体与普通大众。
-
主要功能：
AI 端侧音轨分离： 浏览器本地运行模型，将环境录音或音乐智能分离为多条独立干音轨。
3D 可视化声音摆位： 独创的双视图交互（平面照片视图 + 3D 球体雷达视图），用户只需拖拽声音图标，即可定义声音在三维空间中的方位与距离。
即刻双耳渲染与导出： 借助 Web Audio API，实时听到三维空间中的声音反馈，并一键生成可分享的沉浸式声景卡片。
2. Demo 创作思路
-
灵感来源： 人的记忆从来不只是视觉的。海边的浪声、拂过耳畔的风，这些声音的包裹感是一张二维照片无法复刻的。既然 3D 视觉消费（如3DGS）正在普及，听觉为什么还要停留在平面的单声道或伪立体声？
-
想解决的问题： 现有的空间音频（杜比 Atmos、苹果空间音频）只是让大众“被动播放”厂商的预制内容；专业混音软件门槛又极高。普通人完全没有低门槛的工具，来为自己的一张老照片亲手创作一个带有空间方位的专属声场。
-
为什么做这个方向： 我们在鸿蒙原生端已经验证了这个场景的价值。这次向 Web 端延伸，是为了实现真正的“无缝跨端共振”。我们要把空间声音的创作权交还给普通用户，不仅作为娱乐工具降维打击普通图文，更能作为社会公益的载体，为长辈复原旧弄堂、故乡蝉鸣，提供极具温度的情感疗愈。
3. Demo 体验地址（三选一）
-
在线演示网站：https://life.yby.zone/
-
几乎所有功能都且为本地，如果需要分享则需要登录。目前只支持华为账号登录，申请过抖音开放平台但因为是个人资质无法创建移动应用和Web应用，故而无法接入抖音账号登录，抱歉。个人服务器资源有限，如遇访问较慢请见谅！
4. TRAE 实践过程
从产品逻辑到线框图（Design 模式）
最初的想法只是一句话描述：“一个上传照片，能在上面摆放海浪、风声标记点的编辑器”。但光靠一句话，AI 很容易画出一个通用的图片编辑器模板，抓不住"空间音频"这个核心。我反馈了具体的信息层级要求——底部要有"音源列表"面板管理已放置的声音元素、素材库页面要按分类标签+网格卡片呈现、分享预览页要突出"佩戴耳机"提示——并明确要求"只用方框、线条、占位文字表达布局层级，不需要具体颜色字体"。TRAE Design 先读取了 6 个已有的设计规则文件，理解项目的设计系统和 orchestration 流程后，才生成了逻辑严密的线框图，跟已有的鸿蒙端视觉规范保持了一致，而不是另起一套通用模板。
709617645030076:83b2b89550aa8156ede3c2dbea722dc4_6a4cdd818da2d547d54cb378.6a4cdd818da2d547d54cb37b.6a4cdd818da2d547d54cb379:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 19:05:37)
明确产品边界，避免被"带偏"成传统音轨编辑器（Code 模式）
进入 Code 模式前，我担心 AI 会习惯性地把这类"音频+时间轴"的产品理解成常规的音轨剪辑软件。于是我专门写了一份项目背景说明喂给 TRAE，反复强调"这不是音频剪辑软件，没有时间轴概念，核心交互是二维/三维空间坐标定位"，并要求"与鸿蒙原生版本的核心交互逻辑（尤其空间定位操作方式）保持一致"。我投喂了一些鸿蒙端的实机图片，基于强大的多模态理解能力，Trae Work CN一次就Get到我的设计想法！
709617645030076:27555a3b612ea021efe6730eea1d545a_6a4dd514ec62d9bbe343a9f2.6a4dd514ec62d9bbe343a9f5.6a4dd514ec62d9bbe343a9f3:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 12:41:56)
后端复用的架构决策（跨项目工程判断）
我们在鸿蒙端已经有一套跑通的分享社区后端（Go + Gin + GORM + PostgreSQL + Redis + S3）。为了让 Web 版和鸿蒙版共享同一套分享链接体系，我提出要把这个后端"合并"过来复用。TRAE 没有直接照做，而是反问了两个关键问题：“后端是全部复制，还是只抽取分享相关部分（GET /api/shares/:id + 密码校验）？”、“数据存储怎么处理？”——这种在动手前先确认范围的方式，帮我们避免了把项目意外做成一个 Vue 前端 + Go 后端的双语言怪物工程，也让"合并"这个模糊需求变成了一个可执行、边界清晰的方案。同时Trae Work 也十分注重权限安全，对于敏感命令都需要开发者二次确认，保护了代码数字资产。运行几个命令他把拷贝了我们的文件，并根据我们Web的设计，完美重构分享页面的布局样式，从而更统一。
709617645030076:0a75c4681db70f9a9dbb6c6ddc7bc3b9_6a4dd514ec62d9bbe343a9f2.6a4e1e88ec62d9bbe343b603.6a4e1e88ec62d9bbe343b601:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 17:55:20)
视频导出性能瓶颈攻坚（FFmpeg → WebCodecs）
即便上了多线程版 ffmpeg.wasm，一分钟视频编码仍然要接近 3 分钟，用户体验完全不可接受。我把这个瓶颈直接反馈给 TRAE："ffmpeg 还是很慢，但是我们的 AI 推理速度已经非常快了，ffmpeg 是不是有更好的库或者更好的加速方法？“TRAE 先解释清楚了问题根源——ffmpeg.wasm 是把 C 写的 FFmpeg 编译成 WASM 在浏览器跑，编码器（libx264/AAC）全是软件实现，没有硬件加速，多线程版也只能提速 3-5 倍——然后给出具体方案：改用浏览器原生的 WebCodecs API，直接调用 GPU 硬件编码器，理论性能比 ffmpeg.wasm 快 10-50 倍。这次改动最终让导出体验从"等半天"变成了"几乎无感”。
709617645030076:e167cded2dd0515933f7cf04b14f3bfb_6a4dd514ec62d9bbe343a9f2.6a4e18acec62d9bbe343b518.6a4e18acec62d9bbe343b516:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 17:30:20)
5. 对应的报名审核通过的帖子链接