【正文】
自我介绍
大家好，我是一名前端开发。日常主要写业务页面，偶尔也喜欢折腾点小创意。这次参加 TRAE 创造力大赛，是想试试用 AI 能不能把脑子里那些"想做但一直没动手"的小想法快速做出来。
声音明信片是我一直想做的一个方向——声音比文字更有温度，但市面上很少有人认真做"用声音和陌生人轻轻打个招呼"这件事。借着这次比赛，用 TRAE 从需求分析一路做到可体验 Demo，前后没花多久，体验远超预期。下面是我的 Demo 和开发过程，欢迎大家体验指正。
- Demo 简介
是什么：声音明信片是一个网页应用（Web App），录 30 秒此刻真实环境声 + 写一句话，寄给一个陌生人，每天也收到一张来自远方的声音明信片。
面向谁：18-35 岁的年轻人，独居上班族、异乡漂泊者、社交倦怠者——厌倦了点赞式社交，偶尔想被一个陌生人的真实生活轻轻撞一下的人。
主要功能： 
录制此刻的声音 —— 30 秒环境声录制，实时频谱波形可视化，录完可试听、重录 
寄给陌生人 —— 写一句话 + 选城市标记，系统随机匹配一张来自远方的声音明信片 
收信与存档 —— 收到远方明信片可播放聆听，7 天后阅后即焚，支持查看历史收发记录
2. Demo 创作思路
灵感来源： 有一次下雨天我录了一段窗外的雨声发给朋友，朋友说她那边已经三个月没下雨了，听了一遍又一遍。那一刻我意识到，文字可以编，图片可以修，但 30 秒的真实环境声骗不了人——它传递的不只是信息，是一种"我在这里生活着"的在场感。声音明信片，就是想做一个地方，让你可以把这种在场感，寄给一个陌生人。
想解决的问题： ① 社交全是文字图片，声音这种最本能的表达方式被遗忘了 ② 朋友圈越来越像人设展览，没有地方可以"真实地待着" ③ 想和陌生人建立轻量连接，但现有社交软件要么太重（聊天交友），要么太浅（刷短视频），缺少一种"不需要回复、不建立关系、只是感受一下"的中间形态 ④ 独居的人每天说的话可能只有"拿外卖"，声音明信片让他们至少可以"说一句"和"听一句"
为什么做这个方向： 声音比文字更真实、比图片更立体，但又比视频更轻盈。30 秒环境声 + 一句话，是最轻量也最真实的自我表达。不需要经营关系、斟酌措辞、维护人设——录 30 秒、写一句、寄出去，不需要回复，发完就走。这是社交的"反效率"：用最慢的方式（听一段声音），传递最真实的信息。
3. Demo 体验地址
本作品采用「交互式可体验的 HTML 格式文件」方式提交，Zip 打包上传社区。
体验方式：
-
下载附件 ZIP 并解压
-
双击 index.html，在浏览器中打开（推荐 Chrome / Edge）
-
即可完整体验：录制声音 → 写一句话 → 寄出 → 收到远方明信片
录音功能需在 https:// 或 file:// 协议下使用，部分浏览器需授权麦克风。若麦克风被拒，可点击首页"跳过录制·直接体验收信"快速体验完整收信流程。
声音明信片.zip (1.2 MB)
4. TRAE 实践过程
本项目全程使用 TRAE IDE 完成开发，以下是完整流程：
▍步骤一：需求分析与技术选型
-
阅读《初赛规则.md》与报名创意文档，确认提交方式为「交互式 HTML Zip 打包」
-
分析创意核心三步流程：录制 → 写话 → 寄出/收到
-
确定纯前端单文件方案：原生 HTML/CSS/JS + MediaRecorder API + localStorage/IndexedDB
-
输出《声音明信片 HTML 实现可行性分析》文档，逐项评估 13 项功能的可行性，确认 10 项可纯前端实现、3 项用预置数据模拟
▍步骤二：页面骨架与 6 屏搭建
-
用 TRAE 生成单页多屏切换结构：首页 / 录制页 / 写话页 / 匹配等待页 / 收到明信片页 / 我的明信片页
-
复用创意展示页的深色高级感配色（#0A0E1A 背景 + #8BA4D0/#B8A9D4 渐变）
-
实现城市选择器（20 城）、返回导航、Toast 提示等通用组件
▍步骤三：核心录音功能
-
接入 MediaRecorder API + getUserMedia 实现 30 秒录音
-
用 AnalyserNode + Canvas 绘制实时频谱波形
-
实现试听、重录、权限拒绝兜底（自动降级为本地音频文件上传）
-
录音 Blob 存入 IndexedDB，元数据存入 localStorage
▍步骤四：寄出与匹配逻辑
-
实现写话页（50 字限制 + 字数计数 + 明信片预览）
-
寄出后从预置明信片池随机匹配（排除同城 + 会话内去重）
-
匹配等待页动画（旋转 loader + 跳动点 + "信号穿越山川"文案）
▍步骤五：收信与我的明信片
-
收到明信片页：展示城市/时间/波形/消息/署名，点击播放真实音频
-
我的明信片页：收到/寄出双 Tab，7 天倒计时，过期自动清理
-
每日一张限制（localStorage 记录）+ 开发者模式重置按钮（方便评审多次体验）
▍步骤六：真实音频资源对接
-
将用户提供的 3 段真实录音（人不可能不焦虑 / 少年 / 执行力）复制到 assets/preset/
-
改造 PRESET_POOL，3 张明信片绑定真实音频文件（audioUrl 字段）
-
重构播放逻辑，统一走 播放真实音频
-
移除原合成环境音方案，只保留 3 张真实音频明信片，质感更真实
关键任务对话 Session ID（不少于 3 个）：
① 需求分析与项目定位 id:.3722289809206233:_6a45209abfb3fda6068e75be.undefined.6a4520e0b1bed7e2dccbea5c:Trae CN
② 核心开发过程（页面骨架 + 录音 + 寄出收信 + 存储等核心功能实现） id:.3722289809206233:607ec1558d3d8375b1fe7ffa4255264c_6a45209abfb3fda6068e75be.6a45227abfb3fda6068e7609.6a452279b1bed7e2dccbea5c:Trae CN.T(2026/7/1 22:21:46)
③ 更换音频（对接 3 段真实录音、移除合成环境音） id:.3722289809206233:4eedd90573db298fb98aabae178d2eb8_6a45209abfb3fda6068e75be.6a452d9bbfb3fda6068e7635.6a452d9bb1bed7e2dccbea5d:Trae CN.T(2026/7/1 23:09:15)
5. 开发心得（额外）
纯前端方案的取舍：初赛规则允许「交互式 HTML Zip 打包上传」，所以选择纯前端单文件方案，评审解压双击即体验，零部署门槛。声音明信片的核心价值是"录→写→寄→收"的闭环感受，不依赖真实陌生人在线，用 3 张预置真实音频明信片即可让评审立即感知产品价值。
录音 API 兼容性：MediaRecorder 在 iOS Safari 需 14.3+，且 file:// 协议下部分浏览器限制麦克风权限。因此做了两层兜底——权限被拒时降级为本地音频文件上传；同时建议发帖时附 GitHub Pages 在线链接作为备选体验入口。
合成声音 vs 真实音频：最初用 Web Audio API 合成了 10 种环境声（雨声/海浪/风声/煎蛋/猫叫等）作为预置明信片，但最终决定移除合成方案，只保留 3 段真实录音。真实人声的质感、情绪、在场感是合成声音无法替代的——这恰好也呼应了产品核心理念"30 秒的真实环境声骗不了人"。
报名帖链接
附：项目文件结构
声音明信片-Demo/ ├── index.html # 单文件应用（HTML + CSS + JS 全内联） └── assets/ └── preset/ ├── renqi.mp3 # 北京·深夜（人不可能不焦虑） ├── shaonian.mp3 # 广州·清晨（少年） └── zhixingli.mp3 # 上海·午后（执行力）
无任何外网依赖，解压双击即跑。