## 主要改动 ### 1. 音效集成 - 集成 4 个捏碎音效(鸡蛋/核桃/易拉罐/气球) - 集成背景音乐 BGM + 右上角开关按钮 - 修复音效 URL 空值时的崩溃问题 - useMetronome 新增 volume 参数(默认 1.0) - 节拍音量调小至 0.35,避免木鱼声过大 ### 2. 画布升级到 Canvas 2D 接口 - 解决微信小程序 canvas-id 接口的警告 - 支持同层渲染,可与其他元素正常叠加 - 使用 requestAnimationFrame 替代 setTimeout - DPR 自适应,Retina 屏幕高清渲染 ### 3. 粒子特效差异化升级 - 4 种物品各自独立配色和形状 - 🥚 鸡蛋: 蛋黄黄+白色,圆形,中速 - 🌰 核桃: 4 种棕色,方形/三角/长方形,重粒 - 🥫 易拉罐: 5 种银色,长方形,快速 - 🎈 气球: 8 色彩虹,小颗粒,飘浮(低重力) - 新增双层冲击波效果 - 粒子旋转动画(方形/三角形/长方形) - 多形状粒子绘制(circle/square/triangle/rect) ### 4. 沉浸式画布重新设计 - 画布占屏幕 60vh(min 720rpx, max 900rpx) - 背景与页面无缝融合(#f8fafc) - 中心 1400rpx 大放射光晕,营造空间感 - 握力环放大至 520rpx,内圈 280rpx - 完全移除浮动气泡(性能优化) ### 5. 视觉与体验优化 - 主题色改回青绿色(#14b8a6),握力环保持粉色突出 - 训练完成卡片大改造: - 大号 emoji 跳动动画 - 统计项加入图标(💪⏱️🔥) - 食物对照可视化(emoji + 数量,最多 3 个) - 食物库扩展到 7 种(糖果/饼干/巧克力/苹果/香蕉/米饭/可乐) - BPM 数字大号显示(80rpx 深粉色) - 实时统计栏增加分隔线和顶部彩色高光 ### 6. 性能优化(低配机器友好) - 静态背景渐变(0 性能消耗) - 单层中心光晕(无动画) - 外发光仅在播放时启用 - GPU 加速(will-change + transform/opacity) - 移除 backdrop-filter(高消耗) ### 7. Bug 修复 - crush-canvas 的 \$scope of null 错误 - 进入页面时音效预热不再发声(静音预热) - 修复 walnut emoji 错用花生(🥜→🌰) - 弹窗遮挡粒子动画(延迟 1200ms 显示弹窗) ### 8. 文档 - 新增音效采集清单(grip-ring-audio-shopping-list.md) ## 修改文件 - grip-ring.vue: 主页面,音效集成、UI 重设计、食物对照 - grip-ring-canvas.vue: 沉浸式画布、握力环主体 - crush-canvas.vue: Canvas 2D 升级、差异化粒子系统 - useMetronome.ts: 音量参数支持 - dev-training-entry/index.vue: 入口配置微调 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
8.1 KiB
8.1 KiB
握力环训练音效采集清单
更新日期: 2026-05-28 用途: 为握力环训练页面添加完整音效体系
📋 总体规划
| 类型 | 数量 | 单文件大小 | 总大小预算 | 优先级 |
|---|---|---|---|---|
| 节拍音效 | 1-3 个音色 | 5-10 KB | < 30 KB | P0 |
| 捏碎音效 | 4 个 | 20-50 KB | < 200 KB | P0 |
| 背景音乐 | 1-2 首 | 200-500 KB | < 1 MB | P1 |
| 语音鼓励 | 4-8 句 | 10-30 KB | < 200 KB | P1 |
总计预算: < 1.5 MB(都放 CDN,不影响小程序包体积)
🥁 一、节拍音效 (P0 - 必需)
用途
训练时按 BPM 节奏播放,引导用户握紧/松开。
推荐音色 (任选 1-3 个)
| 音色 | 推荐度 | 描述 | Pixabay 搜索词 |
|---|---|---|---|
| 木鱼 | ⭐⭐⭐⭐⭐ | 温暖、东方意境,适合养生主题 | wood block, wooden tap, muyu |
| 心跳 | ⭐⭐⭐⭐ | 有运动感,代入感强 | heart beat, heartbeat single |
| 轻柔敲击 | ⭐⭐⭐⭐ | 不刺耳,适合长时间训练 | soft tap, gentle knock |
| 竹片声 | ⭐⭐⭐ | 清脆,有节奏感 | bamboo tap, bamboo click |
| 鼓点 | ⭐⭐⭐ | 有力量感,适合"重度"档位 | kick drum soft, tom drum tap |
技术要求
- 格式: mp3
- 时长: 50-150ms (不能太长,会重叠)
- 采样率: 22050Hz 或 44100Hz
- 声道: 单声道
- 大小: < 10 KB
命名规范
grip-tick-wood.mp3 # 木鱼
grip-tick-heart.mp3 # 心跳
grip-tick-soft.mp3 # 轻柔
grip-tick-bamboo.mp3 # 竹片
💥 二、捏碎音效 (P0 - 必需)
用途
达成奖励里程碑时播放,与粒子特效同步。
音效清单
| 奖励 | 触发次数 | Pixabay 搜索词 | 时长 | 备注 |
|---|---|---|---|---|
| 🥚 鸡蛋 | 8-12 | egg crack, eggshell break, crack sound |
0.5-1s | 清脆短促 |
| 🥜 核桃 | 15-20 | nut crack, walnut break, wood snap |
0.5-1s | 木质爆裂感 |
| 🥫 易拉罐 | 25-30 | can crush, aluminum crush, metal crunch |
1-2s | 金属挤压 |
| 🎈 气球 | 40-50 | balloon pop, pop burst, balloon explosion |
0.3-0.5s | 短促爆裂 |
技术要求
- 格式: mp3
- 时长: 0.3-2s
- 大小: < 50 KB
- 音量: 适中(避免突然吓到用户)
命名规范
crush-egg.mp3
crush-walnut.mp3
crush-can.mp3
crush-balloon.mp3
试听建议
下载前一定要试听,优先选择:
- ✅ 干净,无杂音
- ✅ 中等音量(峰值不爆音)
- ✅ 短促有力(不拖沓)
- ❌ 避免: 太长、太尖锐、有人声
🎵 三、背景音乐 BGM (P1 - 推荐)
用途
训练时持续播放,营造轻松氛围,缓解握力训练的枯燥感。
风格推荐
| 风格 | 描述 | Pixabay 搜索词 | 适合人群 |
|---|---|---|---|
| Lo-Fi | 慵懒电子,流行选择 | lofi calm, lofi study, lofi chill |
年轻人 |
| 冥想轻音乐 | 钢琴 + 自然音,放松 | meditation, calm piano, relaxing |
中老年 |
| 轻爵士 | 优雅放松,有质感 | light jazz, cafe jazz, bossa nova |
通用 |
| 自然环境音 | 鸟叫/流水/雨声 | nature ambient, forest sounds, rain bgm |
喜欢自然的用户 |
| 东方禅意 | 古筝/笛子,养生 | chinese zen, oriental calm, guqin |
养生主题契合 |
推荐场景搭配
- 轻度档位 (60 BPM): 冥想轻音乐 (节奏舒缓)
- 中度档位 (80 BPM): 轻爵士 / Lo-Fi (适中)
- 重度档位 (100 BPM): 轻快电子 / 健身流行
技术要求
- 格式: mp3
- 时长: 30s - 2min (循环播放)
- 比特率: 128 kbps (单声道 64 kbps 也可)
- 大小: < 500 KB
- 循环点: 选择起止点接近的片段,避免明显接缝
命名规范
bgm-grip-light.mp3 # 轻度档位 BGM
bgm-grip-medium.mp3 # 中度档位 BGM (可选)
bgm-grip-heavy.mp3 # 重度档位 BGM (可选)
或简化:
bgm-grip-default.mp3 # 默认 BGM (所有档位通用)
🎙️ 四、语音鼓励 (P1 - 推荐)
用途
达成奖励时播放鼓励语音,增强成就感。
两种方案
方案 A: 小米 MiMo TTS 自动生成 (推荐)
项目已有 useVoiceCoach.ts + generate-voice.mjs 脚本支持。
操作步骤:
- 申请小米 MiMo API Key: https://platform.xiaomimimo.com/
- 配置环境变量:
export MIMO_API_KEY=sk-xxx - 在
generate-voice.mjs添加握力环话术 - 运行脚本自动生成
话术清单:
const gripPrompts = [
{ id: 'grip-egg', text: '握力不错!' },
{ id: 'grip-walnut', text: '力量惊人!' },
{ id: 'grip-can', text: '太强了!' },
{ id: 'grip-balloon', text: '完美!继续保持!' },
{ id: 'grip-start', text: '开始训练!' },
{ id: 'grip-pause', text: '休息一下!' },
{ id: 'grip-encourage-1', text: '加油,再来!' },
{ id: 'grip-encourage-2', text: '坚持住!' },
]
音色推荐: 茉莉 (清爽利落,有"运动博主"感)
方案 B: 手工录制
如果不想用 TTS,可以自己录制(质感更好,但费时):
- 工具: 手机录音 / Audacity
- 环境: 安静的房间,距离麦克风 15-30cm
- 后期: 去噪 + 标准化音量
🛠️ 五、采集工具推荐
在线裁剪
- audiotrimmer.com - 简单的 mp3 裁剪
- mp3cut.net - 功能更全
桌面工具(免费)
- Audacity (Mac/Windows/Linux) - 专业级,可以剪辑、降噪、标准化
- Logic Pro (Mac, 付费) - 更专业的音频处理
音量标准化
统一音量(避免有的太响有的太轻):
# 使用 ffmpeg (Mac: brew install ffmpeg)
ffmpeg -i input.mp3 -af "loudnorm=I=-16:LRA=11:TP=-1.5" output.mp3
或在 Audacity 里: Effect → Normalize (峰值 -3dB)
☁️ 六、上传到 CDN
项目使用的 COS 信息
- 域名:
gz-1349751149.cos.ap-guangzhou.myqcloud.com - 目录建议:
uploads/training/grip-ring/
上传途径
- 腾讯云控制台: https://console.cloud.tencent.com/cos
- 管理后台 (如果项目有上传入口)
- 找团队 COS 管理员上传
上传后获得的 URL 格式
https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/training/grip-ring/crush-egg.mp3
📝 七、最终采集清单 (一次性收齐)
最小可行版本 (MVP) - 4 个文件
☐ grip-tick-wood.mp3 # 节拍音 - 木鱼
☐ crush-egg.mp3 # 鸡蛋
☐ crush-walnut.mp3 # 核桃
☐ crush-can.mp3 # 易拉罐
☐ crush-balloon.mp3 # 气球
完整版本 - 10 个文件
节拍音 (3 选 1 或全部):
☐ grip-tick-wood.mp3
☐ grip-tick-heart.mp3
☐ grip-tick-soft.mp3
捏碎音效 (必需 4 个):
☐ crush-egg.mp3
☐ crush-walnut.mp3
☐ crush-can.mp3
☐ crush-balloon.mp3
BGM (1-3 首):
☐ bgm-grip-default.mp3
☐ bgm-grip-meditation.mp3 (可选)
☐ bgm-grip-lofi.mp3 (可选)
语音鼓励 (TTS 自动生成,8 个):
☐ grip-egg.mp3
☐ grip-walnut.mp3
☐ grip-can.mp3
☐ grip-balloon.mp3
☐ grip-start.mp3
☐ grip-pause.mp3
☐ grip-encourage-1.mp3
☐ grip-encourage-2.mp3
✅ 八、采集完成后
把所有 URL 整理给我,我会:
- 更新
grip-ring.vue中的 REWARDS 配置 (替换捏碎音效 URL) - 创建/更新
useMetronome.ts的音色配置 (支持切换节拍音色) - 在
grip-ring.vue集成useTrainingBgm(添加 BGM) - 在
grip-ring.vue集成useVoiceCoach(添加语音鼓励) - 在 UI 上添加音色/BGM 切换选项 (可选)
预计代码改动: 50-100 行,1-2 小时工作量。
📚 参考链接
- Pixabay 音效 - 免费可商用
- Pixabay 音乐 - 免费可商用
- Freesound - 大量音效,部分需署名
- Mixkit - 免费音效库
- Bensound - 免费音乐(需署名)
- Free Music Archive - 免费音乐
版权提示: 务必确认音效/音乐是"免费商用"(Public Domain 或 CC0),避免侵权风险。