gongxiangp2/.kiro/specs/ui-fixes/音频播放问题修复.md

音频播放问题修复

问题描述

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