Files
zyt/TUICallKit-Vue3/training/static/grip-ring-audio-shopping-list.md
T
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),避免侵权风险。