# Home Context 说明

## AudioPlayerContext

音频播放器上下文，用于管理全局音频播放状态，确保一次只能播放一个音频。

### 功能特性

- **单例播放**：同一时间只能播放一个音频
- **自动停止**：播放新音频时自动停止当前播放的音频
- **播放状态管理**：跟踪当前正在播放的音频 ID
- **错误处理**：处理音频加载和播放失败的情况

### 使用方法

#### 1. 包裹组件

```tsx
import { AudioPlayerProvider } from '../../context/AudioPlayerContext'

function MyComponent() {
  return <AudioPlayerProvider>{/* 你的组件 */}</AudioPlayerProvider>
}
```

#### 2. 使用 Hook

```tsx
import { useAudioPlayer } from '../../context/AudioPlayerContext'

function AudioButton({ audioUrl, id }) {
  const { play, isPlaying } = useAudioPlayer()
  const playing = isPlaying(id)

  const handleClick = () => {
    play(audioUrl, id)
  }

  return <button onClick={handleClick}>{playing ? '暂停' : '播放'}</button>
}
```

### API

#### AudioPlayerProvider

提供音频播放上下文的 Provider 组件。

**Props:**

- `children: React.ReactNode` - 子组件

#### useAudioPlayer

返回音频播放器的控制方法和状态。

**返回值:**

- `currentPlayingId: string | null` - 当前正在播放的音频 ID
- `play: (audioUrl: string, id: string) => void` - 播放音频
- `stop: () => void` - 停止当前播放的音频
- `isPlaying: (id: string) => boolean` - 检查指定 ID 的音频是否正在播放

### 实现示例

参考 `StartChat` 组件的实现：

1. 在 `StartChat/index.tsx` 中使用 `AudioPlayerProvider` 包裹组件
2. 在 `StartChatItem.tsx` 中使用 `useAudioPlayer` Hook 控制音频播放
3. 点击播放按钮时调用 `play()` 方法，传入音频 URL 和唯一 ID
4. 使用 `isPlaying()` 方法判断当前音频是否正在播放，显示对应的图标

### 注意事项

- 每个音频需要一个唯一的 ID 来标识
- 播放新音频时会自动停止之前的音频
- 音频播放完成后会自动重置状态
- 如果音频加载失败，会在控制台输出错误信息
