Augcl
/
englishread-front
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
四零语境前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 Commits
3 Branches
4.7 MiB
 
 
 
Tree: fbbbb69471
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'fbbbb69471'
${ noResults }
englishread-front/subPages/home/AudioControls.vue

3366 lines
102 KiB
Raw Blame History

<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'
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, // 上次检查倍速的时间点
}
},
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: {
// 创建HTML5 Audio实例并包装为uni-app兼容接口
createHTML5Audio() {
const audio = new Audio();
// 包装为uni-app兼容的接口
const wrappedAudio = {
// 原生HTML5 Audio实例
_nativeAudio: audio,
// 基本属性
get src() { return audio.src; },
set src(value) { audio.src = value; },
get duration() { return audio.duration || 0; },
get currentTime() { return audio.currentTime || 0; },
get paused() { return audio.paused; },
// 支持倍速的关键属性
get playbackRate() { return audio.playbackRate; },
set playbackRate(value) {
try {
audio.playbackRate = value;
// console.log(`🎵 HTML5 Audio倍速设置成功: ${value}x`);
} catch (error) {
console.error('❌ HTML5 Audio倍速设置失败:', error);
}
},
// 基本方法
play() {
return audio.play().catch(error => {
console.error('HTML5 Audio播放失败:', error);
});
},
pause() {
audio.pause();
},
stop() {
audio.pause();
audio.currentTime = 0;
},
seek(time) {
audio.currentTime = time;
},
destroy() {
audio.pause();
audio.src = '';
audio.load();
},
// 事件绑定方法
onCanplay(callback) {
audio.addEventListener('canplay', callback);
},
onPlay(callback) {
audio.addEventListener('play', callback);
},
onPause(callback) {
audio.addEventListener('pause', callback);
},
onEnded(callback) {
audio.addEventListener('ended', callback);
},
onTimeUpdate(callback) {
audio.addEventListener('timeupdate', callback);
},
onError(callback) {
// 包装错误事件，过滤掉非关键错误
const wrappedCallback = (error) => {
// 只在有src且音频正在播放时才传递错误事件
if (audio.src && audio.src.trim() !== '' && !audio.paused) {
callback(error);
} else {
console.log('🔇 HTML5 Audio错误（已忽略）:', {
hasSrc: !!audio.src,
paused: audio.paused,
errorType: error.type || 'unknown'
});
}
};
audio.addEventListener('error', wrappedCallback);
},
// 移除事件监听
offCanplay(callback) {
audio.removeEventListener('canplay', callback);
},
offPlay(callback) {
audio.removeEventListener('play', callback);
},
offPause(callback) {
audio.removeEventListener('pause', callback);
},
offEnded(callback) {
audio.removeEventListener('ended', callback);
},
offTimeUpdate(callback) {
audio.removeEventListener('timeupdate', callback);
},
offError(callback) {
audio.removeEventListener('error', callback);
}
};
return wrappedAudio;
},
// 检查并自动加载预加载完成的音频
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, 200));
}
}
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;
}
// 检查缓存中是否已有当前页面的音频数据
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 = {
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
});
// 立即创建音频实例并开始播放
this.createAudioInstance();
// 等待音频实例准备好后开始播放（仅在非音色切换时或明确要求自动播放时）
setTimeout(() => {
if (this.currentAudio && !this.isPlaying && (!this.isVoiceChanging || autoPlay)) {
if (autoPlay || !this.isVoiceChanging) {
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);
}
}
// 如果有音频，重新计算精确的总时长
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(10);
}
}
}
// 结束加载状态
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;
// 立即停止并销毁当前音频实例，防止穿音
if (this.currentAudio) {
if (this.isPlaying) {
this.currentAudio.pause();
}
this.currentAudio.destroy();
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();
}
},
// 播放音频
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;
}
const 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;
}
// 🎯 全局音频管理：停止单词音频播放，确保只有一个音频播放
this.stopWordAudio();
// 如果没有当前音频实例或者需要切换音频
if (!this.currentAudio || this.currentAudio.src !== currentAudioData.url) {
this.createAudioInstance();
// 创建实例后稍等一下再播放，确保音频准备就绪
setTimeout(() => {
if (this.currentAudio) {
this.currentAudio.play();
// isPlaying状态会在onPlay事件中自动设置
this.updateHighlightIndex();
}
}, 50);
} else {
// 音频实例已存在，直接播放
this.currentAudio.play();
// isPlaying状态会在onPlay事件中自动设置
this.updateHighlightIndex();
// 确保倍速设置正确
setTimeout(() => {
this.applyPlaybackRate(this.currentAudio);
}, 100);
}
},
// 暂停音频
pauseAudio() {
if (this.currentAudio) {
this.currentAudio.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) {
// 检查单词音频播放状态
if (this.isWordAudioPlaying) {
uni.showToast({
title: '请等待单词音频播放完成',
icon: 'none'
});
return false;
}
// 检查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) {
// 停止当前播放的音频
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();
} else {
console.error('❌ 音频实例创建失败');
}
}, 100);
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) {
// 停止当前播放的音频
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();
} else {
console.error('❌ 音频实例创建失败');
}
}, 100);
return true;
}
}
// 备用方案：使用 textToVoice API 实时生成音频
return this.playTextWithTTS(textContent);
}
},
// 创建音频实例
createAudioInstance() {
// 检查音频数据有效性
if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
console.error('🎵 createAudioInstance: 没有音频数据');
return;
}
if (this.currentAudioIndex < 0 || this.currentAudioIndex >= this.currentPageAudios.length) {
console.error('🎵 createAudioInstance: 音频索引无效', this.currentAudioIndex);
return;
}
const currentAudioData = this.currentPageAudios[this.currentAudioIndex];
if (!currentAudioData || !currentAudioData.url) {
console.error('🎵 createAudioInstance: 音频数据无效', currentAudioData);
return;
}
// 检查音频数据是否属于当前页面
const audioCacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
const currentPageCache = this.audioCache[audioCacheKey];
if (!currentPageCache || !currentPageCache.audios.includes(currentAudioData)) {
console.error('🎵 createAudioInstance: 音频数据与当前页面不匹配');
return;
}
// 销毁之前的音频实例
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 {
// // 在H5环境下，尝试使用原生HTML5 Audio API来支持倍速
// if (typeof window !== 'undefined' && window.Audio) {
// console.log('使用原生HTML5 Audio API以支持倍速');
audio = this.createHTML5Audio();
// } else {
// console.log('使用uni-app音頻API');
// audio = uni.createInnerAudioContext();
// }
// }
const audioUrl = currentAudioData.url;
audio.src = audioUrl;
console.log('🎵 创建音频实例 - 页面:', this.currentPage, '音频索引:', this.currentAudioIndex);
console.log('🎵 创建音频实例 - 音频URL:', audioUrl);
console.log('🎵 创建音频实例 - 音频文本:', currentAudioData.text?.substring(0, 50) + '...');
// 在音頻可以播放時檢測playbackRate支持
audio.onCanplay(() => {
this.checkPlaybackRateSupport(audio);
});
// 音频事件监听
audio.onPlay(() => {
this.isPlaying = true;
// 在播放开始时立即设置倍速
this.applyPlaybackRate(audio);
});
audio.onPause(() => {
console.log('📊 暫停時倍速狀態:', {
當前播放速度: audio.playbackRate + 'x',
期望播放速度: this.playSpeed + 'x'
});
this.isPlaying = false;
});
audio.onTimeUpdate(() => {
this.updateCurrentTime();
// 定期检查倍速设置是否正确（每5秒检查一次）
if (Math.floor(audio.currentTime) % 5 === 0 && Math.floor(audio.currentTime) !== this.lastSpeedCheckTime) {
this.lastSpeedCheckTime = Math.floor(audio.currentTime);
const rateDifference = Math.abs(audio.playbackRate - this.playSpeed);
if (rateDifference > 0.01) {
this.applyPlaybackRate(audio);
}
}
});
audio.onEnded(() => {
this.onAudioEnded();
});
audio.onError((error) => {
// 更精确的错误判断：只在用户主动播放时出现的错误才提示
if (audio.src && audio.src.trim() !== '' && this.isPlaying) {
console.error('音频播放错误:', error);
this.isPlaying = false;
uni.showToast({
title: '音频播放失败',
icon: 'none'
});
} else {
// 其他情况的错误（初始化、预加载等），只记录日志不提示用户
console.log('🔇 音频错误（已忽略）:', {
hasSrc: !!audio.src,
isPlaying: this.isPlaying,
errorType: error.type || 'unknown'
});
}
});
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;
}
// 检查是否正在页面切换中，如果是则不更新高亮
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.currentAudioIndex < this.currentPageAudios.length - 1) {
// 播放下一个音频
this.currentAudioIndex++;
this.playAudio();
// 滚动到下一段音频对应的文字
// setTimeout(() => {
// this.scrollToCurrentAudio();
// }, 300); // 延迟300ms确保音频切换完成
} else {
// 所有音频播放完毕
if (this.isLoop) {
// 循环播放
this.currentAudioIndex = 0;
this.playAudio();
// 滚动到第一段音频对应的文字
// setTimeout(() => {
// this.scrollToCurrentAudio();
// }, 300);
} else {
// 停止播放
this.isPlaying = false;
this.currentTime = this.totalTime;
this.currentHighlightIndex = -1;
this.$emit('highlight-change', -1);
}
}
},
// 滚动到当前播放音频对应的文字
// 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];
console.log('⚡ 倍速切换详情:', {
可用选项: this.speedOptions,
当前索引: currentIndex,
下一个索引: nextIndex,
旧速度: oldSpeed + 'x',
新速度: this.playSpeed + 'x',
切换时间: new Date().toLocaleTimeString()
});
// 如果当前有音频在播放，更新播放速度
console.log('🎵 检查音频实例状态:', {
音频实例存在: !!this.currentAudio,
正在播放: this.isPlaying,
音频src: this.currentAudio ? this.currentAudio.src : '无'
});
if (this.currentAudio) {
const wasPlaying = this.isPlaying;
const currentTime = this.currentAudio.currentTime;
console.log('🔧 准备更新音频播放速度:', {
播放状态: wasPlaying ? '正在播放' : '已暂停',
当前时间: currentTime + 's',
目标速度: this.playSpeed + 'x'
});
// 使用统一的倍速设置方法
this.applyPlaybackRate(this.currentAudio);
// 如果正在播放，需要重启播放才能使播放速度生效
if (wasPlaying) {
this.currentAudio.pause();
setTimeout(() => {
// 不使用seek方法，直接重新播放
this.currentAudio.play();
}, 100);
}
console.log('📊 最终音频状态:', {
播放速度: this.currentAudio.playbackRate + 'x',
播放时间: this.currentAudio.currentTime + 's',
播放状态: this.isPlaying ? '播放中' : '已暂停'
});
// 显示速度变更提示
uni.showToast({
title: `🎵 播放速度: ${this.playSpeed}x`,
icon: 'none',
duration: 1000
});
} else {
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;
this.createAudioInstance();
// 等待音頻實例創建完成後再跳轉
this.waitForAudioReady(() => {
if (this.currentAudio) {
this.currentAudio.seek(targetAudioTime);
this.currentTime = targetTime;
// 如果拖動前正在播放，則恢復播放
if (shouldResume) {
this.currentAudio.play();
this.isPlaying = true;
}
}
});
} else {
// 在當前音頻片段內跳轉
if (this.currentAudio) {
this.currentAudio.seek(targetAudioTime);
this.currentTime = targetTime;
// 如果拖動前正在播放，則恢復播放
if (shouldResume) {
this.currentAudio.play();
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() {
// 1. 停止并销毁当前音频实例
if (this.currentAudio) {
try {
// 先暂停再销毁
if (this.isPlaying) {
this.currentAudio.pause();
}
this.currentAudio.destroy();
} catch (error) {
console.error('销毁音频实例失败:', error);
}
this.currentAudio = null;
}
// 2. 重置所有播放状态
this.isPlaying = false;
this.currentTime = 0;
this.sliderValue = 0;
this.currentHighlightIndex = -1;
// 3. 清理音频缓存
this.clearAudioCache();
// 4. 取消正在进行的请求
this.shouldCancelRequest = true;
// 5. 重置加载状态
this.isAudioLoading = false;
this.isVoiceChanging = false;
this.audioLoadFailed = false;
},
// 停止单词音频播放（全局音频管理）
stopWordAudio() {
try {
// 通过父组件访问book页面的单词音频
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
if (currentPage && currentPage.$vm) {
const bookVm = currentPage.$vm;
if (bookVm.currentWordAudio) {
bookVm.currentWordAudio.pause();
bookVm.currentWordAudio.destroy();
bookVm.currentWordAudio = null;
bookVm.isWordAudioPlaying = false;
}
}
} catch (error) {
}
},
// 课程切换时的完整数据清理（保留音色设置）
resetForCourseChange() {
// 1. 停止并销毁当前音频
if (this.isPlaying && this.currentAudio) {
this.pauseAudio();
}
if (this.currentAudio) {
this.currentAudio.destroy();
this.currentAudio = null;
}
// 2. 清空所有音频相关数据
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. 销毁当前音频实例
if (this.currentAudio) {
this.currentAudio.destroy();
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({
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(10);
}
},
// 检查指定页面是否有音频缓存
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);
}
}
},
mounted() {
console.log('⚙️ 初始倍速配置:', {
默認播放速度: this.playSpeed + 'x',
可選速度選項: this.speedOptions.map(s => s + 'x'),
初始支持狀態: this.playbackRateSupported
});
// 初始檢測播放速度支持
this.checkInitialPlaybackRateSupport();
},
// 自动播放预加载的音频
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;
// 创建音频实例
this.createAudioInstance();
// 稍等一下再播放，确保音频准备就绪
setTimeout(() => {
if (this.currentAudio && !this.isPlaying) {
this.currentAudio.play();
}
}, 200);
} catch (error) {
console.error('自动播放预加载音频失败:', error);
}
},
beforeDestroy() {
// 清理页面切换防抖定时器
if (this.pageChangeTimer) {
clearTimeout(this.pageChangeTimer);
this.pageChangeTimer = null;
}
// 清理音频资源
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;
}
/* 音色切换加载状态特殊样式 */
.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>