EpicSoul/components/AudioControl使用文档.md

# AudioControl 音频控制组件使用文档

## 组件功能
- 在父组件右上角显示音频控制图标
- 点击图标播放指定音频，同时暂停背景音乐
- 再次点击暂停音频，恢复背景音乐
- 音频播放结束后自动恢复背景音乐

## 组件属性 (Props)

| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| audioSrc | String | 是 | - | 音频文件路径 |
| visible | Boolean | 否 | true | 是否显示组件 |

## 使用方法

### 1. 在父组件中引入和注册组件

```vue
<template>
  <view class="parent-container">
    <!-- 父组件内容 -->
    <view class="content">
      <!-- 你的页面内容 -->
    </view>
    
    <!-- 音频控制组件 -->
    <AudioControl 
      :audioSrc="audioUrl" 
      :visible="showAudio"
    />
  </view>
</template>

<script>
import AudioControl from '@/components/AudioControl.vue';

export default {
  components: {
    AudioControl
  },
  data() {
    return {
      audioUrl: 'https://your-domain.com/audio/sample.mp3', // 替换为你的音频URL
      showAudio: true
    }
  }
}
</script>

<style>
.parent-container {
  position: relative; /* 重要：确保AudioControl能正确定位 */
  width: 100vw;
  height: 100vh;
}
</style>
```

### 2. 使用项目中的showImg方法（推荐）

如果你的音频文件也存储在项目服务器上，可以使用项目的showImg方法：

```vue
<script>
export default {
  data() {
    return {
      audioUrl: this.showImg('/uploads/audio/your-audio-file.mp3'),
      showAudio: true
    }
  }
}
</script>
```

### 3. 动态控制音频源

你可以根据不同的页面或条件播放不同的音频：

```vue
<script>
export default {
  data() {
    return {
      audioUrl: '',
      showAudio: true
    }
  },
  mounted() {
    // 根据页面设置不同的音频
    this.setAudioForCurrentPage();
  },
  methods: {
    setAudioForCurrentPage() {
      const currentRoute = this.$route.path; // 假设使用vue-router
      
      switch(currentRoute) {
        case '/chapter1':
          this.audioUrl = this.showImg('/uploads/audio/chapter1.mp3');
          break;
        case '/chapter2':
          this.audioUrl = this.showImg('/uploads/audio/chapter2.mp3');
          break;
        default:
          this.audioUrl = this.showImg('/uploads/audio/default.mp3');
      }
    }
  }
}
</script>
```

## 样式说明

组件默认定位在父组件的右上角（top: 30rpx, right: 30rpx），如果需要调整位置，可以在父组件中覆盖样式：

```vue
<style>
/* 调整音频控制组件位置 */
.parent-container ::v-deep .audio-control {
  top: 50rpx !important;
  right: 50rpx !important;
}
</style>
```

## 注意事项

1. **父组件样式**：确保父组件设置了 `position: relative`，这样AudioControl组件才能正确定位
2. **音频格式**：建议使用 mp3 格式的音频文件，兼容性最好
3. **音频路径**：确保音频文件路径正确且可访问
4. **背景音乐**：组件会自动处理与MusicControl组件的交互，无需额外配置

## 图标说明

- 🔊：音频未播放状态
- 🎧：音频播放中状态，带有脉动动画效果

## 事件处理

组件内部已处理所有音频播放逻辑，包括：
- 播放音频时自动暂停背景音乐
- 暂停音频时自动恢复背景音乐
- 音频播放结束时自动恢复背景音乐
- 组件销毁时自动清理资源

## 示例场景

适用于以下场景：
- 章节页面播放对应的音频解说
- 展示页面播放介绍音频
- 互动页面播放提示音频
- 任何需要临时播放音频并暂停背景音乐的场景