|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |  | <template>  <view class="audio-controls-wrapper">    <!-- 获取音频按钮 -->    <view v-if="!hasAudioData && !isAudioLoading && isTextPage && !hasCurrentPageCache" 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="!hasAudioData && !isAudioLoading && isTextPage && hasCurrentPageCache" class="audio-preloaded-container">      <view class="preloaded-tip">        <uv-icon name="checkmark-circle" size="24" color="#52c41a"></uv-icon>        <text class="preloaded-text">第{{currentPage}}页音频已预加载</text>      </view>    </view>        <!-- 音频加载状态 -->    <view v-else-if="isAudioLoading && isTextPage && !hasAudioData" 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 v-if="isAudioLoading" class="loading-indicator">        <uv-loading-icon mode="spinner" size="16" color="#06DADC"></uv-loading-icon>        <text class="loading-indicator-text">正在加载更多音频...</text>      </view>            <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
            :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}}
      // 预加载相关状态
      isPreloading: false, // 是否正在预加载
      preloadProgress: 0, // 预加载进度 (0-100)
      preloadQueue: [], // 预加载队列
      // 音频加载状态
      isAudioLoading: false, // 音频是否正在加载
      hasAudioData: false, // 当前页面是否已有音频数据
      // 文本高亮相关
      currentHighlightIndex: -1, // 当前高亮的文本索引
    }  },  computed: {    // 计算音频播放进度百分比
    progressPercent() {      return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;    },        // 检查当前页面是否有缓存的音频
    hasCurrentPageCache() {      const cacheKey = `${this.courseId}_${this.currentPage}`;      const cachedData = this.audioCache[cacheKey];      return cachedData && cachedData.audios && cachedData.audios.length > 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: {    // 智能分割文本,按句号和逗号分割中英文文本
    splitTextIntelligently(text) {      if (!text || typeof text !== 'string') {        return [text];      }            // 判断是否为中文文本(包含中文字符)
      const isChinese = /[\u4e00-\u9fa5]/.test(text);      const maxLength = isChinese ? 200 : 400;            // 如果文本长度不超过限制,直接返回
      if (text.length <= maxLength) {        return [{          text: text,          startIndex: 0,          endIndex: text.length - 1        }];      }            const segments = [];      let currentText = text;      let globalStartIndex = 0;            while (currentText.length > 0) {        if (currentText.length <= maxLength) {          // 剩余文本不超过限制,直接添加
          segments.push({            text: currentText,            startIndex: globalStartIndex,            endIndex: globalStartIndex + currentText.length - 1          });          break;        }                // 在限制长度内寻找最佳分割点
        let splitIndex = maxLength;        let bestSplitIndex = -1;                // 优先寻找句号
        for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {          const char = currentText[i];          if (char === '。' || char === '.') {            bestSplitIndex = i + 1; // 包含句号
            break;          }        }                // 如果没找到句号,寻找逗号
        if (bestSplitIndex === -1) {          for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {            const char = currentText[i];            if (char === ',' || char === ',' || char === ';' || char === ';') {              bestSplitIndex = i + 1; // 包含标点符号
              break;            }          }        }                // 如果还是没找到合适的分割点,使用默认长度
        if (bestSplitIndex === -1) {          bestSplitIndex = maxLength;        }                // 提取当前段落
        const segment = currentText.substring(0, bestSplitIndex).trim();        if (segment.length > 0) {          segments.push({            text: segment,            startIndex: globalStartIndex,            endIndex: globalStartIndex + segment.length - 1          });        }                // 更新剩余文本和全局索引
        currentText = currentText.substring(bestSplitIndex).trim();        globalStartIndex += bestSplitIndex;      }            console.log(`文本分割完成,原长度: ${text.length},分割为 ${segments.length} 段:`, segments);       return segments;     },          // 分批次请求音频
     async requestAudioInBatches(text, voiceType) {       const segments = this.splitTextIntelligently(text);       const audioSegments = [];       let totalDuration = 0;              console.log(`开始分批次请求音频,共 ${segments.length} 段`);              for (let i = 0; i < segments.length; i++) {         const segment = segments[i];                  try {           console.log(`请求第 ${i + 1}/${segments.length} 段音频:`, segment.text.substring(0, 50) + '...');                      const radioRes = await this.$api.music.textToVoice({             text: segment.text,             voiceType: voiceType,           });                      if (radioRes.code === 200) {             const audioUrl = radioRes.result.url;             const duration = radioRes.result.time || 0;                          audioSegments.push({               url: audioUrl,               text: segment.text,               duration: duration,               startIndex: segment.startIndex,               endIndex: segment.endIndex,               segmentIndex: i,               isSegmented: segments.length > 1,               originalText: text             });                          totalDuration += duration;                          console.log(`第 ${i + 1} 段音频请求成功,时长: ${duration}秒`);           } else {             console.error(`第 ${i + 1} 段音频请求失败:`, radioRes);             // 即使某段失败,也继续处理其他段
             audioSegments.push({               url: null,               text: segment.text,               duration: 0,               startIndex: segment.startIndex,               endIndex: segment.endIndex,               segmentIndex: i,               error: true,               isSegmented: segments.length > 1,               originalText: text             });           }         } catch (error) {           console.error(`第 ${i + 1} 段音频请求异常:`, error);           audioSegments.push({             url: null,             text: segment.text,             duration: 0,             startIndex: segment.startIndex,             endIndex: segment.endIndex,             segmentIndex: i,             error: true,             isSegmented: segments.length > 1,             originalText: text           });         }                  // 每个请求之间间隔400ms,避免请求过于频繁
         if (i < segments.length - 1) {           await new Promise(resolve => setTimeout(resolve, 400));         }       }              console.log(`分批次音频请求完成,成功 ${audioSegments.filter(s => !s.error).length}/${segments.length} 段`);              return {         audioSegments: audioSegments,         totalDuration: totalDuration,         originalText: text       };     },          // 获取当前页面的音频内容
    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;        this.hasAudioData = true;        this.isAudioLoading = false;                // 通知父组件音频状态变化
        this.$emit('audio-state-change', {          hasAudioData: this.hasAudioData,          isLoading: this.isAudioLoading,          currentHighlightIndex: this.currentHighlightIndex        });        return;      }            // 开始加载状态
      this.isAudioLoading = true;      this.hasAudioData = false;            // 清空当前页面音频数组
      this.currentPageAudios = [];      this.currentAudioIndex = 0;      this.isPlaying = false;      this.currentTime = 0;      this.totalTime = 0;            // 通知父组件开始加载
      this.$emit('audio-state-change', {        hasAudioData: this.hasAudioData,        isLoading: this.isAudioLoading,        currentHighlightIndex: this.currentHighlightIndex      });            // 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
      const currentPageData = this.bookPages[this.currentPage - 1];      if (currentPageData) {        // 收集所有text类型的元素
        const textItems = currentPageData.filter(item => item.type === 'text');                if (textItems.length > 0) {          let firstAudioPlayed = false; // 标记是否已播放第一个音频
          let loadedAudiosCount = 0; // 已加载的音频数量
                    // 逐个处理文本项,支持长文本分割
          for (let index = 0; index < textItems.length; index++) {            const item = textItems[index];                        try {              console.log(`处理第 ${index + 1}/${textItems.length} 个文本项,长度: ${item.content.length}`);                            // 使用分批次请求音频
              const batchResult = await this.requestAudioInBatches(item.content, this.voiceId);                            if (batchResult.audioSegments.length > 0) {                // 同时保存到原始数据中以保持兼容性(使用第一段的URL)
                const firstValidSegment = batchResult.audioSegments.find(seg => !seg.error);                if (firstValidSegment) {                  item.audioUrl = firstValidSegment.url;                }                                // 将所有音频段添加到音频数组
                for (const segment of batchResult.audioSegments) {                  if (!segment.error) {                    const audioData = {                      url: segment.url,                      text: segment.text,                      duration: segment.duration,                      startIndex: segment.startIndex,                      endIndex: segment.endIndex,                      segmentIndex: segment.segmentIndex,                      originalTextIndex: index, // 标记属于哪个原始文本项
                      isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
                    };                    this.currentPageAudios.push(audioData);                    loadedAudiosCount++;                  }                }                                // 如果是第一个音频,立即开始播放
                if (!firstAudioPlayed && this.currentPageAudios.length > 0) {                  firstAudioPlayed = true;                  this.hasAudioData = true;                  this.currentAudioIndex = 0;                                    console.log(`第一个音频时长: ${this.currentPageAudios[0].duration}秒`);                                    // 通知父组件有音频数据了,但仍在加载中
                  this.$emit('audio-state-change', {                    hasAudioData: this.hasAudioData,                    isLoading: this.isAudioLoading, // 保持加载状态
                    currentHighlightIndex: this.currentHighlightIndex                  });                                    // 立即创建音频实例并开始播放
                  console.log('创建第一个音频实例并开始播放');                  this.createAudioInstance();                                    // 等待音频实例准备好后开始播放
                  setTimeout(() => {                    if (this.currentAudio && !this.isPlaying) {                      this.currentAudio.play();                      // isPlaying状态会在onPlay事件中自动设置
                      this.updateHighlightIndex();                    }                  }, 100);                }                                console.log(`文本项 ${index + 1} 处理完成,获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);              } else {                console.error(`文本项 ${index + 1} 音频请求全部失败`);              }            } catch (error) {              console.error(`文本项 ${index + 1} 处理异常:`, error);            }          }                    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() {      // 先暂停当前播放的音频
      if (this.isPlaying && this.currentAudio) {        this.pauseAudio();        console.log('翻页时暂停音频播放');      }            // 检查当前页面是否已有缓存的音频数据
      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;                // 自动播放预加载的音频
        console.log('检测到预加载音频,准备自动播放');        this.$nextTick(() => {          this.autoPlayPreloadedAudio();        });      } 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;        } else {          // 如果没有时长信息,使用文字长度估算(备用方案)
          const textLength = audio.text.length;          // 假设较快语速每分钟约300个字符,即每秒约5个字符
          const estimatedDuration = Math.max(1, textLength / 5);          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();          }        };                // 移除onPlay監聽器,避免意外播放
                audio.onError((error) => {          console.error('音频加载失败:', error);          if (!resolved) {            resolved = true;            reject(error);            audio.destroy();          }        });                // 設置較長的超時時間,但不播放音頻
        setTimeout(() => {          if (!resolved) {            console.log('無法獲取音頻時長,使用默認值');            resolved = true;            reject(new Error('無法獲取音頻時長'));            audio.destroy();          }        }, 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();        // 创建实例后稍等一下再播放,确保音频准备就绪
        setTimeout(() => {          if (this.currentAudio) {            this.currentAudio.play();            // isPlaying状态会在onPlay事件中自动设置
            this.updateHighlightIndex();          }        }, 50);      } else {        // 音频实例已存在,直接播放
        this.currentAudio.play();        // isPlaying状态会在onPlay事件中自动设置
        this.updateHighlightIndex();      }    },        // 暂停音频
    pauseAudio() {      if (this.currentAudio) {        this.currentAudio.pause();      }      this.isPlaying = false;      // 暂停时清除高亮
      this.currentHighlightIndex = -1;      // 通知父组件高亮状态变化
      this.emitHighlightChange(-1);    },        // 播放指定的音频段落(通过文本内容匹配)
    playSpecificAudio(textContent) {      console.log('尝试播放指定音频段落:', textContent);            // 检查textContent是否有效
      if (!textContent || typeof textContent !== 'string') {        console.log('无效的文本内容:', textContent);        uni.showToast({          title: '无效的文本内容',          icon: 'none'        });        return false;      }            // 在当前页面音频数组中查找匹配的音频
      let audioIndex = this.currentPageAudios.findIndex(audio =>         audio.text && audio.text.trim() === textContent.trim()      );            // 如果直接匹配失败,尝试匹配分段音频
      if (audioIndex === -1) {        console.log('直接匹配失败,尝试匹配分段音频');                // 查找包含该文本的分段音频
        audioIndex = this.currentPageAudios.findIndex(audio => {          if (!audio.text) return false;                    // 检查是否为分段音频,且原始文本包含目标文本
          if (audio.isSegmented && audio.originalText) {            return audio.originalText.trim() === textContent.trim();          }                    // 检查目标文本是否包含在当前音频文本中,或者当前音频文本包含在目标文本中
          const audioText = audio.text.trim();          const targetText = textContent.trim();          return audioText.includes(targetText) || targetText.includes(audioText);        });                if (audioIndex !== -1) {          console.log('找到分段音频匹配,索引:', audioIndex);        }      }            if (audioIndex !== -1) {        console.log('找到匹配的音频,索引:', audioIndex);                // 停止当前播放的音频
        if (this.currentAudio) {          this.currentAudio.pause();          this.currentAudio.destroy();          this.currentAudio = null;        }                // 设置新的音频索引
        this.currentAudioIndex = audioIndex;                // 重置播放状态
        this.isPlaying = false;        this.currentTime = 0;        this.sliderValue = 0;                // 更新高亮索引
        this.currentHighlightIndex = audioIndex;        this.emitHighlightChange(audioIndex);                // 创建新的音频实例并播放
        this.createAudioInstance();                // 稍等一下再播放,确保音频准备就绪
        setTimeout(() => {          if (this.currentAudio) {            this.currentAudio.play();            console.log('开始播放指定音频段落');          }        }, 100);                return true; // 成功找到并播放
      } else {        console.log('未找到匹配的音频段落:', textContent);        uni.showToast({          title: '未找到对应的音频',          icon: 'none'        });        return false; // 未找到匹配的音频
      }    },        // 创建音频实例
    createAudioInstance() {      // 销毁之前的音频实例
      if (this.currentAudio) {        this.currentAudio.pause();        this.currentAudio.destroy();        this.currentAudio = null;      }            // 重置播放状态
      this.isPlaying = false;            // 優先使用微信原生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.emitHighlightChange(-1);        return;      }            // 获取当前播放的音频数据
      const currentAudio = this.currentPageAudios[this.currentAudioIndex];      if (!currentAudio) {        this.currentHighlightIndex = -1;        this.emitHighlightChange(-1);        return;      }            // 如果是分段音频,需要计算正确的高亮索引
      if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {        // 使用原始文本项的索引作为高亮索引
        this.currentHighlightIndex = currentAudio.originalTextIndex;        console.log('分段音频高亮索引:', this.currentHighlightIndex, '原始文本索引:', currentAudio.originalTextIndex, '段索引:', currentAudio.segmentIndex);      } else {        // 非分段音频,使用音频索引
        this.currentHighlightIndex = this.currentAudioIndex;        console.log('普通音频高亮索引:', this.currentHighlightIndex, '当前音频索引:', this.currentAudioIndex);      }            // 使用辅助方法发送高亮变化事件
      this.emitHighlightChange(this.currentAudioIndex);    },          // 发送高亮变化事件的辅助方法
     emitHighlightChange(highlightIndex = -1) {       if (highlightIndex === -1) {         // 清除高亮
         this.$emit('highlight-change', -1);         return;       }              // 获取对应的音频数据
       const audioData = this.currentPageAudios[highlightIndex];       if (!audioData) {         this.$emit('highlight-change', -1);         return;       }              // 发送详细的高亮信息
       this.$emit('highlight-change', {         highlightIndex: audioData.originalTextIndex !== undefined ? audioData.originalTextIndex : highlightIndex,         isSegmented: audioData.isSegmented || false,         segmentIndex: audioData.segmentIndex || 0,         startIndex: audioData.startIndex || 0,         endIndex: audioData.endIndex || 0,         currentText: audioData.text || ''       });     },          // 音频播放结束处理
    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('音頻加載成功,getCurrentPageAudio已經自動播放第一個音頻');            // getCurrentPageAudio方法已經處理了第一個音頻的播放,這裡不需要再次調用playAudio
          } 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();    },        // 开始预加载音频(由父组件调用)
    async startPreloadAudio() {      if (this.isPreloading) {        console.log('已在预加载中,跳过');        return;      }            try {        console.log('开始预加载音频数据');        this.isPreloading = true;        this.preloadProgress = 0;                // 获取需要预加载的页面列表(当前页面后的几页)
        const preloadPages = this.getPreloadPageList();                if (preloadPages.length === 0) {          console.log('没有需要预加载的页面');          this.isPreloading = false;          return;        }                console.log('需要预加载的页面:', preloadPages);                // 逐个预加载页面音频
        for (let i = 0; i < preloadPages.length; i++) {          const pageInfo = preloadPages[i];                    try {            console.log(`开始预加载第${pageInfo.pageIndex + 1}页音频`);            await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);                        // 更新预加载进度
            this.preloadProgress = Math.round(((i + 1) / preloadPages.length) * 100);            console.log(`预加载进度: ${this.preloadProgress}%`);                        // 延迟一下,避免请求过于频繁
             await new Promise(resolve => setTimeout(resolve, 600));                      } catch (error) {            console.error(`预加载第${pageInfo.pageIndex + 1}页音频失败:`, error);            // 继续预加载其他页面
          }        }                console.log('音频预加载完成');              } catch (error) {        console.error('预加载音频失败:', error);      } finally {        this.isPreloading = false;        this.preloadProgress = 100;      }    },        // 获取需要预加载的页面列表
    getPreloadPageList() {      const preloadPages = [];      const maxPreloadPages = 3; // 优化:最多预加载3页,减少服务器压力
            // 从当前页面的下一页开始预加载
      for (let i = this.currentPage; i < Math.min(this.currentPage + maxPreloadPages, this.bookPages.length); i++) {        const pageData = this.bookPages[i];                // 检查页面是否有文本内容且未缓存
        if (pageData && pageData.length > 0) {          const hasTextContent = pageData.some(item => item.type === 'text' && item.content);          const cacheKey = `${this.courseId}_${i + 1}`;          const isAlreadyCached = this.audioCache[cacheKey];                    if (hasTextContent && !isAlreadyCached) {            preloadPages.push({              pageIndex: i,              pageData: pageData            });          }        }      }            return preloadPages;    },        // 预加载单个页面的音频
    async preloadPageAudio(pageIndex, pageData) {      const cacheKey = `${this.courseId}_${pageIndex + 1}`;            // 检查是否已经缓存
      if (this.audioCache[cacheKey]) {        console.log(`第${pageIndex + 1}页音频已缓存,跳过`);        return;      }            // 收集页面中的文本内容
      const textItems = pageData.filter(item => item.type === 'text' && item.content);            if (textItems.length === 0) {        console.log(`第${pageIndex + 1}页没有文本内容,跳过`);        return;      }            console.log(`第${pageIndex + 1}页有${textItems.length}个文本段落需要预加载`);            const audioArray = [];      let totalDuration = 0;            // 逐个处理文本项,支持长文本分割
      for (let i = 0; i < textItems.length; i++) {        const item = textItems[i];                try {          console.log(`第${pageIndex + 1}页处理第 ${i + 1}/${textItems.length} 个文本项,长度: ${item.content.length}`);                    // 使用分批次请求音频
          const batchResult = await this.requestAudioInBatches(item.content, this.voiceId);                    if (batchResult.audioSegments.length > 0) {            // 将所有音频段添加到音频数组
            for (const segment of batchResult.audioSegments) {              if (!segment.error) {                audioArray.push({                  url: segment.url,                  text: segment.text,                  duration: segment.duration,                  startIndex: segment.startIndex,                  endIndex: segment.endIndex,                  segmentIndex: segment.segmentIndex,                  originalTextIndex: i, // 标记属于哪个原始文本项
                  isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
                });                                totalDuration += segment.duration;              }            }                        console.log(`第${pageIndex + 1}页第${i + 1}个文本项预加载完成,获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);          } else {            console.error(`第${pageIndex + 1}页第${i + 1}个文本项音频预加载全部失败`);          }        } catch (error) {          console.error(`第${pageIndex + 1}页第${i + 1}个文本项处理异常:`, error);        }                // 每个文本项处理之间间隔600ms,避免请求过于频繁
        if (i < textItems.length - 1) {          await new Promise(resolve => setTimeout(resolve, 600));        }      }            // 保存到缓存
      if (audioArray.length > 0) {        this.audioCache[cacheKey] = {          audios: audioArray,          totalDuration: totalDuration        };                console.log(`第${pageIndex + 1}页音频预加载完成,共${audioArray.length}个音频,总时长: ${totalDuration}秒`);                // 限制缓存大小
        this.limitCacheSize(10);      }    },        // 检查指定页面是否有音频缓存
    checkAudioCache(pageNumber) {      const cacheKey = `${this.courseId}_${pageNumber}`;      const cachedData = this.audioCache[cacheKey];            if (cachedData && cachedData.audios && cachedData.audios.length > 0) {        console.log(`第${pageNumber}页音频已缓存,共${cachedData.audios.length}个音频`);        return true;      }            console.log(`第${pageNumber}页音频未缓存`);      return false;    },        // 自动播放已缓存的音频
    async autoPlayCachedAudio() {      try {        const cacheKey = `${this.courseId}_${this.currentPage}`;        const cachedData = this.audioCache[cacheKey];                if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {          console.log('当前页面没有缓存的音频');          return;        }                console.log(`开始自动播放第${this.currentPage}页的缓存音频`);                // 停止当前播放的音频
        this.pauseAudio();                // 设置当前页面的音频数据
        this.currentPageAudios = cachedData.audios;        this.totalDuration = cachedData.totalDuration;                // 重置播放状态
        this.currentAudioIndex = 0;        this.currentTime = 0;        this.isPlaying = false;                // 延迟一下再开始播放,确保UI更新完成
        setTimeout(() => {          this.playAudio();        }, 300);              } catch (error) {        console.error('自动播放缓存音频失败:', error);      }    }  },  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();      }    });  },    // 自动播放预加载的音频
  async autoPlayPreloadedAudio() {    try {      // 检查是否有音频数据
      if (!this.hasAudioData || this.currentPageAudios.length === 0) {        console.log('没有可播放的音频数据');        return;      }            // 检查第一个音频是否有效
      const firstAudio = this.currentPageAudios[0];      if (!firstAudio || !firstAudio.url) {        console.log('第一个音频无效');        return;      }            console.log('开始自动播放预加载音频');            // 重置播放状态
      this.currentAudioIndex = 0;      this.currentTime = 0;      this.sliderValue = 0;      this.currentHighlightIndex = 0;            // 创建音频实例
      this.createAudioInstance();            // 稍等一下再播放,确保音频准备就绪
      setTimeout(() => {        if (this.currentAudio && !this.isPlaying) {          this.currentAudio.play();          console.log('预加载音频自动播放成功');        }      }, 200);          } catch (error) {      console.error('自动播放预加载音频失败:', error);    }  },    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-indicator {  display: flex;  align-items: center;  justify-content: center;  gap: 10rpx;  padding: 10rpx 20rpx;  background: rgba(6, 218, 220, 0.1);  border-radius: 20rpx;  margin-bottom: 10rpx;}
.loading-indicator-text {  font-size: 24rpx;  color: #06DADC;}
.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);}
/* 音频预加载提示样式 */.audio-preloaded-container {  display: flex;  justify-content: center;  align-items: center;  padding: 20rpx;  transition: all 0.3s ease;  position: relative;  z-index: 10;}
.preloaded-tip {  display: flex;  align-items: center;  justify-content: center;  gap: 16rpx;  padding: 20rpx 40rpx;  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);  border-radius: 50rpx;  box-shadow: 0 8rpx 20rpx rgba(82, 196, 26, 0.3);  transition: all 0.3s ease;}
.preloaded-text {  color: #ffffff;  font-size: 28rpx;  font-weight: 500;}
.get-audio-text {  font-size: 32rpx;  color: #FFFFFF;  font-weight: 500;}</style>
 |