- <template>
- <view class="audio-controls-wrapper">
- <!-- 会员限制页面不显示任何音频控制 -->
- <view v-if="isAudioDisabled" class="member-restricted-container">
- <!-- 不显示任何内容,完全隐藏音频功能 -->
- </view>
-
- <!-- 音频加载中 -->
- <view v-else-if="isTextPage && isAudioLoading" 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="isTextPage && hasAudioData" class="audio-controls">
- <!-- 加载指示器 -->
- <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'
- import audioManager from '@/utils/audioManager.js'
-
- export default {
- name: 'AudioControls',
- mixins: [config],
- props: {
- // 基础数据
- currentPage: {
- type: Number,
- default: 1
- },
- courseId: {
- type: String,
- default: ''
- },
- voiceId: {
- type: [String, Number],
- default: ''
- },
- bookPages: {
- type: Array,
- default: () => []
- },
- isTextPage: {
- type: Boolean,
- default: false
- },
- shouldLoadAudio: {
- type: Boolean,
- default: false
- },
- isMember: {
- type: Boolean,
- default: false
- },
- currentPageRequiresMember: {
- type: Boolean,
- default: false
- },
- pagePay: {
- type: Array,
- default: () => []
- },
- isWordAudioPlaying: {
- 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, // 当前页面是否已有音频数据
- isVoiceChanging: false, // 音色切换中的加载状态
- audioLoadFailed: false, // 音频获取失败状态
- // 文本高亮相关
- currentHighlightIndex: -1, // 当前高亮的文本索引
- // 课程切换相关状态
- isJustSwitchedCourse: false, // 是否刚刚切换了课程
- // 页面切换防抖相关
- pageChangeTimer: null, // 页面切换防抖定时器
- isPageChanging: false, // 是否正在切换页面
- // 请求取消相关
- currentRequestId: null, // 当前音频请求ID
- shouldCancelRequest: false, // 是否应该取消当前请求
- // 本地音色ID(避免直接修改prop)
- localVoiceId: '', // 本地音色ID,从prop初始化
- // 倍速检查相关
- lastSpeedCheckTime: -1, // 上次检查倍速的时间点
- // 防抖相关
- isProcessingEnded: false, // 防止 onAudioEnded 多次触发
- }
- },
- computed: {
- // 计算音频播放进度百分比
- progressPercent() {
- return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;
- },
-
- // 检查当前页面是否有缓存的音频
- hasCurrentPageCache() {
- const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- const cachedData = this.audioCache[cacheKey];
-
- // 更严格的缓存有效性检查
- if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
- return false;
- }
-
- // 检查缓存的音色ID是否与当前音色匹配
- if (cachedData.voiceId && cachedData.voiceId !== this.localVoiceId) {
- // console.warn('缓存音色不匹配:', cachedData.voiceId, '!=', this.localVoiceId);
- return false;
- }
-
- // 检查音频URL是否有效
- const firstAudio = cachedData.audios[0];
- if (!firstAudio || !firstAudio.url) {
- // console.warn('缓存音频数据无效');
- return false;
- }
-
- return true;
- },
-
- // 判断音频功能是否应该被禁用(会员限制页面且用户非会员)
- isAudioDisabled() {
- return this.currentPageRequiresMember && !this.isMember;
- },
-
- // 检查当前页面是否正在预加载中
- isCurrentPagePreloading() {
- // 如果全局预加载状态为true,需要检查当前页面是否在预加载队列中
- if (this.isPreloading) {
- // 检查当前页面是否有缓存(如果有缓存说明已经预加载完成)
- const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- const hasCache = this.audioCache[cacheKey] && this.audioCache[cacheKey].audios && this.audioCache[cacheKey].audios.length > 0;
-
- // 如果没有缓存且正在预加载,说明当前页面可能正在预加载中
- if (!hasCache) {
- // console.log('当前页面可能正在预加载中,页面:', this.currentPage, '缓存状态:', hasCache);
- return true;
- }
- }
- return false;
- }
- },
- watch: {
- // 监听页面变化,重置音频状态
- currentPage: {
- handler(newPage, oldPage) {
- if (newPage !== oldPage) {
- // console.log('页面切换:', oldPage, '->', newPage);
-
- // 设置页面切换状态
- this.isPageChanging = true;
-
- // 立即重置音频状态,防止穿音
- this.resetAudioState();
-
- // 清除之前的防抖定时器
- if (this.pageChangeTimer) {
- clearTimeout(this.pageChangeTimer);
- }
-
- // 使用防抖机制,避免频繁切换时重复加载
- this.pageChangeTimer = setTimeout(() => {
- this.isPageChanging = false;
-
- // 检查新页面是否有预加载完成的音频缓存
- this.$nextTick(() => {
- this.checkAndLoadPreloadedAudio();
- });
- }, 300); // 300ms防抖延迟
- }
- },
- immediate: false
- },
- // 监听音色变化,更新本地音色ID
- voiceId: {
- handler(newVoiceId, oldVoiceId) {
- if (newVoiceId !== oldVoiceId) {
- // console.log('🎵 音色ID变化:', oldVoiceId, '->', newVoiceId);
- // 更新本地音色ID
- this.localVoiceId = newVoiceId;
- }
- },
- immediate: true // 立即执行,用于初始化
- },
- // 监听页面数据变化,当页面数据重新加载后自动获取音频
- bookPages: {
- handler(newBookPages, oldBookPages) {
- // 检查当前页面数据是否从无到有
- const currentPageData = newBookPages && newBookPages[this.currentPage - 1];
- const oldCurrentPageData = oldBookPages && oldBookPages[this.currentPage - 1];
-
- if (currentPageData && !oldCurrentPageData && this.shouldLoadAudio && this.courseId) {
- console.log(`🎵 bookPages监听: 当前页面数据已加载,自动获取音频,页面=${this.currentPage}`);
- this.$nextTick(() => {
- this.getCurrentPageAudio();
- });
- }
- },
- deep: true // 深度监听数组变化
- }
- },
- methods: {
- // 检查并自动加载预加载完成的音频
- checkAndLoadPreloadedAudio() {
- // 只在需要加载音频的页面检查
- if (!this.shouldLoadAudio) {
- // 非文本页面,确保音频状态为空
- this.currentPageAudios = [];
- this.totalTime = 0;
- this.hasAudioData = false;
- this.isAudioLoading = false;
-
- // 通知父组件音频状态变化
- this.$emit('audio-state-change', {
- hasAudioData: false,
- isLoading: false,
- currentHighlightIndex: -1
- });
- return;
- }
-
- // 检查当前页面是否有缓存的音频数据
- const pageKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- 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;
- this.isAudioLoading = false;
- this.currentAudioIndex = 0;
- this.currentTime = 0;
- this.currentHighlightIndex = -1;
-
- console.log(`🎵 checkAndLoadPreloadedAudio: 从缓存加载音频,页面=${this.currentPage}, 音频数量=${this.currentPageAudios.length}`);
-
- // 通知父组件音频状态变化
- this.$emit('audio-state-change', {
- hasAudioData: true,
- isLoading: false,
- currentHighlightIndex: -1
- });
- } else {
- // 没有缓存:自动开始加载音频
- console.log(`🎵 checkAndLoadPreloadedAudio: 无缓存,开始加载音频,页面=${this.currentPage}`);
- this.getCurrentPageAudio();
- }
- },
-
- // 智能分割文本,按句号和逗号分割中英文文本
- splitTextIntelligently(text) {
- if (!text || typeof text !== 'string') {
- return [text];
- }
-
- // 判断是否为中文文本(包含中文字符)
- const isChinese = /[\u4e00-\u9fa5]/.test(text);
- const maxLength = isChinese ? 100 : 200;
-
- // 如果文本长度不超过限制,直接返回
- 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;
- }
-
-
- return segments;
- },
-
- // 分批次请求音频
- async requestAudioInBatches(text, voiceType) {
- const segments = this.splitTextIntelligently(text);
- const audioSegments = [];
- let totalDuration = 0;
- const requestId = this.currentRequestId; // 保存当前请求ID
-
-
-
- for (let i = 0; i < segments.length; i++) {
- // 检查是否应该取消请求
- if (this.shouldCancelRequest || this.currentRequestId !== requestId) {
-
- return null; // 返回null表示请求被取消
- }
-
- 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 && radioRes.result && radioRes.result.url) {
- 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;
-
-
- } 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
- });
- }
-
- // 每个请求之间间隔200ms,避免请求过于频繁
- if (i < segments.length - 1) {
- await new Promise(resolve => setTimeout(resolve, 0));
- }
- }
-
- console.log(`分批次音频请求完成,成功 ${audioSegments.filter(s => !s.error).length}/${segments.length} 段`);
-
- return {
- audioSegments: audioSegments,
- totalDuration: totalDuration,
- originalText: text
- };
- },
-
- // 获取当前页面的音频内容
- async getCurrentPageAudio(autoPlay = false) {
- // 🎯 确保音色ID已加载完成后再获取音频
- if (!this.localVoiceId || this.localVoiceId === '' || this.localVoiceId === null || this.localVoiceId === undefined) {
-
-
-
-
- // 设置加载失败状态
- this.isAudioLoading = false;
- this.audioLoadFailed = true;
- this.hasAudioData = false;
-
- // 通知父组件音频状态变化
- this.$emit('audio-state-change', {
- hasAudioData: false,
- isLoading: false,
- currentHighlightIndex: -1
- });
-
- uni.showToast({
- title: '音色未加载,请稍后重试',
- icon: 'none',
- duration: 2000
- });
- return;
- }
-
-
-
- // 检查是否正在页面切换中,如果是则不加载音频
- if (this.isPageChanging) {
-
- return;
- }
-
- // 检查是否需要加载音频
- if (!this.shouldLoadAudio) {
-
- // 清空音频状态
- this.currentPageAudios = [];
- this.hasAudioData = false;
- this.isAudioLoading = false;
- this.audioLoadFailed = false;
- this.currentAudioIndex = 0;
- this.currentTime = 0;
- this.totalTime = 0;
- this.currentHighlightIndex = -1;
-
- // 通知父组件音频状态变化
- this.$emit('audio-state-change', {
- hasAudioData: false,
- isLoading: false,
- currentHighlightIndex: -1
- });
- return;
- }
-
- // 检查会员限制
- if (this.isAudioDisabled) {
- return;
- }
-
- // 检查是否已经在加载中,防止重复加载(音色切换时除外)
- if (this.isAudioLoading && !this.isVoiceChanging) {
- return;
- }
-
- console.log('this.audioCache:', this.audioCache);
-
- // 检查缓存中是否已有当前页面的音频数据
- const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- if (this.audioCache[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;
-
- // 如果是课程切换后的自动加载,清除切换标识
- if (this.isJustSwitchedCourse) {
- this.isJustSwitchedCourse = false;
- }
-
- // 通知父组件音频状态变化
- this.$emit('audio-state-change', {
- hasAudioData: this.hasAudioData,
- isLoading: this.isAudioLoading,
- currentHighlightIndex: this.currentHighlightIndex
- });
- return;
- }
-
- // 开始加载状态
- this.isAudioLoading = true;
- this.hasAudioData = false;
-
- // 重置请求取消标识并生成新的请求ID
- this.shouldCancelRequest = false;
- this.currentRequestId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-
-
- // 清空当前页面音频数组
- 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
- });
-
- try {
- // 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
- const currentPageData = this.bookPages[this.currentPage - 1];
- console.log(`🎵 getCurrentPageAudio: 当前页面=${this.currentPage}, 音色ID=${this.localVoiceId}, 课程ID=${this.courseId}`);
- console.log(`🎵 getCurrentPageAudio: bookPages长度=${this.bookPages.length}, 当前页面数据:`, currentPageData);
-
- // 检查页面数据是否存在且不为空
- if (!currentPageData || currentPageData.length === 0) {
- console.log(`🎵 getCurrentPageAudio: 当前页面数据为空,可能还在加载中`);
- // 通知父组件页面数据需要加载
- this.$emit('page-data-needed', this.currentPage);
-
- // 设置加载失败状态
- this.isAudioLoading = false;
- this.audioLoadFailed = true;
- this.hasAudioData = false;
-
- // 通知父组件音频状态变化
- this.$emit('audio-state-change', {
- hasAudioData: false,
- isLoading: false,
- currentHighlightIndex: -1
- });
-
- uni.showToast({
- title: '页面数据加载中,请稍后重试',
- icon: 'none',
- duration: 2000
- });
- return;
- }
-
- if (currentPageData) {
- // 收集所有text类型的元素
- const textItems = currentPageData.filter(item => item.type === 'text');
- console.log(`🎵 getCurrentPageAudio: 找到${textItems.length}个文本项:`, textItems.map(item => item.content?.substring(0, 50) + '...'));
-
- if (textItems.length > 0) {
- let firstAudioPlayed = false; // 标记是否已播放第一个音频
- let loadedAudiosCount = 0; // 已加载的音频数量
-
- // 逐个处理文本项,支持长文本分割
- for (let index = 0; index < textItems.length; index++) {
- const item = textItems[index];
-
- try {
-
-
- // 使用分批次请求音频
-
- const batchResult = await this.requestAudioInBatches(item.content, this.localVoiceId);
-
- // 检查请求是否被取消
- if (batchResult === null) {
-
- return;
- }
-
- 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 = {
- isLead : item.isLead,
- 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;
-
-
-
- // 通知父组件有音频数据了,但仍在加载中
- this.$emit('audio-state-change', {
- hasAudioData: this.hasAudioData,
- isLoading: this.isAudioLoading, // 保持加载状态
- currentHighlightIndex: this.currentHighlightIndex
- });
-
- // 立即使用audioManager播放第一个音频
- const firstAudioData = this.currentPageAudios[0];
- if (autoPlay || !this.isVoiceChanging) {
- audioManager.playAudio(firstAudioData.url, 'sentence', { playbackRate: this.playSpeed });
- this.isPlaying = true;
- this.updateHighlightIndex();
- }
- }
-
- console.log(`文本项 ${index + 1} 处理完成,获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
- } else {
- console.error(`文本项 ${index + 1} 音频请求全部失败`);
- }
- } catch (error) {
- console.error(`文本项 ${index + 1} 处理异常:`, error);
- }
- }
-
-
-
- // 如果有音频,重新计算精确的总时长
- if (this.currentPageAudios.length > 0) {
- await this.calculateTotalDuration();
-
- // 将音频数据保存到缓存中
- const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- this.audioCache[cacheKey] = {
- audios: [...this.currentPageAudios], // 深拷贝音频数组
- totalDuration: this.totalTime,
- voiceId: this.localVoiceId, // 保存音色ID用于验证
- timestamp: Date.now() // 保存时间戳
- };
-
-
- // 限制缓存大小
- this.limitCacheSize(1000);
- }
- }
- }
-
- // 结束加载状态
- this.isAudioLoading = false;
- this.isVoiceChanging = false; // 清除音色切换加载状态
-
- // 如果是课程切换后的自动加载,清除切换标识
- if (this.isJustSwitchedCourse) {
- this.isJustSwitchedCourse = false;
- }
-
- // 设置音频数据状态和失败状态
- this.hasAudioData = this.currentPageAudios.length > 0;
- this.audioLoadFailed = !this.hasAudioData && this.shouldLoadAudio; // 如果需要音频但没有音频数据,则认为获取失败
-
- // 通知父组件音频状态变化
- this.$emit('audio-state-change', {
- hasAudioData: this.hasAudioData,
- isLoading: this.isAudioLoading,
- audioLoadFailed: this.audioLoadFailed,
- currentHighlightIndex: this.currentHighlightIndex
- });
-
- } catch (error) {
- console.error('getCurrentPageAudio 方法执行异常:', error);
-
- // 确保在异常情况下重置加载状态
- this.isAudioLoading = false;
- this.isVoiceChanging = false;
- this.audioLoadFailed = true;
- this.hasAudioData = false;
-
- // 通知父组件音频加载失败
- this.$emit('audio-state-change', {
- hasAudioData: false,
- isLoading: false,
- audioLoadFailed: true,
- currentHighlightIndex: this.currentHighlightIndex
- });
-
- // 显示错误提示
- uni.showToast({
- title: '音频加载失败,请重试',
- icon: 'none',
- duration: 2000
- });
- }
- },
-
- // 重新获取音频
- retryGetAudio() {
-
-
- // 检查是否需要加载音频
- if (!this.shouldLoadAudio) {
-
- return;
- }
-
- // 重置失败状态
- this.audioLoadFailed = false;
- // 清除当前页面的音频缓存
- const pageKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- if (this.audioCache[pageKey]) {
- delete this.audioCache[pageKey];
-
- }
- // 重新获取音频
- this.getCurrentPageAudio();
- },
-
- // 重置音频状态
- resetAudioState() {
- // 取消当前正在进行的音频请求
- this.shouldCancelRequest = true;
-
- // 使用audioManager停止当前音频
- audioManager.stopCurrentAudio();
- this.currentAudio = null;
-
- // 重置播放状态
- this.currentAudioIndex = 0;
- this.isPlaying = false;
- this.currentTime = 0;
- this.totalTime = 0;
- this.sliderValue = 0;
- this.isAudioLoading = false;
- this.audioLoadFailed = false;
- this.currentHighlightIndex = -1;
- this.playSpeed = 1.0;
-
- // 页面切换时,始终清空当前音频数据,避免数据错乱
- // 音频数据的加载由checkAndLoadPreloadedAudio方法统一处理
- this.currentPageAudios = [];
- this.totalTime = 0;
- this.hasAudioData = false;
-
- // 通知父组件音频状态变化
- this.$emit('audio-state-change', {
- hasAudioData: false,
- isLoading: false,
- currentHighlightIndex: -1
- });
- },
-
- // 加载缓存的音频数据并显示播放控制栏
- loadCachedAudioData() {
- const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- const cachedData = this.audioCache[cacheKey];
-
- // 严格验证缓存数据
- if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
- console.warn('缓存数据不存在或为空:', cacheKey);
- uni.showToast({
- title: '缓存音频数据不存在',
- icon: 'none'
- });
- return;
- }
-
- // 检查音色ID是否匹配
- if (cachedData.voiceId && cachedData.voiceId !== this.localVoiceId) {
- console.warn('缓存音色不匹配:', cachedData.voiceId, '!=', this.localVoiceId);
- uni.showToast({
- title: '音色已切换,请重新获取音频',
- icon: 'none'
- });
- return;
- }
-
- // 检查音频URL是否有效
- const firstAudio = cachedData.audios[0];
- if (!firstAudio || !firstAudio.url) {
- console.warn('缓存音频URL无效');
- uni.showToast({
- title: '缓存音频数据损坏',
- icon: 'none'
- });
- return;
- }
-
-
-
- // 从缓存加载音频数据
- this.currentPageAudios = cachedData.audios;
- this.totalTime = cachedData.totalDuration || 0;
- this.currentAudioIndex = 0;
- this.isPlaying = false;
- this.currentTime = 0;
- this.hasAudioData = true;
- this.isAudioLoading = false;
- this.audioLoadFailed = false;
- this.currentHighlightIndex = -1;
-
- // 通知父组件音频状态变化
- this.$emit('audio-state-change', {
- hasAudioData: this.hasAudioData,
- isLoading: this.isAudioLoading,
- currentHighlightIndex: this.currentHighlightIndex
- });
-
-
- },
-
- // 手动获取音频
- async handleGetAudio() {
- // 检查会员限制
- if (this.isAudioDisabled) {
- return;
- }
-
- // 检查是否有音色ID
- if (!this.localVoiceId) {
- uni.showToast({
- title: '音色未加载,请稍后重试',
- icon: 'none'
- });
- return;
- }
-
- // 检查当前页面是否支持音频播放
- if (!this.shouldLoadAudio) {
- 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) {
-
- 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;
-
- },
-
- // 获取音频时长
- getAudioDuration(audioUrl) {
- return new Promise((resolve, reject) => {
- const audio = uni.createInnerAudioContext();
- audio.src = audioUrl;
-
- let resolved = false;
-
- // 监听音频加载完成事件
- audio.onCanplay(() => {
-
- if (!resolved && audio.duration && audio.duration > 0) {
- resolved = true;
- resolve(audio.duration);
- audio.destroy();
- }
- });
-
- // 监听音频元数据加载完成事件
- audio.onLoadedmetadata = () => {
-
- if (!resolved && audio.duration && audio.duration > 0) {
- resolved = true;
- resolve(audio.duration);
- audio.destroy();
- }
- };
-
- // 监听音频时长更新事件
- audio.onDurationChange = () => {
-
- 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) {
-
- resolved = true;
- reject(new Error('無法獲取音頻時長'));
- audio.destroy();
- }
- }, 1000);
-
- // 最終超時處理
- setTimeout(() => {
- if (!resolved) {
- console.warn('獲取音頻時長超時,使用默認值');
- resolved = true;
- reject(new Error('获取音频时长超时'));
- audio.destroy();
- }
- }, 5000);
- });
- },
-
- // 音频控制方法
- togglePlay() {
- // 检查会员限制
- if (this.isAudioDisabled) {
- return;
- }
-
- if (this.currentPageAudios.length === 0) {
- uni.showToast({
- title: '当前页面没有音频内容',
- icon: 'none'
- });
- return;
- }
-
- if (this.isPlaying) {
- this.pauseAudio();
- } else {
- this.playAudio();
- }
- },
-
- // 播放音频
- async playAudio() {
- // 检查会员限制
- if (this.isAudioDisabled) {
- return;
- }
-
- // 检查音频数据有效性
- if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
- console.warn('🎵 playAudio: 没有音频数据');
- return;
- }
-
- if (this.currentAudioIndex < 0 || this.currentAudioIndex >= this.currentPageAudios.length) {
- console.error('🎵 playAudio: 音频索引无效', this.currentAudioIndex);
- return;
- }
-
- let currentAudioData = this.currentPageAudios[this.currentAudioIndex];
-
-
-
- if (!currentAudioData || !currentAudioData.url) {
- console.error('🎵 playAudio: 音频数据无效', currentAudioData);
- return;
- }
-
- // 检查音频数据是否属于当前页面
- const audioCacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- const currentPageCache = this.audioCache[audioCacheKey];
-
- if (!currentPageCache || !currentPageCache.audios.includes(currentAudioData)) {
- console.error('🎵 playAudio: 音频数据与当前页面不匹配,停止播放');
- return;
- }
-
- try {
- console.log(`🎵 playAudio: 播放音频,索引=${this.currentAudioIndex}, isLead=${currentAudioData.isLead}`);
-
- // 使用audioManager播放句子音频,应用全局语速设置
- await audioManager.playAudio(currentAudioData.url, 'sentence', {
- playbackRate: audioManager.getGlobalPlaybackRate()
- });
-
- // 更新高亮索引
- this.updateHighlightIndex();
- } catch (error) {
- console.error('🎵 播放音频失败:', error);
- uni.showToast({
- title: '音频播放失败',
- icon: 'none'
- });
- }
- },
-
- // 暂停音频
- pauseAudio() {
- audioManager.pause();
- this.isPlaying = false;
- // 暂停时清除高亮
- this.currentHighlightIndex = -1;
- // 通知父组件高亮状态变化
- this.emitHighlightChange(-1);
- },
-
- // 文本标准化函数 - 移除多余空格、标点符号等
- normalizeText(text) {
- if (!text || typeof text !== 'string') return '';
-
- return text
- .trim()
- .replace(/\s+/g, ' ') // 将多个空格替换为单个空格
- .replace(/[,。!?;:""''()【】《》]/g, '') // 移除中文标点
- .replace(/[,.!?;:"'()\[\]<>]/g, '') // 移除英文标点
- .toLowerCase(); // 转为小写(对英文有效)
- },
-
- // 备用方案:使用 TTS API 实时生成并播放音频
- // async playTextWithTTS(textContent) {
- // try {
-
-
- // // 停止当前播放的音频
- // if (this.currentAudio) {
- // this.currentAudio.pause();
- // this.currentAudio.destroy();
- // this.currentAudio = null;
- // }
-
- // // 显示加载提示
- // uni.showLoading({
- // title: '正在生成音频...'
- // });
-
- // // 调用 TTS API
- // const audioRes = await this.$api.music.textToVoice({
- // text: textContent,
- // voiceType: this.voiceId || 1 // 使用当前语音类型,默认为1
- // });
-
- // uni.hideLoading();
-
-
-
- // if (audioRes && audioRes.result && audioRes.result.url) {
- // const audioUrl = audioRes.result.url;
-
- // // 创建并播放音频
- // const audio = uni.createInnerAudioContext();
- // audio.src = audioUrl;
-
- // audio.onPlay(() => {
-
- // this.isPlaying = true;
- // });
-
- // audio.onEnded(() => {
-
- // this.isPlaying = false;
- // audio.destroy();
- // if (this.currentAudio === audio) {
- // this.currentAudio = null;
- // }
- // });
-
- // audio.onError((error) => {
- // console.error('🔊 TTS 音频播放失败:', error);
- // this.isPlaying = false;
- // audio.destroy();
- // if (this.currentAudio === audio) {
- // this.currentAudio = null;
- // }
- // uni.showToast({
- // title: '音频播放失败',
- // icon: 'none'
- // });
- // });
-
- // // 保存当前音频实例并播放
- // this.currentAudio = audio;
- // audio.play();
-
-
- // return true;
- // } else {
- // console.error('❌ TTS API 请求失败:', audioRes);
- // uni.showToast({
- // title: '音频生成失败',
- // icon: 'none'
- // });
- // return false;
- // }
- // } catch (error) {
- // uni.hideLoading();
- // console.error('❌ TTS 音频生成异常:', error);
- // uni.showToast({
- // title: '音频生成失败',
- // icon: 'none'
- // });
- // return false;
- // }
- // },
-
- // 播放指定的音频段落(通过文本内容匹配)
- playSpecificAudio(textContent) {
-
- // 检查textContent是否有效
- if (!textContent || typeof textContent !== 'string') {
- console.error('❌ 无效的文本内容:', textContent);
- uni.showToast({
- title: '无效的文本内容',
- icon: 'none'
- });
- return false;
- }
-
- // 检查音频数据是否已加载
- if (this.currentPageAudios.length === 0) {
- console.warn('⚠️ 当前页面音频数据为空,可能还在加载中');
- uni.showToast({
- title: '音频正在加载中,请稍后再试',
- icon: 'none'
- });
- return false;
- }
-
- // 标准化目标文本
- const normalizedTarget = this.normalizeText(textContent);
-
-
- // 打印所有音频文本用于调试
-
- this.currentPageAudios.forEach((audio, index) => {
-
- console.log(` [${index}] 标准化文本: "${this.normalizeText(audio.text)}"`);
- if (audio.originalText) {
-
- }
- });
-
- let audioIndex = -1;
-
- // 第一步:精确匹配(标准化后)
- audioIndex = this.currentPageAudios.findIndex(audio => {
- if (!audio.text) return false;
- const normalizedAudio = this.normalizeText(audio.text);
- return normalizedAudio === normalizedTarget;
- });
-
- if (audioIndex !== -1) {
-
- } else {
-
-
- // 第二步:包含匹配
- audioIndex = this.currentPageAudios.findIndex(audio => {
- if (!audio.text) return false;
- const normalizedAudio = this.normalizeText(audio.text);
-
- // 双向包含检查
- return normalizedAudio.includes(normalizedTarget) || normalizedTarget.includes(normalizedAudio);
- });
-
- if (audioIndex !== -1) {
-
- } else {
-
-
- // 第三步:分段音频匹配
- audioIndex = this.currentPageAudios.findIndex(audio => {
- if (!audio.text) return false;
-
- // 检查是否为分段音频,且原始文本匹配
- if (audio.isSegmented && audio.originalText) {
- const normalizedOriginal = this.normalizeText(audio.originalText);
- return normalizedOriginal === normalizedTarget ||
- normalizedOriginal.includes(normalizedTarget) ||
- normalizedTarget.includes(normalizedOriginal);
- }
-
- return false;
- });
-
- if (audioIndex !== -1) {
-
- } else {
-
-
- // 第四步:句子分割匹配(针对长句子)
-
-
- // 将目标句子按标点符号分割
- const targetSentences = normalizedTarget.split(/[,。!?;:,!?;:]/).filter(s => s.trim().length > 0);
-
-
- if (targetSentences.length > 1) {
- // 尝试匹配分割后的句子片段
- for (let i = 0; i < targetSentences.length; i++) {
- const sentence = targetSentences[i].trim();
- if (sentence.length < 3) continue; // 跳过太短的片段
-
- audioIndex = this.currentPageAudios.findIndex(audio => {
- if (!audio.text) return false;
- const normalizedAudio = this.normalizeText(audio.text);
- return normalizedAudio.includes(sentence) || sentence.includes(normalizedAudio);
- });
-
- if (audioIndex !== -1) {
-
- break;
- }
- }
- }
-
- if (audioIndex === -1) {
-
-
- // 第五步:关键词匹配(提取关键词进行匹配)
- const keywords = normalizedTarget.split(/\s+/).filter(word => word.length > 2);
-
-
- let bestKeywordMatch = -1;
- let bestKeywordCount = 0;
-
- this.currentPageAudios.forEach((audio, index) => {
- if (!audio.text) return;
- const normalizedAudio = this.normalizeText(audio.text);
-
- // 计算匹配的关键词数量
- const matchedKeywords = keywords.filter(keyword => normalizedAudio.includes(keyword));
- const matchCount = matchedKeywords.length;
-
- if (matchCount > bestKeywordCount && matchCount >= Math.min(2, keywords.length)) {
- bestKeywordCount = matchCount;
- bestKeywordMatch = index;
- console.log(` [${index}] 关键词匹配: ${matchCount}/${keywords.length}, 匹配词: [${matchedKeywords.join(', ')}]`);
- }
- });
-
- if (bestKeywordMatch !== -1) {
- audioIndex = bestKeywordMatch;
-
- } else {
-
-
- // 第六步:相似度匹配(最后的尝试)
- let bestMatch = -1;
- let bestSimilarity = 0;
-
- this.currentPageAudios.forEach((audio, index) => {
- if (!audio.text) return;
-
- const normalizedAudio = this.normalizeText(audio.text);
-
- // 计算简单的相似度(共同字符数 / 较长文本长度)
- const commonChars = [...normalizedTarget].filter(char => normalizedAudio.includes(char)).length;
- const maxLength = Math.max(normalizedTarget.length, normalizedAudio.length);
- const similarity = maxLength > 0 ? commonChars / maxLength : 0;
-
- console.log(` [${index}] 相似度: ${similarity.toFixed(2)}, 文本: "${audio.text}"`);
-
- if (similarity > bestSimilarity && similarity > 0.5) { // 降低相似度阈值到50%
- bestSimilarity = similarity;
- bestMatch = index;
- }
- });
-
- if (bestMatch !== -1) {
- audioIndex = bestMatch;
-
- }
- }
- }
- }
- }
- }
-
- if (audioIndex !== -1) {
- // 使用audioManager停止当前音频并播放新音频
- audioManager.stopCurrentAudio();
-
- // 设置新的音频索引
- this.currentAudioIndex = audioIndex;
-
- // 重置播放状态
- this.isPlaying = false;
- this.currentTime = 0;
- this.sliderValue = 0;
-
- // 更新高亮索引
- this.currentHighlightIndex = audioIndex;
- this.emitHighlightChange(audioIndex);
-
- // 使用audioManager播放指定音频
- const audioData = this.currentPageAudios[audioIndex];
- audioManager.playAudio(audioData.url, 'sentence', { playbackRate: this.playSpeed });
- this.isPlaying = true;
-
- return true; // 成功找到并播放
- } else {
- console.error('❌ 未找到匹配的音频段落:', textContent);
-
-
- // 最后的尝试:首字符匹配(针对划线重点等特殊情况)
- if (normalizedTarget.length > 5) {
- const firstChars = normalizedTarget.substring(0, Math.min(10, normalizedTarget.length));
-
-
- audioIndex = this.currentPageAudios.findIndex(audio => {
- if (!audio.text) return false;
- const normalizedAudio = this.normalizeText(audio.text);
- return normalizedAudio.startsWith(firstChars) || firstChars.startsWith(normalizedAudio.substring(0, Math.min(10, normalizedAudio.length)));
- });
-
- if (audioIndex !== -1) {
-
-
- // 使用audioManager停止当前音频并播放新音频
- audioManager.stopCurrentAudio();
-
- // 设置新的音频索引
- this.currentAudioIndex = audioIndex;
-
- // 重置播放状态
- this.isPlaying = false;
- this.currentTime = 0;
- this.sliderValue = 0;
-
- // 更新高亮索引
- this.currentHighlightIndex = audioIndex;
- this.emitHighlightChange(audioIndex);
-
- // 使用audioManager播放指定音频
- const audioData = this.currentPageAudios[audioIndex];
- audioManager.playAudio(audioData.url, 'sentence', { playbackRate: this.playSpeed });
- this.isPlaying = true;
-
- return true;
- }
- }
-
-
-
- // 备用方案:当找不到匹配音频时,显示提示信息
- console.warn('⚠️ 未找到匹配的音频段落,无法播放:', textContent);
- this.$emit('showToast', '未找到对应的音频内容');
- return false;
- }
- },
-
- // 创建音频实例
- // 更新当前播放时间
- updateCurrentTime() {
- // 使用audioManager获取当前播放时间
- const currentTime = audioManager.getCurrentTime();
- if (currentTime === null) return;
-
- let totalTime = 0;
- // 计算之前音频的总时长
- for (let i = 0; i < this.currentAudioIndex; i++) {
- totalTime += this.currentPageAudios[i].duration;
- }
- // 加上当前音频的播放时间
- totalTime += 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;
- }
-
- // 检查是否正在页面切换中,如果是则不更新高亮
- if (this.isPageChanging) {
- return;
- }
-
- // 获取当前播放的音频数据
- const currentAudio = this.currentPageAudios[this.currentAudioIndex];
- if (!currentAudio) {
- this.currentHighlightIndex = -1;
- this.emitHighlightChange(-1);
- return;
- }
-
- // 检查音频数据是否属于当前页面,防止页面切换时的数据错乱
- const audioCacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- const currentPageCache = this.audioCache[audioCacheKey];
-
- // 如果当前音频数据不属于当前页面,则不更新高亮
- if (!currentPageCache || !currentPageCache.audios.includes(currentAudio)) {
- console.warn('🎵 updateHighlightIndex: 音频数据与当前页面不匹配,跳过高亮更新');
- return;
- }
-
- // 如果是分段音频,需要计算正确的高亮索引
- if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {
- // 使用原始文本项的索引作为高亮索引
- this.currentHighlightIndex = currentAudio.originalTextIndex;
-
- } else {
- // 非分段音频,使用音频索引
- this.currentHighlightIndex = this.currentAudioIndex;
-
- }
-
- // 使用辅助方法发送高亮变化事件
- this.emitHighlightChange(this.currentHighlightIndex);
-
- // 发送滚动事件,让页面滚动到当前高亮的文本
- this.emitScrollToText(this.currentHighlightIndex);
- },
-
- // 发送高亮变化事件的辅助方法
- emitHighlightChange(highlightIndex = -1) {
- if (highlightIndex === -1) {
- // 清除高亮
- this.$emit('highlight-change', -1);
- return;
- }
-
- // 获取当前播放的音频数据(使用currentAudioIndex而不是highlightIndex)
- const audioData = this.currentPageAudios[this.currentAudioIndex];
- if (!audioData) {
- this.$emit('highlight-change', -1);
- return;
- }
-
- const highlightData = {
- 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 || ''
- };
-
- // 发送详细的高亮信息
- this.$emit('highlight-change', highlightData);
- },
-
- // 发送滚动到文本事件的辅助方法
- emitScrollToText(highlightIndex = -1) {
- if (highlightIndex === -1) {
- return;
- }
-
- // 获取当前播放的音频数据
- const audioData = this.currentPageAudios[this.currentAudioIndex];
- if (!audioData) {
- return;
- }
-
- // 检查音频数据是否属于当前页面,防止页面切换时的数据错乱
- const audioCacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
- const currentPageCache = this.audioCache[audioCacheKey];
-
- // 如果当前音频数据不属于当前页面,则不发送滚动事件
- if (!currentPageCache || !currentPageCache.audios.includes(audioData)) {
- console.warn('🎵 emitScrollToText: 音频数据与当前页面不匹配,跳过滚动事件');
- return;
- }
-
- const scrollData = {
- highlightIndex: audioData.originalTextIndex !== undefined ? audioData.originalTextIndex : highlightIndex,
- isSegmented: audioData.isSegmented || false,
- segmentIndex: audioData.segmentIndex || 0,
- currentText: audioData.text || '',
- currentPage: this.currentPage
- };
-
- // 发送滚动事件
- this.$emit('scroll-to-text', scrollData);
- },
-
- // 音频播放结束处理
- onAudioEnded() {
- // 防止多次触发,添加防抖机制
- if (this.isProcessingEnded) {
- console.log('🎵 onAudioEnded: 正在处理中,跳过重复调用');
- return;
- }
-
- this.isProcessingEnded = true;
- console.log(`🎵 onAudioEnded: 当前索引=${this.currentAudioIndex}, 总音频数=${this.currentPageAudios.length}`);
-
- // 添加延迟确保音频状态完全清理
- setTimeout(() => {
-
- if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
-
- let currentAudioData = this.currentPageAudios[this.currentAudioIndex];
- // 检查当前音频的 isLead 状态
- if (currentAudioData && !currentAudioData.isLead) {
- console.log('🎵 playAudio: 当前音频 isLead=false,检查是否需要跳过 isLead=true 的音频');
-
- // 从当前索引开始,跳过所有 isLead=true 的音频
- let nextIndex = this.currentAudioIndex;
- while (nextIndex < (this.currentPageAudios.length - 1)) {
- const audioData = this.currentPageAudios[nextIndex + 1];
- if (audioData && audioData.isLead == true) {
- console.log(`🎵 playAudio: 跳过 isLead=true 的音频,索引=${nextIndex}`);
- nextIndex++;
- } else {
- break;
- }
- }
-
- // 更新当前音频索引
- if (nextIndex !== this.currentAudioIndex) {
- this.currentAudioIndex = nextIndex;
- console.log(`🎵 playAudio: 跳过后的新索引=${this.currentAudioIndex}`);
-
- // 检查新索引是否有效
- if (this.currentAudioIndex >= this.currentPageAudios.length) {
- console.log('🎵 playAudio: 跳过后已到达音频列表末尾');
- return;
- }
- }
- }
-
- // 播放下一个音频
- this.currentAudioIndex++;
- console.log(`🎵 onAudioEnded: 准备播放下一个音频,索引=${this.currentAudioIndex}`, this.currentPageAudios);
-
- // 确保音频数据有效
- const nextAudio = this.currentPageAudios[this.currentAudioIndex];
- if (nextAudio && nextAudio.url) {
- this.playAudio();
- } else {
- console.error('🎵 onAudioEnded: 下一个音频数据无效', nextAudio);
- }
-
- // 滚动到下一段音频对应的文字
- // setTimeout(() => {
- // this.scrollToCurrentAudio();
- // }, 300); // 延迟300ms确保音频切换完成
-
- } else {
- // 所有音频播放完毕
- console.log('🎵 onAudioEnded: 所有音频播放完毕');
- if (this.isLoop) {
- // 循环播放
- this.currentAudioIndex = 0;
- console.log('🎵 onAudioEnded: 循环播放,重置索引为0');
- this.playAudio();
-
- // 滚动到第一段音频对应的文字
- // setTimeout(() => {
- // this.scrollToCurrentAudio();
- // }, 300);
-
- } else {
- // 停止播放
- this.isPlaying = false;
- this.currentTime = this.totalTime;
- this.currentHighlightIndex = -1;
- this.$emit('highlight-change', -1);
- console.log('🎵 onAudioEnded: 播放完毕,停止播放');
- }
- }
-
- // 重置防抖标志
- this.isProcessingEnded = false;
- }, 50); // 添加50ms延迟确保状态清理完成
- },
-
- // 滚动到当前播放音频对应的文字
- // scrollToCurrentAudio() {
- // try {
- // // 获取当前播放的音频数据
- // const currentAudio = this.currentPageAudios[this.currentAudioIndex];
- // if (!currentAudio) {
- // console.log('🔍 scrollToCurrentAudio: 没有当前音频数据');
- // return;
- // }
- //
- // // 确定要滚动到的文字索引
- // let targetTextIndex = this.currentAudioIndex;
- //
- // // 如果是分段音频,使用原始文本索引
- // if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {
- // targetTextIndex = currentAudio.originalTextIndex;
- // }
- //
- // // 获取当前页面数据
- // const currentPageData = this.bookPages[this.currentPage - 1];
- // if (!currentPageData || !Array.isArray(currentPageData)) {
- // console.warn('⚠️ scrollToCurrentAudio: 无法获取当前页面数据');
- // return;
- // }
- //
- // // 判断目标索引位置的元素类型
- // const targetElement = currentPageData[targetTextIndex];
- // let refPrefix = 'textRef'; // 默认为文本
- //
- // if (targetElement && targetElement.type === 'image') {
- // refPrefix = 'imageRef';
- // }
- //
- // // 构建ref名称:根据元素类型使用不同前缀
- // const refName = `${refPrefix}_${this.currentPage - 1}_${targetTextIndex}`;
- //
- // console.log('🎯 scrollToCurrentAudio:', {
- // currentAudioIndex: this.currentAudioIndex,
- // targetTextIndex: targetTextIndex,
- // targetElementType: targetElement?.type || 'unknown',
- // refPrefix: refPrefix,
- // refName: refName,
- // isSegmented: currentAudio.isSegmented,
- // originalTextIndex: currentAudio.originalTextIndex,
- // audioText: currentAudio.text?.substring(0, 50) + '...'
- // });
- //
- // // 通过父组件调用scrollTo插件
- // this.$emit('scroll-to-text', refName);
- //
- // } catch (error) {
- // console.error('❌ scrollToCurrentAudio 执行失败:', error);
- // }
- // },
-
- toggleLoop() {
- this.isLoop = !this.isLoop;
- },
-
- toggleSpeed() {
-
-
- // 简化检测:只在极少数情况下阻止倍速切换
-
-
- // 只有在明确禁用的情况下才阻止(比如Android 4.x)
- if (!this.playbackRateSupported) {
-
- // 不再直接返回,而是继续尝试
- }
-
- const currentIndex = this.speedOptions.indexOf(this.playSpeed);
- const nextIndex = (currentIndex + 1) % this.speedOptions.length;
- const oldSpeed = this.playSpeed;
- this.playSpeed = this.speedOptions[nextIndex];
-
- // 同步语速设置到audioManager
- audioManager.setGlobalPlaybackRate(this.playSpeed);
-
- console.log('⚡ 倍速切换详情:', {
- 可用选项: this.speedOptions,
- 当前索引: currentIndex,
- 下一个索引: nextIndex,
- 旧速度: oldSpeed + 'x',
- 新速度: this.playSpeed + 'x',
- 切换时间: new Date().toLocaleTimeString()
- });
-
- // 同步全局播放速度到audioManager
- audioManager.setGlobalPlaybackRate(this.playSpeed);
-
- // 显示速度变更提示
- uni.showToast({
- title: `🎵 播放速度: ${this.playSpeed}x`,
- icon: 'none',
- duration: 1000
- });
- },
-
- // 滑動條值實時更新 (@input 事件)
- onSliderInput(value) {
- // 在拖動過程中實時更新顯示的時間,但不影響實際播放
- if (this.isDragging) {
- // 可以在這裡實時更新顯示時間,讓用戶看到拖動到的時間點
- // 但不改變實際的 currentTime,避免影響播放邏輯
-
- }
- },
-
- // 滑動條拖動過程中的處理 (@changing 事件)
- onSliderChanging(value) {
- // 第一次觸發 changing 事件時,暫停播放並標記為拖動狀態
- if (!this.isDragging) {
- if (this.isPlaying) {
- this.pauseAudio();
-
- }
- this.isDragging = true;
- }
-
- // 更新滑動條的值,但不改變實際播放位置
- this.sliderValue = value;
-
- },
-
- // 滑動條拖動結束的處理 (@change 事件)
- onSliderChange(value) {
-
-
- // 如果不是拖動狀態(即單點),需要先暫停播放
- if (!this.isDragging && this.isPlaying) {
- this.pauseAudio();
-
- }
-
- // 重置拖動狀態
- this.isDragging = false;
- this.sliderValue = value;
-
- // 跳轉到指定位置,但不自動恢復播放
- this.seekToTime(value, false);
-
-
- },
-
- // 跳轉到指定時間
- seekToTime(targetTime, shouldResume = false) {
- if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
- return;
- }
-
- // 確保目標時間在有效範圍內
- targetTime = Math.max(0, Math.min(targetTime, this.totalTime));
-
- 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;
-
- 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;
- }
-
- if (targetAudioIndex === -1) {
- console.error('無法找到目標音頻片段');
- return;
- }
-
- // 如果需要切換到不同的音頻片段
- if (targetAudioIndex !== this.currentAudioIndex) {
- this.currentAudioIndex = targetAudioIndex;
- // 使用audioManager播放指定音频并跳转到指定时间
- const audioData = this.currentPageAudios[targetAudioIndex];
- audioManager.playAudio(audioData.url, 'sentence', { playbackRate: this.playSpeed, startTime: targetAudioTime });
- this.currentTime = targetTime;
-
- if (shouldResume) {
- this.isPlaying = true;
- } else {
- // 如果不需要恢复播放,则暂停
- audioManager.pause();
- this.isPlaying = false;
- }
- } else {
- // 在當前音頻片段內跳轉
- audioManager.seekTo(targetAudioTime);
- this.currentTime = targetTime;
-
- if (shouldResume) {
- audioManager.resume();
- this.isPlaying = true;
- }
- }
- },
-
- // 等待音頻實例準備就緒
- 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('📱 系统信息:', {
- platform: systemInfo.platform,
- system: systemInfo.system,
- SDKVersion: systemInfo.SDKVersion,
- brand: systemInfo.brand,
- model: systemInfo.model
- });
-
- // 简化检测逻辑:默认启用倍速功能
- // 只在极少数明确不支持的情况下禁用
- this.playbackRateSupported = true;
-
- // 仅对非常老的Android版本进行限制(Android 4.x及以下)
- if (systemInfo.platform === 'android') {
- const androidVersion = systemInfo.system.match(/Android (\d+)/);
- if (androidVersion && parseInt(androidVersion[1]) < 5) {
- this.playbackRateSupported = false;
- console.log(`⚠️ Android版本过低 (${androidVersion[1]}),禁用倍速功能`);
- uni.showToast({
- title: `Android ${androidVersion[1]} 不支持倍速`,
- icon: 'none',
- duration: 2000
- });
- return;
- }
- }
-
-
-
-
-
- // 显示成功提示
- uni.showToast({
- title: '✅ 倍速功能可用',
- icon: 'none',
- duration: 1500
- });
-
- } catch (error) {
- console.error('💥 检测播放速度支持时出错:', error);
- // 即使出错也默认启用
- this.playbackRateSupported = true;
-
- }
- },
-
- // 应用播放速度设置
- applyPlaybackRate(audio) {
- if (!audio) return;
-
-
- console.log('📊 当前状态检查:', {
- playbackRateSupported: this.playbackRateSupported,
- 期望速度: this.playSpeed + 'x',
- 音频当前速度: audio.playbackRate + 'x',
- 音频播放状态: this.isPlaying ? '播放中' : '未播放'
- });
-
- if (this.playbackRateSupported) {
- try {
- // 多次尝试设置倍速,确保生效
- const maxAttempts = 3;
- let attempt = 0;
-
- const trySetRate = () => {
- attempt++;
- audio.playbackRate = this.playSpeed;
-
- setTimeout(() => {
- const actualRate = audio.playbackRate;
- const rateDifference = Math.abs(actualRate - this.playSpeed);
-
-
-
- if (rateDifference >= 0.01 && attempt < maxAttempts) {
-
- setTimeout(trySetRate, 100);
- } else if (rateDifference < 0.01) {
-
- } else {
-
- }
- }, 50);
- };
-
- trySetRate();
-
- } catch (error) {
-
- }
- } else {
-
- }
- },
-
- // 检查播放速度控制支持(简化版本)
- checkPlaybackRateSupport(audio) {
-
- try {
- // 如果初始检测已经禁用,直接返回
- if (!this.playbackRateSupported) {
-
- return;
- }
-
- console.log('🎧 音频实例信息:', {
- 音频对象存在: !!audio,
- 音频对象类型: typeof audio,
- 音频src: audio ? audio.src : '无'
- });
-
- // 检测音频实例类型和倍速支持
- let isHTML5Audio = false;
- let supportsPlaybackRate = false;
-
- if (audio) {
- // 检查是否为HTML5 Audio包装实例
- if (audio._nativeAudio && audio._nativeAudio instanceof Audio) {
- isHTML5Audio = true;
- supportsPlaybackRate = true;
-
- }
- // 检查是否为原生HTML5 Audio
- else if (audio instanceof Audio) {
- isHTML5Audio = true;
- supportsPlaybackRate = true;
-
- }
- // 检查uni-app音频实例的playbackRate属性
- else if (typeof audio.playbackRate !== 'undefined') {
- supportsPlaybackRate = true;
-
- } else {
-
- }
-
- // console.log('🔍 音频实例分析:', {
- // 是否HTML5Audio: isHTML5Audio,
- // 支持倍速: supportsPlaybackRate,
- // 实例类型: audio.constructor?.name || 'unknown',
- // playbackRate属性: typeof audio.playbackRate
- // });
-
- // 如果支持倍速,尝试设置当前播放速度
- if (supportsPlaybackRate) {
- try {
- const currentSpeed = this.playSpeed || 1.0;
- audio.playbackRate = currentSpeed;
- // console.log(`🔧 设置播放速度为 ${currentSpeed}x`);
-
- // 验证设置结果
- // setTimeout(() => {
- // const actualRate = audio.playbackRate;
- // console.log('🔍 播放速度验证:', {
- // 期望值: currentSpeed,
- // 实际值: actualRate,
- // 设置成功: Math.abs(actualRate - currentSpeed) < 0.1
- // });
- // }, 50);
-
- } catch (error) {
-
- }
- }
- } else {
-
- }
-
- // 保持倍速功能启用状态
-
-
- } catch (error) {
- console.error('💥 检查播放速度支持时出错:', error);
- // 即使出错也保持启用状态
-
- }
- },
-
- 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 = {};
-
- },
-
- // 限制缓存大小,保留最近访问的页面
- 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];
- });
-
- }
- },
-
- // 自動加載第一頁音頻並播放
- async autoLoadAndPlayFirstPage() {
- try {
-
-
- // 確保當前是第一頁且需要加載音頻
- if (this.currentPage === 1 && this.shouldLoadAudio) {
-
-
- // 加載音頻
- await this.getCurrentPageAudio();
-
- // 檢查是否成功加載音頻
- if (this.currentPageAudios && this.currentPageAudios.length > 0) {
-
- // getCurrentPageAudio方法已經處理了第一個音頻的播放,這裡不需要再次調用playAudio
- } else {
-
- }
- } else {
-
- }
- } catch (error) {
- console.error('自動加載和播放音頻失敗:', error);
- }
- },
-
- // 清理音频资源
- destroyAudio() {
- // 使用audioManager停止当前音频
- audioManager.stopCurrentAudio();
-
- // 重置所有播放状态
- this.isPlaying = false;
- this.currentTime = 0;
- this.sliderValue = 0;
- this.currentHighlightIndex = -1;
-
- // 清理音频缓存
- this.clearAudioCache();
-
- // 取消正在进行的请求
- this.shouldCancelRequest = true;
-
- // 重置加载状态
- this.isAudioLoading = false;
- this.isVoiceChanging = false;
- this.audioLoadFailed = false;
- },
-
- // 停止单词音频播放(全局音频管理)
- stopWordAudio() {
- // 使用audioManager停止当前音频(如果是单词音频)
- if (audioManager.currentAudioType === 'word') {
- audioManager.stopCurrentAudio();
- }
- },
-
- // 课程切换时的完整数据清理(保留音色设置)
- resetForCourseChange() {
- // 停止当前音频播放
- if (this.isPlaying) {
- this.pauseAudio();
- }
-
- // 使用audioManager停止当前音频
- audioManager.stopCurrentAudio();
-
- // 清空所有音频相关数据
- this.currentPageAudios = [];
- this.currentAudioIndex = 0;
- this.currentTime = 0;
- this.totalTime = 0;
- this.sliderValue = 0;
- this.isDragging = false;
- this.isPlaying = false;
- this.hasAudioData = false;
- this.isAudioLoading = false;
- this.audioLoadFailed = false;
- this.currentHighlightIndex = -1;
-
- // 3. 清空音频缓存(因为课程变了,所有缓存都无效)
- this.clearAudioCache();
-
- // 4. 重置预加载状态
- this.isPreloading = false;
- this.preloadProgress = 0;
- this.preloadedPages = new Set();
-
- // 5. 重置播放控制状态
- this.isLoop = false;
- this.playSpeed = 1.0;
- this.playbackRateSupported = true;
-
- // 6. 重置音色切换状态
- this.isVoiceChanging = false;
-
- // 7. 设置课程切换状态
- this.isJustSwitchedCourse = true;
-
- // 注意:不清空 voiceId,保留用户的音色选择
-
-
-
- // 7. 通知父组件状态变化
- this.$emit('audio-state-change', {
- hasAudioData: false,
- isLoading: false,
- audioLoadFailed: false,
- currentHighlightIndex: -1
- });
- },
-
- // 自动加载并播放音频(课程切换后调用)
- async autoLoadAndPlayAudio() {
-
-
- // 检查是否需要加载音频
- if (!this.shouldLoadAudio) {
-
- return;
- }
-
- // 检查必要条件
- if (!this.courseId || !this.currentPage) {
-
- return;
- }
-
- try {
- // 设置加载状态
- this.isAudioLoading = true;
-
- // 开始加载音频
- await this.getCurrentPageAudio();
-
-
- } catch (error) {
- console.error('自动加载音频失败:', error);
- this.isAudioLoading = false;
- }
- },
-
- // 暂停音频(页面隐藏时调用)
- pauseOnHide() {
- this.pauseAudio();
- },
-
- // 处理音色切换(由父组件调用)
- async handleVoiceChange(newVoiceId, options = {}) {
- console.log(`🎵 handleVoiceChange: 开始音色切换 ${this.localVoiceId} -> ${newVoiceId}`);
- console.log(`🎵 handleVoiceChange: 当前页面=${this.currentPage}, 课程ID=${this.courseId}, bookPages长度=${this.bookPages.length}`);
-
- // 检查是否正在加载音频,如果是则阻止音色切换
- if (this.isAudioLoading) {
- console.log(`🎵 handleVoiceChange: 音频正在加载中,阻止音色切换`);
- throw new Error('音频加载中,请稍后再试');
- }
-
- const { preloadAllPages = true } = options; // 默认预加载所有页面
-
- try {
- // 1. 停止当前播放的音频
- if (this.isPlaying) {
- this.pauseAudio();
- }
-
- // 2. 销毁当前音频实例
- audioManager.stopCurrentAudio();
- this.currentAudio = null;
-
- // 3. 清理所有音频缓存(因为音色变了,所有缓存都无效)
- this.clearAudioCache();
-
-
- // 4. 重置音频状态
- this.currentPageAudios = [];
- this.currentAudioIndex = 0;
- this.isPlaying = false;
- this.currentTime = 0;
- this.totalTime = 0;
- this.hasAudioData = false;
- this.audioLoadFailed = false;
- this.currentHighlightIndex = -1;
-
- // 5. 设置音色切换加载状态
- this.isVoiceChanging = true;
- this.isAudioLoading = true;
-
- // 6. 更新本地音色ID(不直接修改prop)
- this.localVoiceId = newVoiceId;
-
- // 7. 通知父组件开始加载状态
- this.$emit('audio-state-change', {
- hasAudioData: false,
- isLoading: true,
- currentHighlightIndex: -1
- });
-
- // 8. 如果当前页面需要加载音频,优先获取当前页面音频
- if (this.shouldLoadAudio && this.courseId && this.currentPage) {
- console.log(`🎵 handleVoiceChange: 开始获取当前页面音频,页面=${this.currentPage}, 课程=${this.courseId}`);
- await this.getCurrentPageAudio();
- console.log(`🎵 handleVoiceChange: 当前页面音频获取完成,hasAudioData=${this.hasAudioData}`);
- } else {
- // 如果不需要加载音频,直接清除加载状态
- console.log(`🎵 handleVoiceChange: 不需要加载音频,shouldLoadAudio=${this.shouldLoadAudio}, courseId=${this.courseId}, currentPage=${this.currentPage}`);
- this.isAudioLoading = false;
- }
-
- // 9. 清除音色切换加载状态
- this.isVoiceChanging = false;
-
- // 10. 如果需要预加载其他页面,启动预加载
- if (preloadAllPages) {
-
- // 延迟启动预加载,确保当前页面音频加载完成
- setTimeout(() => {
- this.preloadAllPagesAudio();
- }, 1000);
- }
-
- // 11. 通知父组件最终状态
- this.$emit('audio-state-change', {
- hasAudioData: this.hasAudioData,
- isLoading: this.isAudioLoading,
- currentHighlightIndex: this.currentHighlightIndex
- });
-
- // 12. 通知父组件音色切换完成
- this.$emit('voice-change-complete', {
- voiceId: newVoiceId,
- hasAudioData: this.hasAudioData,
- preloadAllPages: preloadAllPages
- });
-
-
- } catch (error) {
- console.error('🎵 AudioControls: 音色切换处理失败:', error);
- // 清除加载状态
- this.isVoiceChanging = false;
- this.isAudioLoading = false;
-
- // 通知父组件状态变化
- this.$emit('audio-state-change', {
- hasAudioData: false,
- isLoading: false,
- currentHighlightIndex: -1
- });
-
- this.$emit('voice-change-error', error);
- }
- },
-
- // 预加载所有页面音频(音色切换时使用)
- async preloadAllPagesAudio() {
- if (this.isPreloading) {
-
- return;
- }
-
- try {
-
- this.isPreloading = true;
- this.preloadProgress = 0;
-
- // 获取所有文本页面
- const allTextPages = [];
- for (let i = 0; i < this.bookPages.length; i++) {
- const pageData = this.bookPages[i];
- const hasTextContent = pageData && pageData.some(item => item.type === 'text');
-
- if (hasTextContent && i !== this.currentPage - 1) { // 排除当前页面,因为已经加载过了
- allTextPages.push({
- pageIndex: i + 1,
- pageData: pageData
- });
- }
- }
-
- if (allTextPages.length === 0) {
-
- this.isPreloading = false;
- return;
- }
-
-
-
- // 逐页预加载音频
- for (let i = 0; i < allTextPages.length; i++) {
- const pageInfo = allTextPages[i];
-
- try {
- console.log(`预加载第 ${pageInfo.pageIndex} 页音频 (${i + 1}/${allTextPages.length})`);
- await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);
-
- // 更新进度
- this.preloadProgress = Math.round(((i + 1) / allTextPages.length) * 100);
-
-
- // 添加小延迟,避免请求过于频繁
- if (i < allTextPages.length - 1) {
- await new Promise(resolve => setTimeout(resolve, 200));
- }
- } catch (error) {
- console.error(`预加载第 ${pageInfo.pageIndex} 页音频失败:`, error);
- // 继续预加载其他页面,不因单页失败而中断
- }
- }
-
-
- } catch (error) {
- console.error('预加载所有页面音频失败:', error);
- } finally {
- this.isPreloading = false;
- this.preloadProgress = 100;
-
- }
- },
-
- // 开始预加载音频(由父组件调用)
- async startPreloadAudio() {
- if (this.isPreloading) {
-
- return;
- }
-
- try {
-
- this.isPreloading = true;
- this.preloadProgress = 0;
-
- // 获取需要预加载的页面列表(当前页面后的几页)
- const preloadPages = this.getPreloadPageList();
-
- if (preloadPages.length === 0) {
-
- this.isPreloading = false;
- return;
- }
-
-
-
- // 逐个预加载页面音频
- for (let i = 0; i < preloadPages.length; i++) {
- const pageInfo = preloadPages[i];
-
- try {
-
- await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);
-
- // 更新预加载进度
- this.preloadProgress = Math.round(((i + 1) / preloadPages.length) * 100);
-
-
- // 延迟一下,避免请求过于频繁
- await new Promise(resolve => setTimeout(resolve, 300));
-
- } catch (error) {
- console.error(`预加载第${pageInfo.pageIndex + 1}页音频失败:`, error);
- // 继续预加载其他页面
- }
- }
-
-
-
- } 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];
-
- // 检查页面是否需要会员且用户非会员,如果是则跳过
- const pageRequiresMember = this.pagePay[i] === 'Y';
- if (pageRequiresMember && !this.isMember) {
-
- continue;
- }
-
- // 检查页面是否有文本内容且未缓存
- if (pageData && pageData.length > 0) {
- const hasTextContent = pageData.some(item => item.type === 'text' && item.content);
- const cacheKey = `${this.courseId}_${i + 1}_${this.voiceId}`;
- 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}_${this.voiceId}`;
-
- // 检查是否已经缓存
- if (this.audioCache[cacheKey]) {
-
- return;
- }
-
- // 收集页面中的文本内容
- const textItems = pageData.filter(item => item.type === 'text' && item.content);
-
- if (textItems.length === 0) {
-
- return;
- }
-
-
-
- const audioArray = [];
- let totalDuration = 0;
-
- // 逐个处理文本项,支持长文本分割
- for (let i = 0; i < textItems.length; i++) {
- const item = textItems[i];
-
- try {
-
-
- // 使用分批次请求音频
- const batchResult = await this.requestAudioInBatches(item.content, this.localVoiceId);
-
- // 检查请求是否被取消
- if (batchResult === null) {
-
- return;
- }
-
- if (batchResult.audioSegments.length > 0) {
- // 将所有音频段添加到音频数组
- for (const segment of batchResult.audioSegments) {
- if (!segment.error) {
- audioArray.push({
- isLead: item.isLead,
- 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);
- }
-
- // 每个文本项处理之间间隔300ms,避免请求过于频繁
- if (i < textItems.length - 1) {
- await new Promise(resolve => setTimeout(resolve, 300));
- }
- }
-
- // 保存到缓存
- if (audioArray.length > 0) {
- this.audioCache[cacheKey] = {
- audios: audioArray,
- totalDuration: totalDuration,
- voiceId: this.localVoiceId, // 保存音色ID用于验证
- timestamp: Date.now() // 保存时间戳
- };
-
-
-
- // 限制缓存大小
- this.limitCacheSize(1000);
- }
- },
-
- // 检查指定页面是否有音频缓存
- checkAudioCache(pageNumber) {
- const cacheKey = `${this.courseId}_${pageNumber}_${this.localVoiceId}`;
- const cachedData = this.audioCache[cacheKey];
-
- if (cachedData && cachedData.audios && cachedData.audios.length > 0) {
-
- return true;
- }
-
-
- return false;
- },
-
- // 自动播放已缓存的音频
- async autoPlayCachedAudio() {
- try {
- // 如果正在音色切换中,不自动播放
- if (this.isVoiceChanging) {
-
- return;
- }
-
- const cacheKey = `${this.courseId}_${this.currentPage}_${this.voiceId}`;
- const cachedData = this.audioCache[cacheKey];
-
- if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
-
- return;
- }
-
-
-
- // 停止当前播放的音频
- 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);
- }
- },
-
- // 清理audioManager事件监听
- removeAudioManagerListeners() {
- if (this.audioManagerListeners) {
- audioManager.off('play', this.audioManagerListeners.onPlay);
- audioManager.off('pause', this.audioManagerListeners.onPause);
- audioManager.off('ended', this.audioManagerListeners.onEnded);
- audioManager.off('error', this.audioManagerListeners.onError);
- audioManager.off('timeupdate', this.audioManagerListeners.onTimeupdate);
- this.audioManagerListeners = null;
- }
- },
-
- // 初始化audioManager事件监听
- initAudioManagerListeners() {
- // 先清理已有的监听器
- this.removeAudioManagerListeners();
-
- // 创建监听器对象,保存引用以便后续清理
- this.audioManagerListeners = {
- onPlay: (data) => {
- if (data && data.audioType === 'sentence') {
- this.isPlaying = true;
- console.log('🎵 句子音频开始播放');
- // 播放开始时立即更新高亮
- this.updateHighlightIndex();
- }
- },
-
- onPause: (data) => {
- if (data && data.audioType === 'sentence') {
- this.isPlaying = false;
- console.log('⏸️ 句子音频暂停');
- }
- },
-
- onEnded: (data) => {
- if (data && data.audioType === 'sentence') {
- this.isPlaying = false;
- console.log('✅ 句子音频播放结束');
- // 自动播放下一个音频
- this.onAudioEnded();
- }
- },
-
- onError: (data) => {
- if (data && data.audioType === 'sentence') {
- this.isPlaying = false;
- console.error('❌ 句子音频播放错误:', data.error);
- uni.showToast({
- title: '音频播放失败',
- icon: 'none'
- });
- }
- },
-
- onTimeupdate: (data) => {
- if (data.audioType === 'sentence') {
- // 计算总时间(包括之前音频的时长)
- let totalTime = 0;
- for (let i = 0; i < this.currentAudioIndex; i++) {
- totalTime += this.currentPageAudios[i].duration;
- }
- totalTime += data.currentTime;
-
- this.currentTime = totalTime;
-
- // 如果不是正在拖動滑動條,則同步更新滑動條的值
- if (!this.isDragging) {
- this.sliderValue = this.currentTime;
- }
- }
- }
- };
-
- // 绑定事件监听器
- audioManager.on('play', this.audioManagerListeners.onPlay);
- audioManager.on('pause', this.audioManagerListeners.onPause);
- audioManager.on('ended', this.audioManagerListeners.onEnded);
- audioManager.on('error', this.audioManagerListeners.onError);
- audioManager.on('timeupdate', this.audioManagerListeners.onTimeupdate);
- }
- },
- mounted() {
- console.log('⚙️ 初始倍速配置:', {
- 默認播放速度: this.playSpeed + 'x',
- 可選速度選項: this.speedOptions.map(s => s + 'x'),
- 初始支持狀態: this.playbackRateSupported
- });
-
- // 初始檢測播放速度支持
- this.checkInitialPlaybackRateSupport();
-
- // 从audioManager获取全局语速设置,如果存在则同步到本地
- const globalPlaybackRate = audioManager.getGlobalPlaybackRate();
- if (globalPlaybackRate && globalPlaybackRate !== this.playSpeed) {
- this.playSpeed = globalPlaybackRate;
- } else {
- // 同步初始语速设置到audioManager
- audioManager.setGlobalPlaybackRate(this.playSpeed);
- }
-
- // 初始化audioManager事件监听
- this.initAudioManagerListeners();
- },
-
- // 自动播放预加载的音频
- async autoPlayPreloadedAudio() {
- try {
- // 如果正在音色切换中,不自动播放
- if (this.isVoiceChanging) {
-
- return;
- }
-
- // 检查是否有音频数据
- if (!this.hasAudioData || this.currentPageAudios.length === 0) {
-
- return;
- }
-
- // 检查第一个音频是否有效
- const firstAudio = this.currentPageAudios[0];
- if (!firstAudio || !firstAudio.url) {
-
- return;
- }
-
-
-
- // 重置播放状态
- this.currentAudioIndex = 0;
- this.currentTime = 0;
- this.sliderValue = 0;
- this.currentHighlightIndex = 0;
-
- // 使用audioManager播放第一个音频
- audioManager.playAudio(firstAudio.url, 'sentence', { playbackRate: this.playSpeed });
- this.isPlaying = true;
-
- } catch (error) {
- console.error('自动播放预加载音频失败:', error);
- }
- },
-
- beforeDestroy() {
- // 清理页面切换防抖定时器
- if (this.pageChangeTimer) {
- clearTimeout(this.pageChangeTimer);
- this.pageChangeTimer = null;
- }
-
- // 清理音频资源
- this.destroyAudio();
-
- // 清理audioManager事件监听器
- this.removeAudioManagerListeners();
- }
- }
- </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;
- }
-
- /* 音色切换加载状态特殊样式 */
- .voice-changing {
- background: linear-gradient(135deg, #fff5f0 0%, #ffe7d9 100%);
- border: 2rpx solid #ff6b35;
- }
-
- .voice-changing-text {
- color: #ff6b35;
- font-weight: 500;
- }
-
- /* 预加载状态特殊样式 */
- .preloading {
- background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
- border: 2rpx solid #06DADC;
- }
-
- .preloading .loading-text {
- color: #06DADC;
- font-weight: 500;
- }
-
- /* 课程切换状态特殊样式 */
- .course-switching {
- background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
- border: 2rpx solid #52c41a;
- }
-
- .course-switching .loading-text {
- color: #52c41a;
- font-weight: 500;
- }
-
- /* 获取音频按钮样式 */
- .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;
- }
-
- /* 音频获取失败样式 */
- .audio-failed-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 20rpx;
- gap: 20rpx;
- }
-
- .failed-tip {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 16rpx;
- padding: 20rpx 40rpx;
- background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
- border-radius: 50rpx;
- box-shadow: 0 8rpx 20rpx rgba(255, 77, 79, 0.3);
- }
-
- .failed-text {
- color: #ffffff;
- font-size: 28rpx;
- font-weight: 500;
- }
-
- .retry-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 12rpx;
- padding: 16rpx 32rpx;
- background: linear-gradient(135deg, #06DADC 0%, #05B8BA 100%);
- border-radius: 40rpx;
- box-shadow: 0 6rpx 16rpx rgba(6, 218, 220, 0.3);
- transition: all 0.3s ease;
- }
-
- .retry-btn:active {
- transform: scale(0.95);
- box-shadow: 0 4rpx 12rpx rgba(6, 218, 220, 0.4);
- }
-
- .retry-text {
- color: #ffffff;
- font-size: 26rpx;
- font-weight: 500;
- }
-
- .get-audio-text {
- font-size: 32rpx;
- color: #FFFFFF;
- font-weight: 500;
- }
-
- /* 会员限制容器样式 */
- .member-restricted-container {
- height: 0;
- overflow: hidden;
- opacity: 0;
- pointer-events: none;
- }
- </style>
|