englishread-front/subPages/home/AudioControls.vue

<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>