77 lines
2.9 KiB
Markdown
77 lines
2.9 KiB
Markdown
# 音频播放问题修复
|
||
|
||
## 问题描述
|
||
|
||
### 1. 音频播放延迟问题 ⭐⭐⭐
|
||
- **问题**: 点击播放按钮后要等一会才开始播放
|
||
- **原因**: 使用`canplaythrough`事件等待音频完全加载，导致延迟
|
||
- **影响范围**:
|
||
- `app/page.tsx` - 首页音频卡片
|
||
- `app/share/[id]/page.tsx` - 详情页音频播放
|
||
- **修复方案**:
|
||
- 改用`canplay`事件（而不是`canplaythrough`），音频缓冲足够就开始播放
|
||
- 添加`preload="auto"`确保音频预加载
|
||
- 优化音频加载逻辑，减少等待时间
|
||
|
||
### 2. 环形频谱不工作问题 ⭐⭐⭐
|
||
- **问题**: 音频播放时环形频谱可视化不起作用（首页和详情页都有问题）
|
||
- **原因**:
|
||
1. AudioVisualizer组件没有正确接收到audioElement
|
||
2. 首页传递的是`audioRef.current`，但这个引用可能在渲染时为null
|
||
3. 详情页没有传递audioElement给AudioVisualizer
|
||
- **影响范围**:
|
||
- `app/page.tsx` - 首页音频卡片的AudioVisualizer
|
||
- `app/share/[id]/page.tsx` - 详情页的AudioVisualizer
|
||
- `components/AudioVisualizer.tsx` - 频谱组件本身
|
||
- **修复方案**:
|
||
- 首页：确保audioRef.current在播放时正确传递给AudioVisualizer
|
||
- 详情页：添加audioElement prop传递给AudioVisualizer
|
||
- AudioVisualizer：优化音频上下文初始化逻辑
|
||
|
||
### 3. 进度条拖动功能缺失 ⭐⭐
|
||
- **问题**: 音频进度条不能拖动，只能显示进度
|
||
- **影响范围**:
|
||
- `app/page.tsx` - 首页音频卡片进度条
|
||
- `app/share/[id]/page.tsx` - 详情页音频进度条
|
||
- **修复方案**:
|
||
- 添加进度条点击事件，支持跳转到指定位置
|
||
- 添加拖动功能（mousedown + mousemove + mouseup）
|
||
- 更新audioRef.current.currentTime实现跳转
|
||
|
||
## 修复优先级
|
||
|
||
1. **高优先级（⭐⭐⭐）**: 环形频谱不工作、音频播放延迟
|
||
2. **中优先级（⭐⭐）**: 进度条拖动功能
|
||
|
||
## 修复状态
|
||
|
||
- **待修复**: 3个
|
||
- **修复中**: 0个
|
||
- **已完成**: 0个
|
||
|
||
## 技术细节
|
||
|
||
### 音频事件对比
|
||
|
||
| 事件 | 触发时机 | 适用场景 |
|
||
|------|----------|----------|
|
||
| `canplay` | 浏览器估计可以播放（缓冲了一些数据） | ✅ 快速开始播放 |
|
||
| `canplaythrough` | 浏览器估计可以不停顿地播放到结束 | ❌ 等待时间长 |
|
||
| `loadeddata` | 首帧数据加载完成 | 可用于显示封面 |
|
||
| `loadedmetadata` | 元数据加载完成（时长等） | 可用于显示时长 |
|
||
|
||
### AudioContext初始化
|
||
|
||
AudioContext需要在用户交互后才能创建和使用，否则会被浏览器阻止。当前实现已经正确处理了这个问题，但需要确保：
|
||
|
||
1. audioElement正确传递给AudioVisualizer
|
||
2. 在播放时才初始化AudioContext
|
||
3. 正确连接audio元素到analyser节点
|
||
|
||
## 参考文件
|
||
|
||
- 反编译文件：`shadow_page_full.js`（查看正式环境的音频播放实现）
|
||
- AudioVisualizer组件：`components/AudioVisualizer.tsx`
|
||
- 首页：`app/page.tsx`
|
||
- 详情页：`app/share/[id]/page.tsx`
|