Files
zyt/TUICallKit-Vue3/training/static/grip-ring-audio-shopping-list.md
longandClaude Opus 4.7 c3e4dfa479 feat(training): 握力环训练全面优化 - 音效集成 + 沉浸式画布 + Canvas 2D
## 主要改动

### 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>
2026-05-28 11:35:43 +08:00

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 脚本支持。

操作步骤:

  1. 申请小米 MiMo API Key: https://platform.xiaomimimo.com/
  2. 配置环境变量: export MIMO_API_KEY=sk-xxx
  3. 在 generate-voice.mjs 添加握力环话术
  4. 运行脚本自动生成

话术清单:

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
  • 后期: 去噪 + 标准化音量

🛠️ 五、采集工具推荐

在线裁剪

桌面工具(免费)

  • 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/

上传途径

  1. 腾讯云控制台: https://console.cloud.tencent.com/cos
  2. 管理后台 (如果项目有上传入口)
  3. 找团队 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 整理给我,我会:

  1. 更新 grip-ring.vue 中的 REWARDS 配置 (替换捏碎音效 URL)
  2. 创建/更新 useMetronome.ts 的音色配置 (支持切换节拍音色)
  3. 在 grip-ring.vue 集成 useTrainingBgm (添加 BGM)
  4. 在 grip-ring.vue 集成 useVoiceCoach (添加语音鼓励)
  5. 在 UI 上添加音色/BGM 切换选项 (可选)

预计代码改动: 50-100 行,1-2 小时工作量。


📚 参考链接

版权提示: 务必确认音效/音乐是"免费商用"(Public Domain 或 CC0),避免侵权风险。