【标签】生活娱乐
【标题】生活娱乐赛道 · 声活家——你的家庭噪音可视化日记
【正文】
1. Demo 简介
是什么：一个网页形态的按需噪音测量工具，纯前端单页应用，无需后端、双击即用。用户开启录制后，自动采集环境声压并生成带时间戳的"家庭噪音时段报告"。
面向谁：睡眠敏感的城市公寓居民——夜里被邻居脚步声、电视声困扰，想搞清楚噪音规律再决定怎么办的人。
主要功能：
- 实时监听：圆形三色分贝仪表 + 实时频谱/波形可视化，超阈值噪音自动标记事件，支持手动备注声源（脚步声/电视声等）。
[此处插入截图：实时监听页 - 仪表盘 + 频谱]
- 噪音报告：时段分贝曲线 + 7 日×24 时热力图 + AI 洞察文字总结（最吵时段、声源推测、环比变化），并生成可打印导出的"噪音时段报告卡"，作为与邻居沟通的凭据。
[此处插入截图：噪音报告页 - 热力图 + AI 洞察 + 报告卡]
- 历史日记：月历噪音评分色块 + 本周 vs 上周趋势对比，连续测几天即可看出"是不是比上周更严重"。
[此处插入截图：历史日记页 - 日历 + 周对比折线]
2. Demo 创作思路
灵感来源：自己被楼上脚步声困扰过，试过手机测噪 App，发现测出来的数字很难和"到底什么时候最吵""该怎么处理"联系起来。意识到噪音监测缺的不是数据采集，而是把数据翻译成生活语言。
想解决的问题：手机测噪 App 只显示瞬时数字，测完就没了，回看时只记得"好像挺吵"但说不出具体几点几分。找邻居沟通时，要么全靠主观抱怨，要么现场举着手机测一段，对方很难信服。
为什么做这个方向：
-
睡眠敏感者是噪音矛盾里的弱势方——感受最强烈，却最难拿出证据。一个低成本、打开手机就能用的工具，让他们第一次能为自己"画出"家里的声环境。
-
按需录制而非长期监听，对隐私更友好，也符合"夜里被吵醒才想记录"的真实场景。
-
网页形态零安装门槛，比原生 App 更适合这种低频、临时性的使用需求。
3. Demo 体验地址
采用交互式可体验的 HTML 格式文件，已打包为 Zip 上传至社区。
shenghuojia.zip (40.7 KB)
体验方式：解压后双击 index.html 即可在浏览器中运行，无需任何安装或服务器配置。
首次打开默认 Demo 模式，内置两周模拟噪音数据（含夜间脚步声、傍晚电视声等场景），可完整体验全部功能；在左侧切换到"真实麦克风"模式后，授权麦克风即可录制真实环境噪音。
4. TRAE 实践过程
整个 Demo 使用 TRAE 完成从需求到实现的全流程开发，关键步骤如下：
步骤一：需求与架构文档生成
向 TRAE 描述产品创意后，TRAE 自动调用 web-dev skill 生成完整的产品需求文档（PRD）和技术架构文档，包含功能模块拆解、数据模型定义、API 接口设计、核心流程图（Mermaid）等，并通知我审阅批准后才进入开发。
[此处插入截图：PRD 与技术架构文档审阅界面]
Session ID：[请填写 - 双击对应对话复制 Session ID]
3423200280850087:b0b7290a61bc1adb6791f442a7f4457f_6a4f4ec4892fe3bd7f27fec7.6a4f4ec4892fe3bd7f27feca.6a4f4ec4892fe3bd7f27fec8:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 15:33:24)
步骤二：页面结构与主题样式实现
文档批准后，TRAE 按照"深夜观测台"美学方向，生成了 index.html 主结构（四大视图）和 css/style.css 主题样式——午夜墨蓝底色 + 暖琥珀/柔珊瑚/薄荷青强调色，搭配 Fraunces 衬线标题字 + JetBrains Mono 数据字，营造夜间床头观测台的氛围。
[此处插入截图：首次运行的空界面 / 控制台 Hero 区]
Session ID：[请填写 - 双击对应对话复制 Session ID]
3423200280850087:6e58617d639a5d9e2ff1afb02a4c879e_6a4f4ec4892fe3bd7f27fec7.6a4f53fb892fe3bd7f27ff78.6a4f53fb892fe3bd7f27ff76:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 15:55:39)
步骤三：核心 JS 模块开发
TRAE 将业务逻辑拆分为 6 个模块并行实现：
| 模块 | 职责 |
|---|---|
storage.js |
LocalStorage 持久化 |
mock.js |
模拟噪音数据生成（含夜间脚步声/傍晚电视声场景） |
audio.js |
Web Audio API 真实麦克风采集 + Demo 流统一接口 |
report.js |
报告生成与 AI 洞察（基于规则） |
charts.js |
Chart.js 曲线图封装 |
app.js |
路由与四大视图渲染 |
并用 Node 跑了一段逻辑测试验证数据生成、报告洞察、热力图、周对比的正确性。
[此处插入截图：代码编辑器中的多模块文件结构]
Session ID：[请填写 - 双击对应对话复制 Session ID]
3423200280850087:c89a62395780259f5993c9d129fd556d_6a4f4ec4892fe3bd7f27fec7.6a4f5705892fe3bd7f27ffa7.6a4f5705892fe3bd7f27ffa5:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 16:08:37)
步骤四：Bug 修复与体验打磨
开发过程中通过浏览器元素审查发现了几个问题，TRAE 逐一修复：
-
事件列表"有内容但看不见"：根因是
updateGauge每帧（60fps）重建列表 innerHTML，导致 CSS 入场动画永远跑不完。修复为仅在事件数量变化时才重渲染。 -
模式切换数据未隔离：真实麦克风模式下仍显示 Demo 模拟数据。新增
getVisibleSessions()按会话mode字段过滤，Demo 与真实数据互不干扰。 -
"监听设置"按钮跳转无引导：改为跳转后高亮脉冲提示设置区域（模式切换 + 阈值滑块）并 toast 说明。
[此处插入截图：修复后正常显示的事件列表 + 高亮引导效果]
Session ID：[请填写 - 双击对应对话复制 Session ID]
3423200280850087:f0995f6b31ef6f875c6584c1e2ae2780_6a4f4ec4892fe3bd7f27fec7.6a4f59d3892fe3bd7f280033.6a4f59d3892fe3bd7f280031:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 16:20:35)
经验总结
-
TRAE 的
web-devskill 把"创意 → PRD → 架构 → 代码"串成一条流水线，文档先行让后续实现有据可依，避免了边写边改的混乱。 -
纯前端 Demo 方案（无构建、CDN 依赖）让评审可以零门槛双击运行，对生活娱乐赛道这种"看得见、摸得着"的体验型作品非常合适。
-
Web Audio API + 规则化 AI 洞察，在不引入后端的前提下实现了"真实可用 + 即开即玩"的平衡。
社区报名帖链接：[请填写 - 报名通过后附上帖子链接]