diff --git a/subPages/home/AudioControls.vue b/subPages/home/AudioControls.vue
new file mode 100644
index 0000000..012b774
--- /dev/null
+++ b/subPages/home/AudioControls.vue
@@ -0,0 +1,1182 @@
+<template>
+  <view class="audio-controls-wrapper">
+    <!-- 获取音频按钮 -->
+    <view v-if="!hasAudioData && !isAudioLoading && isTextPage" class="audio-get-button-container">
+      <view class="get-audio-btn" @click="handleGetAudio">
+        <uv-icon name="play-circle" size="24" color="#06DADC"></uv-icon>
+        <text class="get-audio-text">获取第{{currentPage}}页音频</text>
+      </view>
+    </view>
+    
+    <!-- 音频加载状态 -->
+    <view v-else-if="isAudioLoading && isTextPage" class="audio-loading-container">
+      <uv-loading-icon mode="spinner" size="30" color="#06DADC"></uv-loading-icon>
+      <text class="loading-text">正在加载第{{currentPage}}页音频...</text>
+    </view>
+    
+    <!-- 正常音频控制栏 -->
+    <view v-else-if="hasAudioData" class="audio-controls" :class="{ 'audio-hidden': !isTextPage }">
+      <view class="audio-time">
+        <text class="time-text">{{ formatTime(currentTime) }}</text>
+        <view class="progress-container">
+          <uv-slider
+            v-model="sliderValue"
+            :min="0"
+            :max="totalTime"
+            :step="0.1"
+            activeColor="#06DADC"
+            backgroundColor="#e0e0e0"
+            :blockSize="16"
+            blockColor="#ffffff"
+            :disabled="!hasAudioData || totalTime <= 0"
+            @input="onSliderInput"
+            @changing="onSliderChanging"
+            @change="onSliderChange"
+            :customStyle="{ flex: 1, margin: '0 10px' }"
+          />
+        </view>
+        <text class="time-text">{{ formatTime(totalTime) }}</text>
+      </view>
+      
+      <view class="audio-controls-row">
+        <view class="control-btn" @click="toggleLoop">
+          <uv-icon name="reload" size="20" :color="isLoop ? '#06DADC' : '#999'"></uv-icon>
+          <text class="control-text">循环</text>
+        </view>
+        
+        <view class="control-btn" @click="$emit('previous-page')">
+          <text class="control-text">上一页</text>
+        </view>
+        
+        <view class="play-btn" @click="togglePlay">
+          <uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="40" color="#666"></uv-icon>
+        </view>
+        
+        <view class="control-btn" @click="$emit('next-page')">
+          <text class="control-text">下一页</text>
+        </view>
+        
+        <view class="control-btn" @click="toggleSpeed" :class="{ 'disabled': !playbackRateSupported }">
+          <text class="control-text" :style="{ opacity: playbackRateSupported ? 1 : 0.5 }">
+            {{ playbackRateSupported ? playSpeed + 'x' : '不支持' }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import config from '@/mixins/config.js'
+
+export default {
+  name: 'AudioControls',
+  mixins: [config],
+  props: {
+    // 基础数据
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    courseId: {
+      type: String,
+      default: ''
+    },
+    voiceId: {
+      type: String,
+      default: ''
+    },
+    bookPages: {
+      type: Array,
+      default: () => []
+    },
+    isTextPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 音频控制相关数据
+      isPlaying: false,
+      currentTime: 0,
+      totalTime: 0,
+      sliderValue: 0, // 滑動條的值
+      isDragging: false, // 是否正在拖動滑動條
+      isLoop: false,
+      playSpeed: 1.0,
+      speedOptions: [0.5, 0.8, 1.0, 1.25, 1.5, 2.0], // 根據uni-app文檔的官方支持值
+      playbackRateSupported: true, // 播放速度控制是否支持
+      // 音频数组管理
+      currentPageAudios: [], // 当前页面的音频数组
+      currentAudioIndex: 0, // 当前播放的音频索引
+      audioContext: null, // 音频上下文
+      currentAudio: null, // 当前音频实例
+      // 音频缓存管理
+      audioCache: {}, // 页面音频缓存 {pageIndex: {audios: [], totalDuration: 0}}
+      // 音频加载状态
+      isAudioLoading: false, // 音频是否正在加载
+      hasAudioData: false, // 当前页面是否已有音频数据
+      // 文本高亮相关
+      currentHighlightIndex: -1, // 当前高亮的文本索引
+    }
+  },
+  computed: {
+    // 计算音频播放进度百分比
+    progressPercent() {
+      return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;
+    }
+  },
+  watch: {
+    // 监听页面变化，重置音频状态
+    currentPage: {
+      handler(newPage, oldPage) {
+        if (newPage !== oldPage) {
+          this.resetAudioState();
+        }
+      },
+      immediate: false
+    },
+    // 监听音色变化，清除缓存
+    voiceId: {
+      handler(newVoiceId, oldVoiceId) {
+        if (newVoiceId !== oldVoiceId && oldVoiceId) {
+          this.clearAudioCache();
+          this.resetAudioState();
+        }
+      }
+    }
+  },
+  methods: {
+    // 获取当前页面的音频内容
+    async getCurrentPageAudio() {
+      // 检查缓存中是否已有当前页面的音频数据
+      const cacheKey = `${this.courseId}_${this.currentPage}`;
+      if (this.audioCache[cacheKey]) {
+        console.log('从缓存加载音频数据:', cacheKey);
+        // 从缓存加载音频数据
+        this.currentPageAudios = this.audioCache[cacheKey].audios;
+        this.totalTime = this.audioCache[cacheKey].totalDuration;
+        this.currentAudioIndex = 0;
+        this.isPlaying = false;
+        this.currentTime = 0;
+        return;
+      }
+      
+      // 开始加载状态
+      this.isAudioLoading = true;
+      
+      // 清空当前页面音频数组
+      this.currentPageAudios = [];
+      this.currentAudioIndex = 0;
+      this.isPlaying = false;
+      this.currentTime = 0;
+      this.totalTime = 0;
+      
+      // 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
+      const currentPageData = this.bookPages[this.currentPage - 1];
+      if (currentPageData) {
+        // 收集所有text类型的元素
+        const textItems = currentPageData.filter(item => item.type === 'text');
+        
+        if (textItems.length > 0) {
+          // 并行发送所有音频请求
+          const audioPromises = textItems.map(async (item, index) => {
+            try {
+              // 进行音频请求 - 修正字段名：使用content而不是text
+              const radioRes = await this.$api.music.textToVoice({
+                text: item.content,
+                voiceType: this.voiceId,
+              });
+              console.log(`音频请求响应 ${index + 1}:`, radioRes);
+              
+              if(radioRes.code === 200){
+                // 新格式：API直接返回音頻URL
+                const audioUrl = radioRes.result.audio;
+                // 檢查API是否返回時長信息
+                const duration = radioRes.result.duration || 0;
+                
+                // 同时保存到原始数据中以保持兼容性
+                item.audioUrl = audioUrl;
+                console.log(`音频URL设置成功 ${index + 1}:`, audioUrl, '时长:', duration);
+                
+                return {
+                  url: audioUrl,
+                  text: item.content,
+                  duration: duration, // 優先使用API返回的時長
+                  index: index // 保持原始顺序
+                };
+              } else {
+                console.error(`音频请求失败 ${index + 1}:`, radioRes);
+                return null;
+              }
+            } catch (error) {
+              console.error(`音频请求异常 ${index + 1}:`, error);
+              return null;
+            }
+          });
+          
+          // 等待所有音频请求完成
+          const audioResults = await Promise.all(audioPromises);
+          
+          // 按原始顺序添加到音频数组中，过滤掉失败的请求
+          this.currentPageAudios = audioResults
+            .filter(result => result !== null)
+            .sort((a, b) => a.index - b.index)
+            .map(result => ({
+              url: result.url,
+              text: result.text,
+              duration: result.duration
+            }));
+          
+          console.log('所有音频请求完成，共获取', this.currentPageAudios.length, '个音频');
+        }
+        
+        // 如果有音频，计算总时长
+        if (this.currentPageAudios.length > 0) {
+          await this.calculateTotalDuration();
+          
+          // 将音频数据保存到缓存中
+          const cacheKey = `${this.courseId}_${this.currentPage}`;
+          this.audioCache[cacheKey] = {
+            audios: [...this.currentPageAudios], // 深拷贝音频数组
+            totalDuration: this.totalTime
+          };
+          console.log('音频数据已缓存:', cacheKey, this.audioCache[cacheKey]);
+          
+          // 限制缓存大小
+          this.limitCacheSize(10);
+        }
+      }
+      
+      // 结束加载状态
+      this.isAudioLoading = false;
+      
+      // 设置音频数据状态
+      this.hasAudioData = this.currentPageAudios.length > 0;
+      
+      // 通知父组件音频状态变化
+      this.$emit('audio-state-change', {
+        hasAudioData: this.hasAudioData,
+        isLoading: this.isAudioLoading,
+        currentHighlightIndex: this.currentHighlightIndex
+      });
+    },
+    
+    // 重置音频状态
+    resetAudioState() {
+      // 检查当前页面是否已有缓存的音频数据
+      const pageKey = `${this.courseId}_${this.currentPage}`;
+      const cachedAudio = this.audioCache[pageKey];
+      
+      if (cachedAudio && cachedAudio.audios && cachedAudio.audios.length > 0) {
+        // 如果有缓存的音频数据，恢复音频状态
+        this.currentPageAudios = cachedAudio.audios;
+        this.totalTime = cachedAudio.totalDuration || 0;
+        this.hasAudioData = true;
+      } else {
+        // 如果没有缓存的音频数据，重置为初始状态
+        this.currentPageAudios = [];
+        this.totalTime = 0;
+        this.hasAudioData = false;
+      }
+      
+      // 重置播放状态，翻頁時統一設置播放速度為1.0
+      this.currentAudioIndex = 0;
+      this.isPlaying = false;
+      this.currentTime = 0;
+      this.isAudioLoading = false;
+      this.currentHighlightIndex = -1;
+      // 翻頁時強制設置播放速度為1.0（適應微信小程序特性）
+      this.playSpeed = 1.0;
+      
+      // 通知父组件音频状态变化
+      this.$emit('audio-state-change', {
+        hasAudioData: this.hasAudioData,
+        isLoading: this.isAudioLoading,
+        currentHighlightIndex: this.currentHighlightIndex
+      });
+    },
+     
+    // 手动获取音频
+    async handleGetAudio() {
+      // 检查是否有音色ID
+      if (!this.voiceId) {
+        uni.showToast({
+          title: '音色未加载，请稍后重试',
+          icon: 'none'
+        });
+        return;
+      }
+      
+      // 检查当前页面是否有文本内容
+      if (!this.isTextPage) {
+        uni.showToast({
+          title: '当前页面没有文本内容',
+          icon: 'none'
+        });
+        return;
+      }
+      
+      // 检查是否正在加载
+      if (this.isAudioLoading) {
+        return;
+      }
+      
+      // 调用获取音频方法
+      await this.getCurrentPageAudio();
+    },
+    
+    // 计算音频总时长
+    async calculateTotalDuration() {
+      let totalDuration = 0;
+      for (let i = 0; i < this.currentPageAudios.length; i++) {
+        const audio = this.currentPageAudios[i];
+        
+        // 優先使用API返回的時長信息
+        if (audio.duration && audio.duration > 0) {
+          console.log(`使用API返回的時長 ${i + 1}:`, audio.duration, '秒');
+          totalDuration += audio.duration;
+          continue;
+        }
+        
+        // 如果沒有API時長信息，嘗試獲取音頻時長
+        try {
+          const duration = await this.getAudioDuration(audio.url);
+          audio.duration = duration;
+          totalDuration += duration;
+          console.log(`獲取到音頻時長 ${i + 1}:`, duration, '秒');
+        } catch (error) {
+          console.error('获取音频时长失败:', error);
+          // 如果无法获取时长，根據文字長度估算（更精確的估算）
+          const textLength = audio.text.length;
+          // 假設每分鐘可以讀150-200個字符，這裡用180作為平均值
+          const estimatedDuration = Math.max(2, textLength / 3); // 每3個字符約1秒
+          audio.duration = estimatedDuration;
+          totalDuration += estimatedDuration;
+          console.log(`估算音頻時長 ${i + 1}:`, estimatedDuration, '秒 (文字長度:', textLength, ')');
+        }
+      }
+      this.totalTime = totalDuration;
+      console.log('音频总时长:', totalDuration, '秒');
+    },
+    
+    // 获取音频时长
+    getAudioDuration(audioUrl) {
+      return new Promise((resolve, reject) => {
+        const audio = uni.createInnerAudioContext();
+        audio.src = audioUrl;
+        
+        let resolved = false;
+        
+        // 监听音频加载完成事件
+        audio.onCanplay(() => {
+          console.log('音频可以播放，duration:', audio.duration);
+          if (!resolved && audio.duration && audio.duration > 0) {
+            resolved = true;
+            resolve(audio.duration);
+            audio.destroy();
+          }
+        });
+        
+        // 监听音频元数据加载完成事件
+        audio.onLoadedmetadata = () => {
+          console.log('音频元数据加载完成，duration:', audio.duration);
+          if (!resolved && audio.duration && audio.duration > 0) {
+            resolved = true;
+            resolve(audio.duration);
+            audio.destroy();
+          }
+        };
+        
+        // 监听音频时长更新事件
+        audio.onDurationChange = () => {
+          console.log('音频时长更新，duration:', audio.duration);
+          if (!resolved && audio.duration && audio.duration > 0) {
+            resolved = true;
+            resolve(audio.duration);
+            audio.destroy();
+          }
+        };
+        
+        // 如果以上方法都無法獲取時長，嘗試播放一小段來獲取時長
+        audio.onPlay(() => {
+          console.log('音频开始播放，duration:', audio.duration);
+          if (!resolved) {
+            setTimeout(() => {
+              if (!resolved && audio.duration && audio.duration > 0) {
+                resolved = true;
+                resolve(audio.duration);
+                audio.destroy();
+              }
+            }, 100); // 播放100ms後檢查時長
+          }
+        });
+        
+        audio.onError((error) => {
+          console.error('音频加载失败:', error);
+          if (!resolved) {
+            resolved = true;
+            reject(error);
+            audio.destroy();
+          }
+        });
+        
+        // 設置較長的超時時間，並在超時前嘗試播放
+        setTimeout(() => {
+          if (!resolved) {
+            console.log('嘗試播放音頻以獲取時長');
+            audio.play();
+          }
+        }, 1000);
+        
+        // 最終超時處理
+        setTimeout(() => {
+          if (!resolved) {
+            console.warn('獲取音頻時長超時，使用默認值');
+            resolved = true;
+            reject(new Error('获取音频时长超时'));
+            audio.destroy();
+          }
+        }, 5000);
+      });
+    },
+    
+    // 音频控制方法
+    togglePlay() {
+      if (this.currentPageAudios.length === 0) {
+        uni.showToast({
+          title: '当前页面没有音频内容',
+          icon: 'none'
+        });
+        return;
+      }
+      
+      if (this.isPlaying) {
+        this.pauseAudio();
+      } else {
+        this.playAudio();
+      }
+    },
+    
+    // 播放音频
+    playAudio() {
+      if (this.currentPageAudios.length === 0) return;
+      
+      // 如果没有当前音频实例或者需要切换音频
+      if (!this.currentAudio || this.currentAudio.src !== this.currentPageAudios[this.currentAudioIndex].url) {
+        this.createAudioInstance();
+      }
+      
+      this.currentAudio.play();
+      this.isPlaying = true;
+      // 更新高亮状态
+      this.updateHighlightIndex();
+    },
+    
+    // 暂停音频
+    pauseAudio() {
+      if (this.currentAudio) {
+        this.currentAudio.pause();
+      }
+      this.isPlaying = false;
+      // 暂停时清除高亮
+      this.currentHighlightIndex = -1;
+      // 通知父组件高亮状态变化
+      this.$emit('highlight-change', -1);
+    },
+    
+    // 创建音频实例
+    createAudioInstance() {
+      // 销毁之前的音频实例
+      if (this.currentAudio) {
+        this.currentAudio.destroy();
+      }
+      
+      // 優先使用微信原生API以支持playbackRate
+      let audio;
+      if (typeof wx !== 'undefined' && wx.createInnerAudioContext) {
+        console.log('使用微信原生音頻API');
+        audio = wx.createInnerAudioContext();
+      } else {
+        console.log('使用uni-app音頻API');
+        audio = uni.createInnerAudioContext();
+      }
+      audio.src = this.currentPageAudios[this.currentAudioIndex].url;
+      
+      // 在音頻可以播放時檢測playbackRate支持
+      audio.onCanplay(() => {
+        console.log('🎵 音頻可以播放，開始檢測playbackRate支持');
+        this.checkPlaybackRateSupport(audio);
+        
+        // 檢測完成後，設置用戶期望的播放速度
+        setTimeout(() => {
+          if (this.playbackRateSupported) {
+            console.log('設置播放速度:', this.playSpeed);
+            audio.playbackRate = this.playSpeed;
+            
+            // 驗證設置結果
+            setTimeout(() => {
+              console.log('最終播放速度:', audio.playbackRate);
+              if (Math.abs(audio.playbackRate - this.playSpeed) > 0.01) {
+                console.log('⚠️ 播放速度設置可能未生效');
+              } else {
+                console.log('✅ 播放速度設置成功');
+              }
+            }, 50);
+          } else {
+            console.log('❌ 當前環境不支持播放速度控制');
+          }
+        }, 50);
+      });
+      
+      // 音频事件监听
+      audio.onPlay(() => {
+        console.log('音频开始播放');
+        this.isPlaying = true;
+      });
+      
+      audio.onPause(() => {
+        console.log('音频暂停');
+        this.isPlaying = false;
+      });
+      
+      audio.onTimeUpdate(() => {
+        this.updateCurrentTime();
+      });
+      
+      audio.onEnded(() => {
+        console.log('当前音频播放结束');
+        this.onAudioEnded();
+      });
+      
+      audio.onError((error) => {
+        console.error('音频播放错误:', error);
+        this.isPlaying = false;
+        uni.showToast({
+          title: '音频播放失败',
+          icon: 'none'
+        });
+      });
+      
+      this.currentAudio = audio;
+    },
+    
+    // 更新当前播放时间
+    updateCurrentTime() {
+      if (!this.currentAudio) return;
+      
+      let totalTime = 0;
+      // 计算之前音频的总时长
+      for (let i = 0; i < this.currentAudioIndex; i++) {
+        totalTime += this.currentPageAudios[i].duration;
+      }
+      // 加上当前音频的播放时间
+      totalTime += this.currentAudio.currentTime;
+      
+      this.currentTime = totalTime;
+      
+      // 如果不是正在拖動滑動條，則同步更新滑動條的值
+      if (!this.isDragging) {
+        this.sliderValue = this.currentTime;
+      }
+      
+      // 更新当前高亮的文本索引
+      this.updateHighlightIndex();
+    },
+    
+    // 更新高亮文本索引
+    updateHighlightIndex() {
+      if (!this.isPlaying || this.currentPageAudios.length === 0) {
+        this.currentHighlightIndex = -1;
+        this.$emit('highlight-change', -1);
+        return;
+      }
+      
+      // 根据当前播放的音频索引设置高亮
+      this.currentHighlightIndex = this.currentAudioIndex;
+      console.log('更新高亮索引:', this.currentHighlightIndex, '当前音频索引:', this.currentAudioIndex);
+      
+      // 通知父组件高亮状态变化
+      this.$emit('highlight-change', this.currentHighlightIndex);
+    },
+    
+    // 音频播放结束处理
+    onAudioEnded() {
+      if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
+        // 播放下一个音频
+        this.currentAudioIndex++;
+        this.playAudio();
+      } else {
+        // 所有音频播放完毕
+        if (this.isLoop) {
+          // 循环播放
+          this.currentAudioIndex = 0;
+          this.playAudio();
+        } else {
+          // 停止播放
+          this.isPlaying = false;
+          this.currentTime = this.totalTime;
+          this.currentHighlightIndex = -1;
+          this.$emit('highlight-change', -1);
+        }
+      }
+    },
+    
+    toggleLoop() {
+      this.isLoop = !this.isLoop;
+    },
+    
+    toggleSpeed() {
+      // 檢查是否支持播放速度控制
+      if (!this.playbackRateSupported) {
+        uni.showToast({
+          title: '當前設備不支持播放速度控制',
+          icon: 'none',
+          duration: 2000
+        });
+        return;
+      }
+      
+      const currentIndex = this.speedOptions.indexOf(this.playSpeed);
+      const nextIndex = (currentIndex + 1) % this.speedOptions.length;
+      const oldSpeed = this.playSpeed;
+      this.playSpeed = this.speedOptions[nextIndex];
+      
+      console.log(`播放速度切換: ${oldSpeed}x -> ${this.playSpeed}x`);
+      
+      // 如果当前有音频在播放，更新播放速度
+      if (this.currentAudio) {
+        const wasPlaying = this.isPlaying;
+        const currentTime = this.currentAudio.currentTime;
+        
+        // 設置新的播放速度
+        this.currentAudio.playbackRate = this.playSpeed;
+        
+        // 如果正在播放，需要重啟播放才能使播放速度生效
+        if (wasPlaying) {
+          this.currentAudio.pause();
+          setTimeout(() => {
+            this.currentAudio.seek(currentTime);
+            this.currentAudio.play();
+          }, 50);
+        }
+        
+        console.log('音頻實例播放速度已更新為:', this.currentAudio.playbackRate);
+        
+        // 顯示速度變更提示
+        uni.showToast({
+          title: `播放速度: ${this.playSpeed}x`,
+          icon: 'none',
+          duration: 1000
+        });
+      }
+    },
+    
+    // 滑動條值實時更新 (@input 事件)
+    onSliderInput(value) {
+      // 在拖動過程中實時更新顯示的時間，但不影響實際播放
+      if (this.isDragging) {
+        // 可以在這裡實時更新顯示時間，讓用戶看到拖動到的時間點
+        // 但不改變實際的 currentTime，避免影響播放邏輯
+        console.log('實時更新滑動條值:', value);
+      }
+    },
+    
+    // 滑動條拖動過程中的處理 (@changing 事件)
+    onSliderChanging(value) {
+      // 第一次觸發 changing 事件時，暫停播放並標記為拖動狀態
+      if (!this.isDragging) {
+        if (this.isPlaying) {
+          this.pauseAudio();
+          console.log('開始拖動滑動條，暫停播放');
+        }
+        this.isDragging = true;
+      }
+      
+      // 更新滑動條的值，但不改變實際播放位置
+      this.sliderValue = value;
+      console.log('拖動中，滑動條值:', value);
+    },
+    
+    // 滑動條拖動結束的處理 (@change 事件)
+    onSliderChange(value) {
+      console.log('滑動條變化，跳轉到位置:', value, '是否為拖動:', this.isDragging);
+      
+      // 如果不是拖動狀態（即單點），需要先暫停播放
+      if (!this.isDragging && this.isPlaying) {
+        this.pauseAudio();
+        console.log('單點滑動條，暫停播放');
+      }
+      
+      // 重置拖動狀態
+      this.isDragging = false;
+      this.sliderValue = value;
+      
+      // 跳轉到指定位置，但不自動恢復播放
+      this.seekToTime(value, false);
+      
+      console.log('滑動條操作完成，保持暫停狀態，需要手動點擊播放');
+    },
+    
+    // 跳轉到指定時間
+    seekToTime(targetTime, shouldResume = false) {
+      if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
+        console.log('沒有音頻數據，無法跳轉');
+        return;
+      }
+      
+      // 確保目標時間在有效範圍內
+      targetTime = Math.max(0, Math.min(targetTime, this.totalTime));
+      console.log('跳轉到時間:', targetTime, '秒', '總時長:', this.totalTime, '是否恢復播放:', shouldResume);
+      
+      let accumulatedTime = 0;
+      let targetAudioIndex = -1;
+      let targetAudioTime = 0;
+      
+      // 找到目標時間對應的音頻片段
+      for (let i = 0; i < this.currentPageAudios.length; i++) {
+        const audioDuration = this.currentPageAudios[i].duration || 0;
+        console.log(`音頻片段 ${i}: 時長=${audioDuration}, 累計時間=${accumulatedTime}, 範圍=[${accumulatedTime}, ${accumulatedTime + audioDuration}]`);
+        
+        if (targetTime >= accumulatedTime && targetTime <= accumulatedTime + audioDuration) {
+          targetAudioIndex = i;
+          targetAudioTime = targetTime - accumulatedTime;
+          break;
+        }
+        accumulatedTime += audioDuration;
+      }
+      
+      // 如果沒有找到合適的音頻片段，使用最後一個
+      if (targetAudioIndex === -1 && this.currentPageAudios.length > 0) {
+        targetAudioIndex = this.currentPageAudios.length - 1;
+        targetAudioTime = this.currentPageAudios[targetAudioIndex].duration || 0;
+        console.log('使用最後一個音頻片段作為目標');
+      }
+      
+      console.log('目標音頻索引:', targetAudioIndex, '目標音頻時間:', targetAudioTime);
+      
+      if (targetAudioIndex === -1) {
+        console.error('無法找到目標音頻片段');
+        return;
+      }
+      
+      // 如果需要切換到不同的音頻片段
+      if (targetAudioIndex !== this.currentAudioIndex) {
+        console.log(`切換音頻片段: ${this.currentAudioIndex} -> ${targetAudioIndex}`);
+        this.currentAudioIndex = targetAudioIndex;
+        this.createAudioInstance();
+        
+        // 等待音頻實例創建完成後再跳轉
+        this.waitForAudioReady(() => {
+          if (this.currentAudio) {
+            this.currentAudio.seek(targetAudioTime);
+            this.currentTime = targetTime;
+            console.log('切換音頻並跳轉到:', targetAudioTime, '秒');
+            
+            // 如果拖動前正在播放，則恢復播放
+            if (shouldResume) {
+              this.currentAudio.play();
+              this.isPlaying = true;
+              console.log('恢復播放狀態');
+            }
+          }
+        });
+      } else {
+        // 在當前音頻片段內跳轉
+        if (this.currentAudio) {
+          this.currentAudio.seek(targetAudioTime);
+          this.currentTime = targetTime;
+          console.log('在當前音頻內跳轉到:', targetAudioTime, '秒');
+          
+          // 如果拖動前正在播放，則恢復播放
+          if (shouldResume) {
+            this.currentAudio.play();
+            this.isPlaying = true;
+            console.log('恢復播放狀態');
+          }
+        }
+      }
+    },
+    
+    // 等待音頻實例準備就緒
+    waitForAudioReady(callback, maxAttempts = 10, currentAttempt = 0) {
+      if (currentAttempt >= maxAttempts) {
+        console.error('音頻實例準備超時');
+        return;
+      }
+      
+      if (this.currentAudio && this.currentAudio.src) {
+        // 音頻實例已準備好
+        setTimeout(callback, 50); // 稍微延遲確保完全準備好
+      } else {
+        // 繼續等待
+        setTimeout(() => {
+          this.waitForAudioReady(callback, maxAttempts, currentAttempt + 1);
+        }, 100);
+      }
+    },
+    
+    // 初始檢測播放速度支持（不依賴音頻實例）
+    checkInitialPlaybackRateSupport() {
+      try {
+        const systemInfo = uni.getSystemInfoSync();
+        console.log('初始檢測 - 系統信息:', systemInfo);
+        
+        // 檢查基礎庫版本 - playbackRate需要2.11.0及以上
+        const SDKVersion = systemInfo.SDKVersion || '0.0.0';
+        const versionArray = SDKVersion.split('.').map(v => parseInt(v));
+        const isVersionSupported = versionArray[0] > 2 || 
+          (versionArray[0] === 2 && versionArray[1] > 11) ||
+          (versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
+        
+        if (!isVersionSupported) {
+          this.playbackRateSupported = false;
+          console.log(`初始檢測 - 基礎庫版本過低 (${SDKVersion})，需要2.11.0及以上才支持播放速度控制`);
+          return;
+        }
+        
+        // Android 6以下版本不支持
+        if (systemInfo.platform === 'android') {
+          const androidVersion = systemInfo.system.match(/Android (\d+)/);
+          if (androidVersion && parseInt(androidVersion[1]) < 6) {
+            this.playbackRateSupported = false;
+            console.log('初始檢測 - Android版本過低，需要Android 6及以上才支持播放速度控制');
+            return;
+          }
+        }
+        
+        // 檢查微信原生API是否可用
+        if (typeof wx === 'undefined' || !wx.createInnerAudioContext) {
+          console.log('初始檢測 - 微信原生API不可用，可能影響playbackRate支持');
+        } else {
+          console.log('初始檢測 - 微信原生API可用');
+        }
+        
+        // 如果通過基本檢測，暫時設為支持，等音頻實例創建後再詳細檢測
+        this.playbackRateSupported = true;
+        console.log('初始檢測 - 基本條件滿足，等待音頻實例檢測');
+        
+      } catch (error) {
+        console.error('初始檢測播放速度支持時出錯:', error);
+        this.playbackRateSupported = false;
+      }
+    },
+    
+    // 檢查播放速度控制支持
+    checkPlaybackRateSupport(audio) {
+      try {
+        // 檢查基礎庫版本和平台支持
+        const systemInfo = uni.getSystemInfoSync();
+        console.log('系統信息:', systemInfo);
+        console.log('平台:', systemInfo.platform);
+        console.log('基礎庫版本:', systemInfo.SDKVersion);
+        console.log('系統版本:', systemInfo.system);
+        
+        // 根據uni-app文檔，微信小程序需要基礎庫2.11.0+才支持playbackRate
+        const SDKVersion = systemInfo.SDKVersion || '0.0.0';
+        const versionArray = SDKVersion.split('.').map(v => parseInt(v));
+        const isVersionSupported = versionArray[0] > 2 || 
+          (versionArray[0] === 2 && versionArray[1] > 11) ||
+          (versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
+        
+        console.log('基礎庫版本檢查:', {
+          version: SDKVersion,
+          parsed: versionArray,
+          supported: isVersionSupported
+        });
+        
+        if (!isVersionSupported) {
+          this.playbackRateSupported = false;
+          console.log(`❌ 基礎庫版本不支持 (${SDKVersion})，微信小程序需要2.11.0+才支持playbackRate`);
+          return;
+        }
+        
+        // Android平台需要6.0+版本支持
+        if (systemInfo.platform === 'android') {
+          const androidVersion = systemInfo.system.match(/Android (\d+)/);
+          console.log('Android版本檢查:', androidVersion);
+          if (androidVersion && parseInt(androidVersion[1]) < 6) {
+            this.playbackRateSupported = false;
+            console.log(`❌ Android版本不支持 (${androidVersion[1]})，需要Android 6+才支持playbackRate`);
+            return;
+          }
+        }
+        
+        // 檢查音頻實例是否支持playbackRate
+        console.log('🔍 音頻實例檢查:');
+        console.log('- playbackRate初始值:', audio.playbackRate);
+        console.log('- playbackRate類型:', typeof audio.playbackRate);
+        
+        // 嘗試設置並檢測是否真正支持
+        const testRate = 1.25;
+        const originalRate = audio.playbackRate || 1.0;
+        
+        try {
+          audio.playbackRate = testRate;
+          console.log('- 設置測試速度:', testRate);
+          console.log('- 設置後的值:', audio.playbackRate);
+          
+          // 檢查設置是否生效
+          if (Math.abs(audio.playbackRate - testRate) < 0.01) {
+            this.playbackRateSupported = true;
+            console.log('✅ playbackRate功能正常');
+          } else {
+            this.playbackRateSupported = false;
+            console.log('❌ playbackRate設置無效，可能不被支持');
+          }
+          
+        } catch (error) {
+          this.playbackRateSupported = false;
+          console.log('❌ playbackRate設置出錯:', error);
+        }
+        
+      } catch (error) {
+        console.error('檢查播放速度支持時出錯:', error);
+        this.playbackRateSupported = false;
+      }
+    },
+    
+    formatTime(seconds) {
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    },
+    
+    // 清理音频缓存
+    clearAudioCache() {
+      this.audioCache = {};
+      console.log('音频缓存已清理');
+    },
+    
+    // 限制缓存大小，保留最近访问的页面
+    limitCacheSize(maxSize = 10) {
+      const cacheKeys = Object.keys(this.audioCache);
+      if (cacheKeys.length > maxSize) {
+        // 删除最旧的缓存项
+        const keysToDelete = cacheKeys.slice(0, cacheKeys.length - maxSize);
+        keysToDelete.forEach(key => {
+          delete this.audioCache[key];
+        });
+        console.log('缓存大小已限制，删除了', keysToDelete.length, '个缓存项');
+      }
+    },
+    
+    // 自動加載第一頁音頻並播放
+    async autoLoadAndPlayFirstPage() {
+      try {
+        console.log('開始自動加載第一頁音頻');
+        
+        // 確保當前是第一頁且是文字頁面
+        if (this.currentPage === 1 && this.isTextPage) {
+          console.log('當前是第一頁文字頁面，開始加載音頻');
+          
+          // 加載音頻
+          await this.getCurrentPageAudio();
+          
+          // 檢查是否成功加載音頻
+          if (this.currentPageAudios && this.currentPageAudios.length > 0) {
+            console.log('音頻加載成功，開始自動播放');
+            
+            // 稍微延遲一下確保音頻完全準備好
+            setTimeout(() => {
+              this.playAudio();
+            }, 500);
+          } else {
+            console.log('第一頁沒有音頻數據');
+          }
+        } else {
+          console.log('當前頁面不是第一頁文字頁面，跳過自動播放');
+        }
+      } catch (error) {
+        console.error('自動加載和播放音頻失敗:', error);
+      }
+    },
+    
+    // 清理音频资源
+    destroyAudio() {
+      if (this.currentAudio) {
+        this.currentAudio.destroy();
+        this.currentAudio = null;
+      }
+      this.isPlaying = false;
+      this.clearAudioCache();
+    },
+    
+    // 暂停音频（页面隐藏时调用）
+    pauseOnHide() {
+      this.pauseAudio();
+    }
+  },
+  mounted() {
+    // 初始檢測播放速度支持
+    this.checkInitialPlaybackRateSupport();
+    
+    // 监听音色切换事件
+    uni.$on('selectVoice', (voiceId) => {
+      console.log('音色切換:', this.voiceId, '->', voiceId);
+      
+      // 音色切換時清除所有音頻緩存，因為不同音色的音頻文件不同
+      this.clearAudioCache();
+      
+      // 停止當前播放的音頻
+      if (this.currentAudio) {
+        this.currentAudio.destroy();
+        this.currentAudio = null;
+      }
+      
+      // 重置音頻狀態
+      this.currentPageAudios = [];
+      this.totalTime = 0;
+      this.hasAudioData = false;
+      this.isPlaying = false;
+      this.currentTime = 0;
+      this.currentAudioIndex = 0;
+      this.currentHighlightIndex = -1;
+      this.sliderValue = 0;
+      this.isDragging = false;
+      
+      // 通知父组件音频状态变化
+      this.$emit('audio-state-change', {
+        hasAudioData: this.hasAudioData,
+        isLoading: this.isAudioLoading,
+        currentHighlightIndex: this.currentHighlightIndex
+      });
+      
+      // 重新請求當前頁面的音頻數據
+      if (this.isTextPage) {
+        console.log('音色切換後重新獲取音頻數據');
+        this.handleGetAudio();
+      }
+    });
+  },
+  
+  beforeDestroy() {
+    // 清理事件监听
+    uni.$off('selectVoice');
+    // 清理音频资源
+    this.destroyAudio();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 音频控制栏样式 */
+.audio-controls-wrapper {
+  position: relative;
+  z-index: 10;
+}
+
+.audio-controls {
+  background: #fff;
+  padding: 20rpx 40rpx;
+  border-bottom: 1rpx solid #eee;
+  transition: transform 0.3s ease;
+  position: relative;
+  z-index: 10;
+  &.audio-hidden {
+    transform: translateY(100%);
+  }
+}
+
+.audio-time {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.time-text {
+  font-size: 28rpx;
+  color: #999;
+  min-width: 80rpx;
+}
+
+.progress-container {
+  flex: 1;
+  margin: 0 20rpx;
+}
+
+.audio-controls-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.control-btn {
+  display: flex;
+  align-items: center;
+  padding: 10rpx;
+  gap: 8rpx;
+}
+
+.control-btn.disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.control-text {
+  font-size: 28rpx;
+  color: #4A4A4A;
+}
+
+.play-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10rpx;
+}
+
+/* 音频加载状态样式 */
+.audio-loading-container {
+  background: #fff;
+  padding: 40rpx;
+  border-bottom: 1rpx solid #eee;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20rpx;
+  position: relative;
+  z-index: 10;
+}
+
+.loading-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 获取音频按钮样式 */
+.audio-get-button-container {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  padding: 30rpx;
+  border-radius: 20rpx;
+  border: 2rpx solid #E5E5E5;
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 10;
+}
+
+.get-audio-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+  padding: 20rpx 40rpx;
+  background: linear-gradient(135deg, #06DADC 0%, #04B8BA 100%);
+  border-radius: 50rpx;
+  box-shadow: 0 8rpx 20rpx rgba(6, 218, 220, 0.3);
+  transition: all 0.3s ease;
+}
+
+.get-audio-btn:active {
+  transform: scale(0.95);
+  box-shadow: 0 4rpx 10rpx rgba(6, 218, 220, 0.2);
+}
+
+.get-audio-text {
+  font-size: 32rpx;
+  color: #FFFFFF;
+  font-weight: 500;
+}
+</style>
\ No newline at end of file
diff --git a/subPages/home/book.vue b/subPages/home/book.vue
index 6d03229..00f3627 100644
--- a/subPages/home/book.vue
+++ b/subPages/home/book.vue
@@ -17,7 +17,6 @@
     <swiper 
       class="content-swiper" 
       :current="currentPage - 1"
-      :disable-touch="isAudioLoading"
       @change="onSwiperChange"
     >
       <swiper-item 
@@ -91,70 +90,19 @@
     
     <!-- 自定义底部控制栏 -->
     <view class="custom-tabbar" :class="{ 'tabbar-hidden': !showNavbar }">
-      <!-- 音频控制栏 -->
-      <!-- 获取音频按钮 -->
-      <view v-if="!hasAudioData && !isAudioLoading && isTextPage" class="audio-get-button-container">
-        <view class="get-audio-btn" @click="handleGetAudio">
-          <uv-icon name="play-circle" size="24" color="#06DADC"></uv-icon>
-          <text class="get-audio-text">获取第{{currentPage}}页音频</text>
-        </view>
-      </view>
-      
-      <!-- 音频加载状态 -->
-      <view v-else-if="isAudioLoading && isTextPage" class="audio-loading-container">
-        <uv-loading-icon mode="spinner" size="30" color="#06DADC"></uv-loading-icon>
-        <text class="loading-text">正在加载第{{currentPage}}页音频...</text>
-      </view>
-      
-      <!-- 正常音频控制栏 -->
-      <view v-else-if="hasAudioData" class="audio-controls" :class="{ 'audio-hidden': !isTextPage }">
-        <view class="audio-time">
-          <text class="time-text">{{ formatTime(currentTime) }}</text>
-          <view class="progress-container">
-            <uv-slider
-              v-model="sliderValue"
-              :min="0"
-              :max="totalTime"
-              :step="0.1"
-              activeColor="#06DADC"
-              backgroundColor="#e0e0e0"
-              :blockSize="16"
-              blockColor="#ffffff"
-              :disabled="!hasAudioData || totalTime <= 0"
-              @input="onSliderInput"
-              @changing="onSliderChanging"
-              @change="onSliderChange"
-              :customStyle="{ flex: 1, margin: '0 10px' }"
-            />
-          </view>
-          <text class="time-text">{{ formatTime(totalTime) }}</text>
-        </view>
-        
-        <view class="audio-controls-row">
-          <view class="control-btn" @click="toggleLoop">
-            <uv-icon name="reload" size="20" :color="isLoop ? '#06DADC' : '#999'"></uv-icon>
-            <text class="control-text">循环</text>
-          </view>
-          
-          <view class="control-btn" @click="previousPage">
-            <text class="control-text">上一页</text>
-          </view>
-          
-          <view class="play-btn" @click="togglePlay">
-            <uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="40" color="#666"></uv-icon>
-          </view>
-          
-          <view class="control-btn" @click="nextPage">
-            <text class="control-text">下一页</text>
-          </view>
-          
-          <view class="control-btn" @click="toggleSpeed" :class="{ 'disabled': !playbackRateSupported }">
-            <text class="control-text" :style="{ opacity: playbackRateSupported ? 1 : 0.5 }">
-              {{ playbackRateSupported ? playSpeed + 'x' : '不支持' }}
-            </text>
-          </view>
-        </view>
-      </view>
+      <!-- 音频控制栏组件 -->
+      <AudioControls
+        :current-page="currentPage"
+        :course-id="courseId"
+        :voice-id="voiceId"
+        :book-pages="bookPages"
+        :is-text-page="isTextPage"
+        @previous-page="previousPage"
+        @next-page="nextPage"
+        @audio-state-change="onAudioStateChange"
+        @highlight-change="onHighlightChange"
+        ref="audioControls"
+      />
     
       
       <view style="background-color: #fff;position: relative;z-index: 100" >
@@ -280,7 +228,12 @@
 </template>
 
 <script>
+import AudioControls from './AudioControls.vue'
+
 export default {
+  components: {
+    AudioControls
+  },
   data() {
     return {
       isMember: false,
@@ -292,30 +245,10 @@ export default {
       currentCourse: 1, // 当前课程索引
       currentWordMeaning: null, // 当前显示的单词释义
       isReversed: false, // 是否倒序显示
-      // 音频控制相关数据
-      isPlaying: false,
-      currentTime: 0,
-      totalTime: 0,
-      sliderValue: 0, // 滑動條的值
-      isDragging: false, // 是否正在拖動滑動條
-      isLoop: false,
-      playSpeed: 1.0,
-      speedOptions: [0.5, 0.8, 1.0, 1.25, 1.5, 2.0], // 根據uni-app文檔的官方支持值
-      playbackRateSupported: true, // 播放速度控制是否支持
-      // 音频数组管理
-      currentPageAudios: [], // 当前页面的音频数组
-      currentAudioIndex: 0, // 当前播放的音频索引
-      audioContext: null, // 音频上下文
-      currentAudio: null, // 当前音频实例
-      // 音频缓存管理
-      audioCache: {}, // 页面音频缓存 {pageIndex: {audios: [], totalDuration: 0}}
-      wordAudioCache: {}, // 單詞語音緩存
-      currentWordAudio: null, // 當前播放的單詞音頻實例
-      // 音频加载状态
-      isAudioLoading: false, // 音频是否正在加载
-      hasAudioData: false, // 当前页面是否已有音频数据
       // 文本高亮相关
       currentHighlightIndex: -1, // 当前高亮的文本索引
+      wordAudioCache: {}, // 單詞語音緩存
+      currentWordAudio: null, // 當前播放的單詞音頻實例
       courseIdList: [],
       bookTitle: '',
       courseList: [
@@ -351,10 +284,7 @@ export default {
       // currentPageData是一个数组 其中的一个元素的type是text就会返回true
       return currentPageData && currentPageData.some(item => item.type === 'text');
     },
-    // 计算音频播放进度百分比
-    progressPercent() {
-      return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;
-    },
+
 
     // 动态页面标题
     currentPageTitle() {
@@ -381,170 +311,19 @@ export default {
       }
       
     },
-    // 获取当前页面的音频内容
-    async getCurrentPageAudio() {
-      // 检查缓存中是否已有当前页面的音频数据
-      const cacheKey = `${this.courseId}_${this.currentPage}`;
-      if (this.audioCache[cacheKey]) {
-        console.log('从缓存加载音频数据:', cacheKey);
-        // 从缓存加载音频数据
-        this.currentPageAudios = this.audioCache[cacheKey].audios;
-        this.totalTime = this.audioCache[cacheKey].totalDuration;
-        this.currentAudioIndex = 0;
-        this.isPlaying = false;
-        this.currentTime = 0;
-        return;
-      }
-      
-      // 开始加载状态
-      this.isAudioLoading = true;
-      
-      // 清空当前页面音频数组
-      this.currentPageAudios = [];
-      this.currentAudioIndex = 0;
-      this.isPlaying = false;
-      this.currentTime = 0;
-      this.totalTime = 0;
-      
-      // 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
-      const currentPageData = this.bookPages[this.currentPage - 1];
-      if (currentPageData) {
-        // 收集所有text类型的元素
-        const textItems = currentPageData.filter(item => item.type === 'text');
-        
-        if (textItems.length > 0) {
-          // 并行发送所有音频请求
-          const audioPromises = textItems.map(async (item, index) => {
-            try {
-              // 进行音频请求 - 修正字段名：使用content而不是text
-              const radioRes = await this.$api.music.textToVoice({
-                text: item.content,
-                voiceType: this.voiceId,
-              });
-              console.log(`音频请求响应 ${index + 1}:`, radioRes);
-              
-              if(radioRes.code === 200){
-                // 新格式：API直接返回音頻URL
-                const audioUrl = radioRes.result.audio;
-                // 檢查API是否返回時長信息
-                const duration = radioRes.result.duration || 0;
-                
-                // 同时保存到原始数据中以保持兼容性
-                item.audioUrl = audioUrl;
-                console.log(`音频URL设置成功 ${index + 1}:`, audioUrl, '时长:', duration);
-                
-                return {
-                  url: audioUrl,
-                  text: item.content,
-                  duration: duration, // 優先使用API返回的時長
-                  index: index // 保持原始顺序
-                };
-              } else {
-                console.error(`音频请求失败 ${index + 1}:`, radioRes);
-                return null;
-              }
-            } catch (error) {
-              console.error(`音频请求异常 ${index + 1}:`, error);
-              return null;
-            }
-          });
-          
-          // 等待所有音频请求完成
-          const audioResults = await Promise.all(audioPromises);
-          
-          // 按原始顺序添加到音频数组中，过滤掉失败的请求
-          this.currentPageAudios = audioResults
-            .filter(result => result !== null)
-            .sort((a, b) => a.index - b.index)
-            .map(result => ({
-              url: result.url,
-              text: result.text,
-              duration: result.duration
-            }));
-          
-          console.log('所有音频请求完成，共获取', this.currentPageAudios.length, '个音频');
-        }
-        
-        // 如果有音频，计算总时长
-        if (this.currentPageAudios.length > 0) {
-          await this.calculateTotalDuration();
-          
-          // 将音频数据保存到缓存中
-          const cacheKey = `${this.courseId}_${this.currentPage}`;
-          this.audioCache[cacheKey] = {
-            audios: [...this.currentPageAudios], // 深拷贝音频数组
-            totalDuration: this.totalTime
-          };
-          console.log('音频数据已缓存:', cacheKey, this.audioCache[cacheKey]);
-          
-          // 限制缓存大小
-          this.limitCacheSize(10);
-        }
-      }
-      
-      // 结束加载状态
-      this.isAudioLoading = false;
-      
-      // 设置音频数据状态
-      this.hasAudioData = this.currentPageAudios.length > 0;
+    
+    // 处理AudioControls组件的事件
+    onAudioStateChange(audioState) {
+      // 更新高亮状态
+      this.currentHighlightIndex = audioState.currentHighlightIndex;
     },
     
-    // 重置音频状态
-     resetAudioState() {
-       // 检查当前页面是否已有缓存的音频数据
-       const pageKey = `${this.courseId}_${this.currentPage}`;
-       const cachedAudio = this.audioCache[pageKey];
-       
-       if (cachedAudio && cachedAudio.audios && cachedAudio.audios.length > 0) {
-         // 如果有缓存的音频数据，恢复音频状态
-         this.currentPageAudios = cachedAudio.audios;
-         this.totalTime = cachedAudio.totalDuration || 0;
-         this.hasAudioData = true;
-       } else {
-         // 如果没有缓存的音频数据，重置为初始状态
-         this.currentPageAudios = [];
-         this.totalTime = 0;
-         this.hasAudioData = false;
-       }
-       
-       // 重置播放状态，翻頁時統一設置播放速度為1.0
-     this.currentAudioIndex = 0;
-     this.isPlaying = false;
-     this.currentTime = 0;
-     this.isAudioLoading = false;
-     this.currentHighlightIndex = -1;
-     // 翻頁時強制設置播放速度為1.0（適應微信小程序特性）
-     this.playSpeed = 1.0;
-     },
-     
-     // 手动获取音频
-     async handleGetAudio() {
-       // 检查是否有音色ID
-       if (!this.voiceId) {
-         uni.showToast({
-           title: '音色未加载，请稍后重试',
-           icon: 'none'
-         });
-         return;
-       }
-       
-       // 检查当前页面是否有文本内容
-       if (!this.isTextPage) {
-         uni.showToast({
-           title: '当前页面没有文本内容',
-           icon: 'none'
-         });
-         return;
-       }
-       
-       // 检查是否正在加载
-       if (this.isAudioLoading) {
-         return;
-       }
-       
-       // 调用获取音频方法
-       await this.getCurrentPageAudio();
-     },
+    onHighlightChange(highlightIndex) {
+      // 更新高亮索引
+      this.currentHighlightIndex = highlightIndex;
+    },
+    
+
     // 获取音色列表 拿第一个做默认的音色id
     async getVoiceList() {
       const voiceRes = await this.$api.music.list()
@@ -1376,58 +1155,33 @@ export default {
     },
 
     async previousPage() {
-        // 如果正在加载音频，禁止翻页
-        if (this.isAudioLoading) {
-          return;
-        }
-        
         if (this.currentPage > 1) {
-          // 停止当前音频播放並銷毀實例
-          this.pauseAudio();
-          if (this.currentAudio) {
-            this.currentAudio.destroy();
-            this.currentAudio = null;
-          }
-          
           this.currentPage--;
           // 获取对应页面的数据（如果还没有获取过）
           if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
             await this.getBookPages(this.courseIdList[this.currentPage - 1]);
           }
           
-          // 清空当前音频状态
-          this.resetAudioState();
+          // 通知音频控制组件重置状态
+          if (this.$refs.audioControls) {
+            this.$refs.audioControls.resetAudioState();
+          }
         }
     },
     async nextPage() {
-      // 如果正在加载音频，禁止翻页
-      if (this.isAudioLoading) {
-        return;
-      }
-      
       if (this.currentPage < this.bookPages.length) {
-        // 停止当前音频播放並銷毀實例
-        this.pauseAudio();
-        if (this.currentAudio) {
-          this.currentAudio.destroy();
-          this.currentAudio = null;
-        }
-        
         this.currentPage++;
         // 获取对应页面的数据（如果还没有获取过）
         if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
           await this.getBookPages(this.courseIdList[this.currentPage - 1]);
         }
         
-        // 清空当前音频状态
-        this.resetAudioState();
+        // 通知音频控制组件重置状态
+        if (this.$refs.audioControls) {
+          this.$refs.audioControls.resetAudioState();
+        }
       }
     },
-    formatTime(seconds) {
-      const mins = Math.floor(seconds / 60);
-      const secs = Math.floor(seconds % 60);
-      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-    },
     toggleSound() {
       console.log('音色切换')
       uni.navigateTo({
@@ -1442,18 +1196,6 @@ export default {
       })
     },
     async goToPage(page) {
-      // 如果正在加载音频，禁止翻页
-      if (this.isAudioLoading) {
-        return;
-      }
-      
-      // 停止当前音频播放並銷毀實例
-      this.pauseAudio();
-      if (this.currentAudio) {
-        this.currentAudio.destroy();
-        this.currentAudio = null;
-      }
-      
       this.currentPage = page
       console.log('跳转到页面:', page)
       // 获取对应页面的数据（如果还没有获取过）
@@ -1461,30 +1203,22 @@ export default {
         await this.getBookPages(this.courseIdList[this.currentPage - 1]);
       }
       
-      // 清空当前音频状态
-      this.resetAudioState();
+      // 通知音频控制组件重置状态
+      if (this.$refs.audioControls) {
+        this.$refs.audioControls.resetAudioState();
+      }
     },
     async onSwiperChange(e) {
-      // 如果正在加载音频，禁止翻页
-      if (this.isAudioLoading) {
-        return;
-      }
-      
-      // 停止当前音频播放並銷毀實例
-      this.pauseAudio();
-      if (this.currentAudio) {
-        this.currentAudio.destroy();
-        this.currentAudio = null;
-      }
-      
       this.currentPage = e.detail.current + 1
       // 获取对应页面的数据（如果还没有获取过）
       if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
         await this.getBookPages(this.courseIdList[this.currentPage - 1]);
       }
       
-      // 清空当前音频状态
-      this.resetAudioState();
+      // 通知音频控制组件重置状态
+      if (this.$refs.audioControls) {
+        this.$refs.audioControls.resetAudioState();
+      }
     },
     async getCourseList(id) {
       const res = await this.$api.book.coursePage({
@@ -1500,8 +1234,10 @@ export default {
         this.pageTypes = this.courseIdList.map(() => '')
         // 初始化页面单词数组
         this.pageWords = this.courseIdList.map(() => [])
-        // 重置音频状态
-        this.resetAudioState()
+        // 通知音频控制组件重置状态
+        if (this.$refs.audioControls) {
+          this.$refs.audioControls.resetAudioState();
+        }
         // 初始化第一页
         if (this.courseIdList.length > 0) {
           await this.getBookPages(this.courseIdList[0])
@@ -1600,81 +1336,58 @@ export default {
   },
   },
   async onLoad(args) {
+    // 监听音色切换事件，传递给AudioControls组件处理
     uni.$on('selectVoice', (voiceId) => {
       console.log('音色切換:', this.voiceId, '->', voiceId);
       this.voiceId = voiceId;
       
-      // 音色切換時清除所有音頻緩存，因為不同音色的音頻文件不同
-      this.clearAudioCache();
+      // 清理單詞語音資源
       this.clearWordAudioCache();
-      
-      // 停止當前播放的音頻
-      if (this.currentAudio) {
-        this.currentAudio.destroy();
-        this.currentAudio = null;
-      }
       if (this.currentWordAudio) {
         this.currentWordAudio.destroy();
         this.currentWordAudio = null;
       }
-      
-      // 重置音頻狀態
-      this.currentPageAudios = [];
-      this.totalTime = 0;
-      this.hasAudioData = false;
-      this.isPlaying = false;
-      this.currentTime = 0;
-      this.currentAudioIndex = 0;
-      this.currentHighlightIndex = -1;
-      this.sliderValue = 0;
-      this.isDragging = false;
-      
-      // 重新請求當前頁面的音頻數據
-      if (this.isTextPage) {
-        console.log('音色切換後重新獲取音頻數據');
-        this.getAudio();
-      }
     })
+    
     this.courseId = args.courseId
     this.memberId = args.memberId
-    // 重置音频状态
-    this.resetAudioState()
-    
-    // 初始檢測播放速度支持
-    this.checkInitialPlaybackRateSupport()
     
     // 先获取点进来的课程的页面列表
     await Promise.all([this.getCourseList(this.courseId), this.getCoursePageList(args.bookId), this.getMemberInfo(), this.getVoiceList()])
     
-    // 頁面加載完成後，自動加載第一頁音頻並播放
-    await this.autoLoadAndPlayFirstPage();
-    
+    // 页面加载完成后，通知AudioControls组件自动加载第一页音频
+    this.$nextTick(() => {
+      if (this.$refs.audioControls) {
+        this.$refs.audioControls.autoLoadAndPlayFirstPage();
+      }
+    });
   },
   
 
   
-  // 页面卸载时清理音频资源
+  // 页面卸载时清理资源
   onUnload() {
     uni.$off('selectVoice')
-    if (this.currentAudio) {
-      this.currentAudio.destroy();
-      this.currentAudio = null;
-    }
     // 清理單詞語音資源
     if (this.currentWordAudio) {
       this.currentWordAudio.destroy();
       this.currentWordAudio = null;
     }
-    this.isPlaying = false;
-    // 清理音频缓存
-    this.clearAudioCache();
     // 清理單詞語音緩存
     this.clearWordAudioCache();
+    
+    // 通知AudioControls组件清理资源
+    if (this.$refs.audioControls) {
+      this.$refs.audioControls.destroyAudio();
+    }
   },
   
   // 页面隐藏时暂停音频
   onHide() {
-    this.pauseAudio();
+    // 通知AudioControls组件暂停音频
+    if (this.$refs.audioControls) {
+      this.$refs.audioControls.pauseOnHide();
+    }
   }
 }
 </script>
@@ -2247,149 +1960,5 @@ export default {
   line-height: 48rpx;
 }
 
-/* 音频控制栏样式 */
-.audio-controls {
-  background: #fff;
-  padding: 20rpx 40rpx;
-  border-bottom: 1rpx solid #eee;
-  transition: transform 0.3s ease;
-  position: relative;
-  z-index: 10;
-  &.audio-hidden {
-    transform: translateY(100%);
-    
-  }
-}
 
-.audio-time {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20rpx;
-}
-
-.time-text {
-  font-size: 28rpx;
-  color: #999;
-  min-width: 80rpx;
-}
-
-.progress-container {
-  flex: 1;
-  margin: 0 20rpx;
-}
-
-.progress-bar {
-  position: relative;
-  height: 6rpx;
-  background: #f0f0f0;
-  border-radius: 3rpx;
-}
-
-.progress-fill {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background: #06DADC;
-  border-radius: 3rpx;
-  transition: width 0.1s ease;
-}
-
-.progress-thumb {
-  position: absolute;
-  top: 50%;
-  width: 16rpx;
-  height: 16rpx;
-  background: #06DADC;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition: left 0.1s ease;
-}
-
-.audio-controls-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.control-btn {
-  display: flex;
-  // flex-direction: column;
-  align-items: center;
-
-  padding: 10rpx;
-  gap: 8rpx;
-}
-
-.control-btn.disabled {
-  pointer-events: none;
-  opacity: 0.6;
-}
-
-.control-text {
-  font-size: 28rpx;
-  color: #4A4A4A;
-  // margin-top: 8rpx;
-}
-
-.play-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10rpx;
-}
-
-/* 音频加载状态样式 */
-.audio-loading-container {
-  background: #fff;
-  padding: 40rpx;
-  border-bottom: 1rpx solid #eee;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20rpx;
-  position: relative;
-  z-index: 10;
-}
-
-.loading-text {
-  font-size: 28rpx;
-  color: #999;
-}
-
-/* 获取音频按钮样式 */
-.audio-get-button-container {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  padding: 30rpx;
-  border-radius: 20rpx;
-  border: 2rpx solid #E5E5E5;
-  transition: all 0.3s ease;
-  position: relative;
-  z-index: 10;
-}
-
-.get-audio-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16rpx;
-  padding: 20rpx 40rpx;
-  background: linear-gradient(135deg, #06DADC 0%, #04B8BA 100%);
-  border-radius: 50rpx;
-  box-shadow: 0 8rpx 20rpx rgba(6, 218, 220, 0.3);
-  transition: all 0.3s ease;
-}
-
-.get-audio-btn:active {
-  transform: scale(0.95);
-  box-shadow: 0 4rpx 10rpx rgba(6, 218, 220, 0.2);
-}
-
-.get-audio-text {
-  font-size: 32rpx;
-  color: #FFFFFF;
-  font-weight: 500;
-}
 </style>
\ No newline at end of file