EpicSoul/components/AudioControl使用文档.md

AudioControl 音频控制组件使用文档

组件功能

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

组件属性 (Props)

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

使用方法

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

<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方法：

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

3. 动态控制音频源

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

<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），如果需要调整位置，可以在父组件中覆盖样式：

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

注意事项

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

图标说明

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

事件处理

组件内部已处理所有音频播放逻辑，包括：

• 播放音频时自动暂停背景音乐
• 暂停音频时自动恢复背景音乐
• 音频播放结束时自动恢复背景音乐
• 组件销毁时自动清理资源

示例场景

适用于以下场景：

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