ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat(training): 握力环训练全面优化 - 音效集成 + 沉浸式画布 + Canvas 2D

Browse Source 
## 主要改动

### 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>
This commit is contained in:
long
2026-05-28 11:35:43 +08:00
co-authored by Claude Opus 4.7
parent 3ebe3c58c8
commit c3e4dfa479
6 changed files with 1095 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TUICallKit-Vue3/training/static/grip-ring-audio-shopping-list.md
+276
View File
@@ -0,0 +1,276 @@
# 握力环训练音效采集清单
> 更新日期: 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. 运行脚本自动生成
**话术清单**:
```javascript
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](https://audiotrimmer.com) - 简单的 mp3 裁剪
- [mp3cut.net](https://mp3cut.net) - 功能更全
### 桌面工具(免费)
- **Audacity** (Mac/Windows/Linux) - 专业级,可以剪辑、降噪、标准化
- **Logic Pro** (Mac, 付费) - 更专业的音频处理
### 音量标准化
统一音量(避免有的太响有的太轻):
```bash
# 使用 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 小时工作量。
---
## 📚 参考链接
- [Pixabay 音效](https://pixabay.com/sound-effects/) - 免费可商用
- [Pixabay 音乐](https://pixabay.com/music/) - 免费可商用
- [Freesound](https://freesound.org) - 大量音效,部分需署名
- [Mixkit](https://mixkit.co/free-sound-effects/) - 免费音效库
- [Bensound](https://bensound.com) - 免费音乐(需署名)
- [Free Music Archive](https://freemusicarchive.org) - 免费音乐
**版权提示**: 务必确认音效/音乐是"免费商用"(Public Domain 或 CC0),避免侵权风险。