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.
1838 lines
61 KiB
1838 lines
61 KiB
<template>
|
|
<view class="audio-controls-wrapper">
|
|
<!-- 获取音频按钮 -->
|
|
<view v-if="!hasAudioData && !isAudioLoading && isTextPage && !hasCurrentPageCache" class="audio-get-button-container">
|
|
<view class="get-audio-btn" @click="handleGetAudio">
|
|
<uv-icon name="play-circle" size="24" color="#06DADC"></uv-icon>
|
|
<text class="get-audio-text">获取第{{currentPage}}页音频</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 音频已预加载提示 -->
|
|
<view v-else-if="!hasAudioData && !isAudioLoading && isTextPage && hasCurrentPageCache" class="audio-preloaded-container">
|
|
<view class="preloaded-tip">
|
|
<uv-icon name="checkmark-circle" size="24" color="#52c41a"></uv-icon>
|
|
<text class="preloaded-text">第{{currentPage}}页音频已预加载</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 音频加载状态 -->
|
|
<view v-else-if="isAudioLoading && isTextPage && !hasAudioData" class="audio-loading-container">
|
|
<uv-loading-icon mode="spinner" size="30" color="#06DADC"></uv-loading-icon>
|
|
<text class="loading-text">正在加载第{{currentPage}}页音频...</text>
|
|
</view>
|
|
|
|
<!-- 正常音频控制栏 -->
|
|
<view v-else-if="hasAudioData" class="audio-controls" :class="{ 'audio-hidden': !isTextPage }">
|
|
<!-- 加载指示器 -->
|
|
<view v-if="isAudioLoading" class="loading-indicator">
|
|
<uv-loading-icon mode="spinner" size="16" color="#06DADC"></uv-loading-icon>
|
|
<text class="loading-indicator-text">正在加载更多音频...</text>
|
|
</view>
|
|
|
|
<view class="audio-time">
|
|
<text class="time-text">{{ formatTime(currentTime) }}</text>
|
|
<view class="progress-container">
|
|
<uv-slider
|
|
v-model="sliderValue"
|
|
:min="0"
|
|
:max="totalTime"
|
|
:step="0.1"
|
|
activeColor="#06DADC"
|
|
backgroundColor="#e0e0e0"
|
|
:blockSize="16"
|
|
blockColor="#ffffff"
|
|
disabled
|
|
|
|
:customStyle="{ flex: 1, margin: '0 10px' }"
|
|
/>
|
|
</view>
|
|
<text class="time-text">{{ formatTime(totalTime) }}</text>
|
|
</view>
|
|
|
|
<view class="audio-controls-row">
|
|
<view class="control-btn" @click="toggleLoop">
|
|
<uv-icon name="reload" size="20" :color="isLoop ? '#06DADC' : '#999'"></uv-icon>
|
|
<text class="control-text">循环</text>
|
|
</view>
|
|
|
|
<view class="control-btn" @click="$emit('previous-page')">
|
|
<text class="control-text">上一页</text>
|
|
</view>
|
|
|
|
<view class="play-btn" @click="togglePlay">
|
|
<uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="40" color="#666"></uv-icon>
|
|
</view>
|
|
|
|
<view class="control-btn" @click="$emit('next-page')">
|
|
<text class="control-text">下一页</text>
|
|
</view>
|
|
|
|
<view class="control-btn" @click="toggleSpeed" :class="{ 'disabled': !playbackRateSupported }">
|
|
<text class="control-text" :style="{ opacity: playbackRateSupported ? 1 : 0.5 }">
|
|
{{ playbackRateSupported ? playSpeed + 'x' : '不支持' }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/mixins/config.js'
|
|
|
|
export default {
|
|
name: 'AudioControls',
|
|
mixins: [config],
|
|
props: {
|
|
// 基础数据
|
|
currentPage: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
courseId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
voiceId: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
bookPages: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
isTextPage: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// 音频控制相关数据
|
|
isPlaying: false,
|
|
currentTime: 0,
|
|
totalTime: 0,
|
|
sliderValue: 0, // 滑動條的值
|
|
isDragging: false, // 是否正在拖動滑動條
|
|
isLoop: false,
|
|
playSpeed: 1.0,
|
|
speedOptions: [0.5, 0.8, 1.0, 1.25, 1.5, 2.0], // 根據uni-app文檔的官方支持值
|
|
playbackRateSupported: true, // 播放速度控制是否支持
|
|
// 音频数组管理
|
|
currentPageAudios: [], // 当前页面的音频数组
|
|
currentAudioIndex: 0, // 当前播放的音频索引
|
|
audioContext: null, // 音频上下文
|
|
currentAudio: null, // 当前音频实例
|
|
// 音频缓存管理
|
|
audioCache: {}, // 页面音频缓存 {pageIndex: {audios: [], totalDuration: 0}}
|
|
// 预加载相关状态
|
|
isPreloading: false, // 是否正在预加载
|
|
preloadProgress: 0, // 预加载进度 (0-100)
|
|
preloadQueue: [], // 预加载队列
|
|
// 音频加载状态
|
|
isAudioLoading: false, // 音频是否正在加载
|
|
hasAudioData: false, // 当前页面是否已有音频数据
|
|
// 文本高亮相关
|
|
currentHighlightIndex: -1, // 当前高亮的文本索引
|
|
}
|
|
},
|
|
computed: {
|
|
// 计算音频播放进度百分比
|
|
progressPercent() {
|
|
return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;
|
|
},
|
|
|
|
// 检查当前页面是否有缓存的音频
|
|
hasCurrentPageCache() {
|
|
const cacheKey = `${this.courseId}_${this.currentPage}`;
|
|
const cachedData = this.audioCache[cacheKey];
|
|
return cachedData && cachedData.audios && cachedData.audios.length > 0;
|
|
}
|
|
},
|
|
watch: {
|
|
// 监听页面变化，重置音频状态
|
|
currentPage: {
|
|
handler(newPage, oldPage) {
|
|
if (newPage !== oldPage) {
|
|
this.resetAudioState();
|
|
}
|
|
},
|
|
immediate: false
|
|
},
|
|
// 监听音色变化，清除缓存
|
|
voiceId: {
|
|
handler(newVoiceId, oldVoiceId) {
|
|
if (newVoiceId !== oldVoiceId && oldVoiceId) {
|
|
this.clearAudioCache();
|
|
this.resetAudioState();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 智能分割文本，按句号和逗号分割中英文文本
|
|
splitTextIntelligently(text) {
|
|
if (!text || typeof text !== 'string') {
|
|
return [text];
|
|
}
|
|
|
|
// 判断是否为中文文本（包含中文字符）
|
|
const isChinese = /[\u4e00-\u9fa5]/.test(text);
|
|
const maxLength = isChinese ? 200 : 400;
|
|
|
|
// 如果文本长度不超过限制，直接返回
|
|
if (text.length <= maxLength) {
|
|
return [{
|
|
text: text,
|
|
startIndex: 0,
|
|
endIndex: text.length - 1
|
|
}];
|
|
}
|
|
|
|
const segments = [];
|
|
let currentText = text;
|
|
let globalStartIndex = 0;
|
|
|
|
while (currentText.length > 0) {
|
|
if (currentText.length <= maxLength) {
|
|
// 剩余文本不超过限制，直接添加
|
|
segments.push({
|
|
text: currentText,
|
|
startIndex: globalStartIndex,
|
|
endIndex: globalStartIndex + currentText.length - 1
|
|
});
|
|
break;
|
|
}
|
|
|
|
// 在限制长度内寻找最佳分割点
|
|
let splitIndex = maxLength;
|
|
let bestSplitIndex = -1;
|
|
|
|
// 优先寻找句号
|
|
for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {
|
|
const char = currentText[i];
|
|
if (char === '。' || char === '.') {
|
|
bestSplitIndex = i + 1; // 包含句号
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 如果没找到句号，寻找逗号
|
|
if (bestSplitIndex === -1) {
|
|
for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {
|
|
const char = currentText[i];
|
|
if (char === '，' || char === ',' || char === '；' || char === ';') {
|
|
bestSplitIndex = i + 1; // 包含标点符号
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 如果还是没找到合适的分割点，使用默认长度
|
|
if (bestSplitIndex === -1) {
|
|
bestSplitIndex = maxLength;
|
|
}
|
|
|
|
// 提取当前段落
|
|
const segment = currentText.substring(0, bestSplitIndex).trim();
|
|
if (segment.length > 0) {
|
|
segments.push({
|
|
text: segment,
|
|
startIndex: globalStartIndex,
|
|
endIndex: globalStartIndex + segment.length - 1
|
|
});
|
|
}
|
|
|
|
// 更新剩余文本和全局索引
|
|
currentText = currentText.substring(bestSplitIndex).trim();
|
|
globalStartIndex += bestSplitIndex;
|
|
}
|
|
|
|
console.log(`文本分割完成，原长度: ${text.length}，分割为 ${segments.length} 段:`, segments);
|
|
return segments;
|
|
},
|
|
|
|
// 分批次请求音频
|
|
async requestAudioInBatches(text, voiceType) {
|
|
const segments = this.splitTextIntelligently(text);
|
|
const audioSegments = [];
|
|
let totalDuration = 0;
|
|
|
|
console.log(`开始分批次请求音频，共 ${segments.length} 段`);
|
|
|
|
for (let i = 0; i < segments.length; i++) {
|
|
const segment = segments[i];
|
|
|
|
try {
|
|
console.log(`请求第 ${i + 1}/${segments.length} 段音频:`, segment.text.substring(0, 50) + '...');
|
|
|
|
const radioRes = await this.$api.music.textToVoice({
|
|
text: segment.text,
|
|
voiceType: voiceType,
|
|
});
|
|
|
|
if (radioRes.code === 200) {
|
|
const audioUrl = radioRes.result.url;
|
|
const duration = radioRes.result.time || 0;
|
|
|
|
audioSegments.push({
|
|
url: audioUrl,
|
|
text: segment.text,
|
|
duration: duration,
|
|
startIndex: segment.startIndex,
|
|
endIndex: segment.endIndex,
|
|
segmentIndex: i,
|
|
isSegmented: segments.length > 1,
|
|
originalText: text
|
|
});
|
|
|
|
totalDuration += duration;
|
|
|
|
console.log(`第 ${i + 1} 段音频请求成功，时长: ${duration}秒`);
|
|
} else {
|
|
console.error(`第 ${i + 1} 段音频请求失败:`, radioRes);
|
|
// 即使某段失败，也继续处理其他段
|
|
audioSegments.push({
|
|
url: null,
|
|
text: segment.text,
|
|
duration: 0,
|
|
startIndex: segment.startIndex,
|
|
endIndex: segment.endIndex,
|
|
segmentIndex: i,
|
|
error: true,
|
|
isSegmented: segments.length > 1,
|
|
originalText: text
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error(`第 ${i + 1} 段音频请求异常:`, error);
|
|
audioSegments.push({
|
|
url: null,
|
|
text: segment.text,
|
|
duration: 0,
|
|
startIndex: segment.startIndex,
|
|
endIndex: segment.endIndex,
|
|
segmentIndex: i,
|
|
error: true,
|
|
isSegmented: segments.length > 1,
|
|
originalText: text
|
|
});
|
|
}
|
|
|
|
// 每个请求之间间隔400ms，避免请求过于频繁
|
|
if (i < segments.length - 1) {
|
|
await new Promise(resolve => setTimeout(resolve, 400));
|
|
}
|
|
}
|
|
|
|
console.log(`分批次音频请求完成，成功 ${audioSegments.filter(s => !s.error).length}/${segments.length} 段`);
|
|
|
|
return {
|
|
audioSegments: audioSegments,
|
|
totalDuration: totalDuration,
|
|
originalText: text
|
|
};
|
|
},
|
|
|
|
// 获取当前页面的音频内容
|
|
async getCurrentPageAudio() {
|
|
// 检查缓存中是否已有当前页面的音频数据
|
|
const cacheKey = `${this.courseId}_${this.currentPage}`;
|
|
if (this.audioCache[cacheKey]) {
|
|
console.log('从缓存加载音频数据:', cacheKey);
|
|
// 从缓存加载音频数据
|
|
this.currentPageAudios = this.audioCache[cacheKey].audios;
|
|
this.totalTime = this.audioCache[cacheKey].totalDuration;
|
|
this.currentAudioIndex = 0;
|
|
this.isPlaying = false;
|
|
this.currentTime = 0;
|
|
this.hasAudioData = true;
|
|
this.isAudioLoading = false;
|
|
|
|
// 通知父组件音频状态变化
|
|
this.$emit('audio-state-change', {
|
|
hasAudioData: this.hasAudioData,
|
|
isLoading: this.isAudioLoading,
|
|
currentHighlightIndex: this.currentHighlightIndex
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 开始加载状态
|
|
this.isAudioLoading = true;
|
|
this.hasAudioData = false;
|
|
|
|
// 清空当前页面音频数组
|
|
this.currentPageAudios = [];
|
|
this.currentAudioIndex = 0;
|
|
this.isPlaying = false;
|
|
this.currentTime = 0;
|
|
this.totalTime = 0;
|
|
|
|
// 通知父组件开始加载
|
|
this.$emit('audio-state-change', {
|
|
hasAudioData: this.hasAudioData,
|
|
isLoading: this.isAudioLoading,
|
|
currentHighlightIndex: this.currentHighlightIndex
|
|
});
|
|
|
|
// 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
|
|
const currentPageData = this.bookPages[this.currentPage - 1];
|
|
if (currentPageData) {
|
|
// 收集所有text类型的元素
|
|
const textItems = currentPageData.filter(item => item.type === 'text');
|
|
|
|
if (textItems.length > 0) {
|
|
let firstAudioPlayed = false; // 标记是否已播放第一个音频
|
|
let loadedAudiosCount = 0; // 已加载的音频数量
|
|
|
|
// 逐个处理文本项，支持长文本分割
|
|
for (let index = 0; index < textItems.length; index++) {
|
|
const item = textItems[index];
|
|
|
|
try {
|
|
console.log(`处理第 ${index + 1}/${textItems.length} 个文本项，长度: ${item.content.length}`);
|
|
|
|
// 使用分批次请求音频
|
|
const batchResult = await this.requestAudioInBatches(item.content, this.voiceId);
|
|
|
|
if (batchResult.audioSegments.length > 0) {
|
|
// 同时保存到原始数据中以保持兼容性（使用第一段的URL）
|
|
const firstValidSegment = batchResult.audioSegments.find(seg => !seg.error);
|
|
if (firstValidSegment) {
|
|
item.audioUrl = firstValidSegment.url;
|
|
}
|
|
|
|
// 将所有音频段添加到音频数组
|
|
for (const segment of batchResult.audioSegments) {
|
|
if (!segment.error) {
|
|
const audioData = {
|
|
url: segment.url,
|
|
text: segment.text,
|
|
duration: segment.duration,
|
|
startIndex: segment.startIndex,
|
|
endIndex: segment.endIndex,
|
|
segmentIndex: segment.segmentIndex,
|
|
originalTextIndex: index, // 标记属于哪个原始文本项
|
|
isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
|
|
};
|
|
this.currentPageAudios.push(audioData);
|
|
loadedAudiosCount++;
|
|
}
|
|
}
|
|
|
|
// 如果是第一个音频，立即开始播放
|
|
if (!firstAudioPlayed && this.currentPageAudios.length > 0) {
|
|
firstAudioPlayed = true;
|
|
this.hasAudioData = true;
|
|
this.currentAudioIndex = 0;
|
|
|
|
console.log(`第一个音频时长: ${this.currentPageAudios[0].duration}秒`);
|
|
|
|
// 通知父组件有音频数据了，但仍在加载中
|
|
this.$emit('audio-state-change', {
|
|
hasAudioData: this.hasAudioData,
|
|
isLoading: this.isAudioLoading, // 保持加载状态
|
|
currentHighlightIndex: this.currentHighlightIndex
|
|
});
|
|
|
|
// 立即创建音频实例并开始播放
|
|
console.log('创建第一个音频实例并开始播放');
|
|
this.createAudioInstance();
|
|
|
|
// 等待音频实例准备好后开始播放
|
|
setTimeout(() => {
|
|
if (this.currentAudio && !this.isPlaying) {
|
|
this.currentAudio.play();
|
|
// isPlaying状态会在onPlay事件中自动设置
|
|
this.updateHighlightIndex();
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
console.log(`文本项 ${index + 1} 处理完成，获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
|
|
} else {
|
|
console.error(`文本项 ${index + 1} 音频请求全部失败`);
|
|
}
|
|
} catch (error) {
|
|
console.error(`文本项 ${index + 1} 处理异常:`, error);
|
|
}
|
|
}
|
|
|
|
console.log('所有音频请求完成，共获取', this.currentPageAudios.length, '个音频');
|
|
|
|
// 如果有音频，重新计算精确的总时长
|
|
if (this.currentPageAudios.length > 0) {
|
|
await this.calculateTotalDuration();
|
|
|
|
// 将音频数据保存到缓存中
|
|
const cacheKey = `${this.courseId}_${this.currentPage}`;
|
|
this.audioCache[cacheKey] = {
|
|
audios: [...this.currentPageAudios], // 深拷贝音频数组
|
|
totalDuration: this.totalTime
|
|
};
|
|
console.log('音频数据已缓存:', cacheKey, this.audioCache[cacheKey]);
|
|
|
|
// 限制缓存大小
|
|
this.limitCacheSize(10);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 结束加载状态
|
|
this.isAudioLoading = false;
|
|
|
|
// 设置音频数据状态
|
|
this.hasAudioData = this.currentPageAudios.length > 0;
|
|
|
|
// 通知父组件音频状态变化
|
|
this.$emit('audio-state-change', {
|
|
hasAudioData: this.hasAudioData,
|
|
isLoading: this.isAudioLoading,
|
|
currentHighlightIndex: this.currentHighlightIndex
|
|
});
|
|
},
|
|
|
|
// 重置音频状态
|
|
resetAudioState() {
|
|
// 先暂停当前播放的音频
|
|
if (this.isPlaying && this.currentAudio) {
|
|
this.pauseAudio();
|
|
console.log('翻页时暂停音频播放');
|
|
}
|
|
|
|
// 检查当前页面是否已有缓存的音频数据
|
|
const pageKey = `${this.courseId}_${this.currentPage}`;
|
|
const cachedAudio = this.audioCache[pageKey];
|
|
|
|
if (cachedAudio && cachedAudio.audios && cachedAudio.audios.length > 0) {
|
|
// 如果有缓存的音频数据，恢复音频状态
|
|
this.currentPageAudios = cachedAudio.audios;
|
|
this.totalTime = cachedAudio.totalDuration || 0;
|
|
this.hasAudioData = true;
|
|
|
|
// 自动播放预加载的音频
|
|
console.log('检测到预加载音频，准备自动播放');
|
|
this.$nextTick(() => {
|
|
this.autoPlayPreloadedAudio();
|
|
});
|
|
} else {
|
|
// 如果没有缓存的音频数据，重置为初始状态
|
|
this.currentPageAudios = [];
|
|
this.totalTime = 0;
|
|
this.hasAudioData = false;
|
|
}
|
|
|
|
// 重置播放状态，翻頁時統一設置播放速度為1.0
|
|
this.currentAudioIndex = 0;
|
|
this.isPlaying = false;
|
|
this.currentTime = 0;
|
|
this.isAudioLoading = false;
|
|
this.currentHighlightIndex = -1;
|
|
// 翻頁時強制設置播放速度為1.0（適應微信小程序特性）
|
|
this.playSpeed = 1.0;
|
|
|
|
// 通知父组件音频状态变化
|
|
this.$emit('audio-state-change', {
|
|
hasAudioData: this.hasAudioData,
|
|
isLoading: this.isAudioLoading,
|
|
currentHighlightIndex: this.currentHighlightIndex
|
|
});
|
|
},
|
|
|
|
// 手动获取音频
|
|
async handleGetAudio() {
|
|
// 检查是否有音色ID
|
|
if (!this.voiceId) {
|
|
uni.showToast({
|
|
title: '音色未加载，请稍后重试',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 检查当前页面是否有文本内容
|
|
if (!this.isTextPage) {
|
|
uni.showToast({
|
|
title: '当前页面没有文本内容',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 检查是否正在加载
|
|
if (this.isAudioLoading) {
|
|
return;
|
|
}
|
|
|
|
// 调用获取音频方法
|
|
await this.getCurrentPageAudio();
|
|
},
|
|
|
|
// 计算音频总时长
|
|
async calculateTotalDuration() {
|
|
let totalDuration = 0;
|
|
for (let i = 0; i < this.currentPageAudios.length; i++) {
|
|
const audio = this.currentPageAudios[i];
|
|
|
|
// 使用API返回的准确时长信息
|
|
if (audio.duration && audio.duration > 0) {
|
|
console.log(`使用API返回的准确时长 ${i + 1}:`, audio.duration, '秒');
|
|
totalDuration += audio.duration;
|
|
} else {
|
|
// 如果没有时长信息，使用文字长度估算（备用方案）
|
|
const textLength = audio.text.length;
|
|
// 假设较快语速每分钟约300个字符，即每秒约5个字符
|
|
const estimatedDuration = Math.max(1, textLength / 5);
|
|
audio.duration = estimatedDuration;
|
|
totalDuration += estimatedDuration;
|
|
console.log(`备用估算音频时长 ${i + 1}:`, estimatedDuration, '秒 (文字长度:', textLength, ')');
|
|
}
|
|
}
|
|
this.totalTime = totalDuration;
|
|
console.log('音频总时长:', totalDuration, '秒');
|
|
},
|
|
|
|
// 获取音频时长
|
|
getAudioDuration(audioUrl) {
|
|
return new Promise((resolve, reject) => {
|
|
const audio = uni.createInnerAudioContext();
|
|
audio.src = audioUrl;
|
|
|
|
let resolved = false;
|
|
|
|
// 监听音频加载完成事件
|
|
audio.onCanplay(() => {
|
|
console.log('音频可以播放，duration:', audio.duration);
|
|
if (!resolved && audio.duration && audio.duration > 0) {
|
|
resolved = true;
|
|
resolve(audio.duration);
|
|
audio.destroy();
|
|
}
|
|
});
|
|
|
|
// 监听音频元数据加载完成事件
|
|
audio.onLoadedmetadata = () => {
|
|
console.log('音频元数据加载完成，duration:', audio.duration);
|
|
if (!resolved && audio.duration && audio.duration > 0) {
|
|
resolved = true;
|
|
resolve(audio.duration);
|
|
audio.destroy();
|
|
}
|
|
};
|
|
|
|
// 监听音频时长更新事件
|
|
audio.onDurationChange = () => {
|
|
console.log('音频时长更新，duration:', audio.duration);
|
|
if (!resolved && audio.duration && audio.duration > 0) {
|
|
resolved = true;
|
|
resolve(audio.duration);
|
|
audio.destroy();
|
|
}
|
|
};
|
|
|
|
// 移除onPlay監聽器，避免意外播放
|
|
|
|
audio.onError((error) => {
|
|
console.error('音频加载失败:', error);
|
|
if (!resolved) {
|
|
resolved = true;
|
|
reject(error);
|
|
audio.destroy();
|
|
}
|
|
});
|
|
|
|
// 設置較長的超時時間，但不播放音頻
|
|
setTimeout(() => {
|
|
if (!resolved) {
|
|
console.log('無法獲取音頻時長，使用默認值');
|
|
resolved = true;
|
|
reject(new Error('無法獲取音頻時長'));
|
|
audio.destroy();
|
|
}
|
|
}, 1000);
|
|
|
|
// 最終超時處理
|
|
setTimeout(() => {
|
|
if (!resolved) {
|
|
console.warn('獲取音頻時長超時，使用默認值');
|
|
resolved = true;
|
|
reject(new Error('获取音频时长超时'));
|
|
audio.destroy();
|
|
}
|
|
}, 5000);
|
|
});
|
|
},
|
|
|
|
// 音频控制方法
|
|
togglePlay() {
|
|
if (this.currentPageAudios.length === 0) {
|
|
uni.showToast({
|
|
title: '当前页面没有音频内容',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.isPlaying) {
|
|
this.pauseAudio();
|
|
} else {
|
|
this.playAudio();
|
|
}
|
|
},
|
|
|
|
// 播放音频
|
|
playAudio() {
|
|
if (this.currentPageAudios.length === 0) return;
|
|
|
|
// 如果没有当前音频实例或者需要切换音频
|
|
if (!this.currentAudio || this.currentAudio.src !== this.currentPageAudios[this.currentAudioIndex].url) {
|
|
this.createAudioInstance();
|
|
// 创建实例后稍等一下再播放，确保音频准备就绪
|
|
setTimeout(() => {
|
|
if (this.currentAudio) {
|
|
this.currentAudio.play();
|
|
// isPlaying状态会在onPlay事件中自动设置
|
|
this.updateHighlightIndex();
|
|
}
|
|
}, 50);
|
|
} else {
|
|
// 音频实例已存在，直接播放
|
|
this.currentAudio.play();
|
|
// isPlaying状态会在onPlay事件中自动设置
|
|
this.updateHighlightIndex();
|
|
}
|
|
},
|
|
|
|
// 暂停音频
|
|
pauseAudio() {
|
|
if (this.currentAudio) {
|
|
this.currentAudio.pause();
|
|
}
|
|
this.isPlaying = false;
|
|
// 暂停时清除高亮
|
|
this.currentHighlightIndex = -1;
|
|
// 通知父组件高亮状态变化
|
|
this.emitHighlightChange(-1);
|
|
},
|
|
|
|
// 播放指定的音频段落（通过文本内容匹配）
|
|
playSpecificAudio(textContent) {
|
|
console.log('尝试播放指定音频段落:', textContent);
|
|
|
|
// 检查textContent是否有效
|
|
if (!textContent || typeof textContent !== 'string') {
|
|
console.log('无效的文本内容:', textContent);
|
|
uni.showToast({
|
|
title: '无效的文本内容',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
// 在当前页面音频数组中查找匹配的音频
|
|
let audioIndex = this.currentPageAudios.findIndex(audio =>
|
|
audio.text && audio.text.trim() === textContent.trim()
|
|
);
|
|
|
|
// 如果直接匹配失败，尝试匹配分段音频
|
|
if (audioIndex === -1) {
|
|
console.log('直接匹配失败，尝试匹配分段音频');
|
|
|
|
// 查找包含该文本的分段音频
|
|
audioIndex = this.currentPageAudios.findIndex(audio => {
|
|
if (!audio.text) return false;
|
|
|
|
// 检查是否为分段音频，且原始文本包含目标文本
|
|
if (audio.isSegmented && audio.originalText) {
|
|
return audio.originalText.trim() === textContent.trim();
|
|
}
|
|
|
|
// 检查目标文本是否包含在当前音频文本中，或者当前音频文本包含在目标文本中
|
|
const audioText = audio.text.trim();
|
|
const targetText = textContent.trim();
|
|
return audioText.includes(targetText) || targetText.includes(audioText);
|
|
});
|
|
|
|
if (audioIndex !== -1) {
|
|
console.log('找到分段音频匹配，索引:', audioIndex);
|
|
}
|
|
}
|
|
|
|
if (audioIndex !== -1) {
|
|
console.log('找到匹配的音频，索引:', audioIndex);
|
|
|
|
// 停止当前播放的音频
|
|
if (this.currentAudio) {
|
|
this.currentAudio.pause();
|
|
this.currentAudio.destroy();
|
|
this.currentAudio = null;
|
|
}
|
|
|
|
// 设置新的音频索引
|
|
this.currentAudioIndex = audioIndex;
|
|
|
|
// 重置播放状态
|
|
this.isPlaying = false;
|
|
this.currentTime = 0;
|
|
this.sliderValue = 0;
|
|
|
|
// 更新高亮索引
|
|
this.currentHighlightIndex = audioIndex;
|
|
this.emitHighlightChange(audioIndex);
|
|
|
|
// 创建新的音频实例并播放
|
|
this.createAudioInstance();
|
|
|
|
// 稍等一下再播放，确保音频准备就绪
|
|
setTimeout(() => {
|
|
if (this.currentAudio) {
|
|
this.currentAudio.play();
|
|
console.log('开始播放指定音频段落');
|
|
}
|
|
}, 100);
|
|
|
|
return true; // 成功找到并播放
|
|
} else {
|
|
console.log('未找到匹配的音频段落:', textContent);
|
|
uni.showToast({
|
|
title: '未找到对应的音频',
|
|
icon: 'none'
|
|
});
|
|
return false; // 未找到匹配的音频
|
|
}
|
|
},
|
|
|
|
// 创建音频实例
|
|
createAudioInstance() {
|
|
// 销毁之前的音频实例
|
|
if (this.currentAudio) {
|
|
this.currentAudio.pause();
|
|
this.currentAudio.destroy();
|
|
this.currentAudio = null;
|
|
}
|
|
|
|
// 重置播放状态
|
|
this.isPlaying = false;
|
|
|
|
// 優先使用微信原生API以支持playbackRate
|
|
let audio;
|
|
if (typeof wx !== 'undefined' && wx.createInnerAudioContext) {
|
|
console.log('使用微信原生音頻API');
|
|
audio = wx.createInnerAudioContext();
|
|
} else {
|
|
console.log('使用uni-app音頻API');
|
|
audio = uni.createInnerAudioContext();
|
|
}
|
|
audio.src = this.currentPageAudios[this.currentAudioIndex].url;
|
|
|
|
// 在音頻可以播放時檢測playbackRate支持
|
|
audio.onCanplay(() => {
|
|
console.log('🎵 音頻可以播放，開始檢測playbackRate支持');
|
|
this.checkPlaybackRateSupport(audio);
|
|
|
|
// 檢測完成後，設置用戶期望的播放速度
|
|
setTimeout(() => {
|
|
if (this.playbackRateSupported) {
|
|
console.log('設置播放速度:', this.playSpeed);
|
|
audio.playbackRate = this.playSpeed;
|
|
|
|
// 驗證設置結果
|
|
setTimeout(() => {
|
|
console.log('最終播放速度:', audio.playbackRate);
|
|
if (Math.abs(audio.playbackRate - this.playSpeed) > 0.01) {
|
|
console.log('⚠️ 播放速度設置可能未生效');
|
|
} else {
|
|
console.log('✅ 播放速度設置成功');
|
|
}
|
|
}, 50);
|
|
} else {
|
|
console.log('❌ 當前環境不支持播放速度控制');
|
|
}
|
|
}, 50);
|
|
});
|
|
|
|
// 音频事件监听
|
|
audio.onPlay(() => {
|
|
console.log('音频开始播放');
|
|
this.isPlaying = true;
|
|
});
|
|
|
|
audio.onPause(() => {
|
|
console.log('音频暂停');
|
|
this.isPlaying = false;
|
|
});
|
|
|
|
audio.onTimeUpdate(() => {
|
|
this.updateCurrentTime();
|
|
});
|
|
|
|
audio.onEnded(() => {
|
|
console.log('当前音频播放结束');
|
|
this.onAudioEnded();
|
|
});
|
|
|
|
audio.onError((error) => {
|
|
console.error('音频播放错误:', error);
|
|
this.isPlaying = false;
|
|
uni.showToast({
|
|
title: '音频播放失败',
|
|
icon: 'none'
|
|
});
|
|
});
|
|
|
|
this.currentAudio = audio;
|
|
},
|
|
|
|
// 更新当前播放时间
|
|
updateCurrentTime() {
|
|
if (!this.currentAudio) return;
|
|
|
|
let totalTime = 0;
|
|
// 计算之前音频的总时长
|
|
for (let i = 0; i < this.currentAudioIndex; i++) {
|
|
totalTime += this.currentPageAudios[i].duration;
|
|
}
|
|
// 加上当前音频的播放时间
|
|
totalTime += this.currentAudio.currentTime;
|
|
|
|
this.currentTime = totalTime;
|
|
|
|
// 如果不是正在拖動滑動條，則同步更新滑動條的值
|
|
if (!this.isDragging) {
|
|
this.sliderValue = this.currentTime;
|
|
}
|
|
|
|
// 更新当前高亮的文本索引
|
|
this.updateHighlightIndex();
|
|
},
|
|
|
|
// 更新高亮文本索引
|
|
updateHighlightIndex() {
|
|
if (!this.isPlaying || this.currentPageAudios.length === 0) {
|
|
this.currentHighlightIndex = -1;
|
|
this.emitHighlightChange(-1);
|
|
return;
|
|
}
|
|
|
|
// 获取当前播放的音频数据
|
|
const currentAudio = this.currentPageAudios[this.currentAudioIndex];
|
|
if (!currentAudio) {
|
|
this.currentHighlightIndex = -1;
|
|
this.emitHighlightChange(-1);
|
|
return;
|
|
}
|
|
|
|
// 如果是分段音频，需要计算正确的高亮索引
|
|
if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {
|
|
// 使用原始文本项的索引作为高亮索引
|
|
this.currentHighlightIndex = currentAudio.originalTextIndex;
|
|
console.log('分段音频高亮索引:', this.currentHighlightIndex, '原始文本索引:', currentAudio.originalTextIndex, '段索引:', currentAudio.segmentIndex);
|
|
} else {
|
|
// 非分段音频，使用音频索引
|
|
this.currentHighlightIndex = this.currentAudioIndex;
|
|
console.log('普通音频高亮索引:', this.currentHighlightIndex, '当前音频索引:', this.currentAudioIndex);
|
|
}
|
|
|
|
// 使用辅助方法发送高亮变化事件
|
|
this.emitHighlightChange(this.currentAudioIndex);
|
|
},
|
|
|
|
// 发送高亮变化事件的辅助方法
|
|
emitHighlightChange(highlightIndex = -1) {
|
|
if (highlightIndex === -1) {
|
|
// 清除高亮
|
|
this.$emit('highlight-change', -1);
|
|
return;
|
|
}
|
|
|
|
// 获取对应的音频数据
|
|
const audioData = this.currentPageAudios[highlightIndex];
|
|
if (!audioData) {
|
|
this.$emit('highlight-change', -1);
|
|
return;
|
|
}
|
|
|
|
// 发送详细的高亮信息
|
|
this.$emit('highlight-change', {
|
|
highlightIndex: audioData.originalTextIndex !== undefined ? audioData.originalTextIndex : highlightIndex,
|
|
isSegmented: audioData.isSegmented || false,
|
|
segmentIndex: audioData.segmentIndex || 0,
|
|
startIndex: audioData.startIndex || 0,
|
|
endIndex: audioData.endIndex || 0,
|
|
currentText: audioData.text || ''
|
|
});
|
|
},
|
|
|
|
// 音频播放结束处理
|
|
onAudioEnded() {
|
|
if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
|
|
// 播放下一个音频
|
|
this.currentAudioIndex++;
|
|
this.playAudio();
|
|
} else {
|
|
// 所有音频播放完毕
|
|
if (this.isLoop) {
|
|
// 循环播放
|
|
this.currentAudioIndex = 0;
|
|
this.playAudio();
|
|
} else {
|
|
// 停止播放
|
|
this.isPlaying = false;
|
|
this.currentTime = this.totalTime;
|
|
this.currentHighlightIndex = -1;
|
|
this.$emit('highlight-change', -1);
|
|
}
|
|
}
|
|
},
|
|
|
|
toggleLoop() {
|
|
this.isLoop = !this.isLoop;
|
|
},
|
|
|
|
toggleSpeed() {
|
|
// 檢查是否支持播放速度控制
|
|
if (!this.playbackRateSupported) {
|
|
uni.showToast({
|
|
title: '當前設備不支持播放速度控制',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
const currentIndex = this.speedOptions.indexOf(this.playSpeed);
|
|
const nextIndex = (currentIndex + 1) % this.speedOptions.length;
|
|
const oldSpeed = this.playSpeed;
|
|
this.playSpeed = this.speedOptions[nextIndex];
|
|
|
|
console.log(`播放速度切換: ${oldSpeed}x -> ${this.playSpeed}x`);
|
|
|
|
// 如果当前有音频在播放，更新播放速度
|
|
if (this.currentAudio) {
|
|
const wasPlaying = this.isPlaying;
|
|
const currentTime = this.currentAudio.currentTime;
|
|
|
|
// 設置新的播放速度
|
|
this.currentAudio.playbackRate = this.playSpeed;
|
|
|
|
// 如果正在播放，需要重啟播放才能使播放速度生效
|
|
if (wasPlaying) {
|
|
this.currentAudio.pause();
|
|
setTimeout(() => {
|
|
this.currentAudio.seek(currentTime);
|
|
this.currentAudio.play();
|
|
}, 50);
|
|
}
|
|
|
|
console.log('音頻實例播放速度已更新為:', this.currentAudio.playbackRate);
|
|
|
|
// 顯示速度變更提示
|
|
uni.showToast({
|
|
title: `播放速度: ${this.playSpeed}x`,
|
|
icon: 'none',
|
|
duration: 1000
|
|
});
|
|
}
|
|
},
|
|
|
|
// 滑動條值實時更新 (@input 事件)
|
|
onSliderInput(value) {
|
|
// 在拖動過程中實時更新顯示的時間，但不影響實際播放
|
|
if (this.isDragging) {
|
|
// 可以在這裡實時更新顯示時間，讓用戶看到拖動到的時間點
|
|
// 但不改變實際的 currentTime，避免影響播放邏輯
|
|
console.log('實時更新滑動條值:', value);
|
|
}
|
|
},
|
|
|
|
// 滑動條拖動過程中的處理 (@changing 事件)
|
|
onSliderChanging(value) {
|
|
// 第一次觸發 changing 事件時，暫停播放並標記為拖動狀態
|
|
if (!this.isDragging) {
|
|
if (this.isPlaying) {
|
|
this.pauseAudio();
|
|
console.log('開始拖動滑動條，暫停播放');
|
|
}
|
|
this.isDragging = true;
|
|
}
|
|
|
|
// 更新滑動條的值，但不改變實際播放位置
|
|
this.sliderValue = value;
|
|
console.log('拖動中，滑動條值:', value);
|
|
},
|
|
|
|
// 滑動條拖動結束的處理 (@change 事件)
|
|
onSliderChange(value) {
|
|
console.log('滑動條變化，跳轉到位置:', value, '是否為拖動:', this.isDragging);
|
|
|
|
// 如果不是拖動狀態（即單點），需要先暫停播放
|
|
if (!this.isDragging && this.isPlaying) {
|
|
this.pauseAudio();
|
|
console.log('單點滑動條，暫停播放');
|
|
}
|
|
|
|
// 重置拖動狀態
|
|
this.isDragging = false;
|
|
this.sliderValue = value;
|
|
|
|
// 跳轉到指定位置，但不自動恢復播放
|
|
this.seekToTime(value, false);
|
|
|
|
console.log('滑動條操作完成，保持暫停狀態，需要手動點擊播放');
|
|
},
|
|
|
|
// 跳轉到指定時間
|
|
seekToTime(targetTime, shouldResume = false) {
|
|
if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
|
|
console.log('沒有音頻數據，無法跳轉');
|
|
return;
|
|
}
|
|
|
|
// 確保目標時間在有效範圍內
|
|
targetTime = Math.max(0, Math.min(targetTime, this.totalTime));
|
|
console.log('跳轉到時間:', targetTime, '秒', '總時長:', this.totalTime, '是否恢復播放:', shouldResume);
|
|
|
|
let accumulatedTime = 0;
|
|
let targetAudioIndex = -1;
|
|
let targetAudioTime = 0;
|
|
|
|
// 找到目標時間對應的音頻片段
|
|
for (let i = 0; i < this.currentPageAudios.length; i++) {
|
|
const audioDuration = this.currentPageAudios[i].duration || 0;
|
|
console.log(`音頻片段 ${i}: 時長=${audioDuration}, 累計時間=${accumulatedTime}, 範圍=[${accumulatedTime}, ${accumulatedTime + audioDuration}]`);
|
|
|
|
if (targetTime >= accumulatedTime && targetTime <= accumulatedTime + audioDuration) {
|
|
targetAudioIndex = i;
|
|
targetAudioTime = targetTime - accumulatedTime;
|
|
break;
|
|
}
|
|
accumulatedTime += audioDuration;
|
|
}
|
|
|
|
// 如果沒有找到合適的音頻片段，使用最後一個
|
|
if (targetAudioIndex === -1 && this.currentPageAudios.length > 0) {
|
|
targetAudioIndex = this.currentPageAudios.length - 1;
|
|
targetAudioTime = this.currentPageAudios[targetAudioIndex].duration || 0;
|
|
console.log('使用最後一個音頻片段作為目標');
|
|
}
|
|
|
|
console.log('目標音頻索引:', targetAudioIndex, '目標音頻時間:', targetAudioTime);
|
|
|
|
if (targetAudioIndex === -1) {
|
|
console.error('無法找到目標音頻片段');
|
|
return;
|
|
}
|
|
|
|
// 如果需要切換到不同的音頻片段
|
|
if (targetAudioIndex !== this.currentAudioIndex) {
|
|
console.log(`切換音頻片段: ${this.currentAudioIndex} -> ${targetAudioIndex}`);
|
|
this.currentAudioIndex = targetAudioIndex;
|
|
this.createAudioInstance();
|
|
|
|
// 等待音頻實例創建完成後再跳轉
|
|
this.waitForAudioReady(() => {
|
|
if (this.currentAudio) {
|
|
this.currentAudio.seek(targetAudioTime);
|
|
this.currentTime = targetTime;
|
|
console.log('切換音頻並跳轉到:', targetAudioTime, '秒');
|
|
|
|
// 如果拖動前正在播放，則恢復播放
|
|
if (shouldResume) {
|
|
this.currentAudio.play();
|
|
this.isPlaying = true;
|
|
console.log('恢復播放狀態');
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
// 在當前音頻片段內跳轉
|
|
if (this.currentAudio) {
|
|
this.currentAudio.seek(targetAudioTime);
|
|
this.currentTime = targetTime;
|
|
console.log('在當前音頻內跳轉到:', targetAudioTime, '秒');
|
|
|
|
// 如果拖動前正在播放，則恢復播放
|
|
if (shouldResume) {
|
|
this.currentAudio.play();
|
|
this.isPlaying = true;
|
|
console.log('恢復播放狀態');
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// 等待音頻實例準備就緒
|
|
waitForAudioReady(callback, maxAttempts = 10, currentAttempt = 0) {
|
|
if (currentAttempt >= maxAttempts) {
|
|
console.error('音頻實例準備超時');
|
|
return;
|
|
}
|
|
|
|
if (this.currentAudio && this.currentAudio.src) {
|
|
// 音頻實例已準備好
|
|
setTimeout(callback, 50); // 稍微延遲確保完全準備好
|
|
} else {
|
|
// 繼續等待
|
|
setTimeout(() => {
|
|
this.waitForAudioReady(callback, maxAttempts, currentAttempt + 1);
|
|
}, 100);
|
|
}
|
|
},
|
|
|
|
// 初始檢測播放速度支持（不依賴音頻實例）
|
|
checkInitialPlaybackRateSupport() {
|
|
try {
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
console.log('初始檢測 - 系統信息:', systemInfo);
|
|
|
|
// 檢查基礎庫版本 - playbackRate需要2.11.0及以上
|
|
const SDKVersion = systemInfo.SDKVersion || '0.0.0';
|
|
const versionArray = SDKVersion.split('.').map(v => parseInt(v));
|
|
const isVersionSupported = versionArray[0] > 2 ||
|
|
(versionArray[0] === 2 && versionArray[1] > 11) ||
|
|
(versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
|
|
|
|
if (!isVersionSupported) {
|
|
this.playbackRateSupported = false;
|
|
console.log(`初始檢測 - 基礎庫版本過低 (${SDKVersion})，需要2.11.0及以上才支持播放速度控制`);
|
|
return;
|
|
}
|
|
|
|
// Android 6以下版本不支持
|
|
if (systemInfo.platform === 'android') {
|
|
const androidVersion = systemInfo.system.match(/Android (\d+)/);
|
|
if (androidVersion && parseInt(androidVersion[1]) < 6) {
|
|
this.playbackRateSupported = false;
|
|
console.log('初始檢測 - Android版本過低，需要Android 6及以上才支持播放速度控制');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 檢查微信原生API是否可用
|
|
if (typeof wx === 'undefined' || !wx.createInnerAudioContext) {
|
|
console.log('初始檢測 - 微信原生API不可用，可能影響playbackRate支持');
|
|
} else {
|
|
console.log('初始檢測 - 微信原生API可用');
|
|
}
|
|
|
|
// 如果通過基本檢測，暫時設為支持，等音頻實例創建後再詳細檢測
|
|
this.playbackRateSupported = true;
|
|
console.log('初始檢測 - 基本條件滿足，等待音頻實例檢測');
|
|
|
|
} catch (error) {
|
|
console.error('初始檢測播放速度支持時出錯:', error);
|
|
this.playbackRateSupported = false;
|
|
}
|
|
},
|
|
|
|
// 檢查播放速度控制支持
|
|
checkPlaybackRateSupport(audio) {
|
|
try {
|
|
// 檢查基礎庫版本和平台支持
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
console.log('系統信息:', systemInfo);
|
|
console.log('平台:', systemInfo.platform);
|
|
console.log('基礎庫版本:', systemInfo.SDKVersion);
|
|
console.log('系統版本:', systemInfo.system);
|
|
|
|
// 根據uni-app文檔，微信小程序需要基礎庫2.11.0+才支持playbackRate
|
|
const SDKVersion = systemInfo.SDKVersion || '0.0.0';
|
|
const versionArray = SDKVersion.split('.').map(v => parseInt(v));
|
|
const isVersionSupported = versionArray[0] > 2 ||
|
|
(versionArray[0] === 2 && versionArray[1] > 11) ||
|
|
(versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
|
|
|
|
console.log('基礎庫版本檢查:', {
|
|
version: SDKVersion,
|
|
parsed: versionArray,
|
|
supported: isVersionSupported
|
|
});
|
|
|
|
if (!isVersionSupported) {
|
|
this.playbackRateSupported = false;
|
|
console.log(`❌ 基礎庫版本不支持 (${SDKVersion})，微信小程序需要2.11.0+才支持playbackRate`);
|
|
return;
|
|
}
|
|
|
|
// Android平台需要6.0+版本支持
|
|
if (systemInfo.platform === 'android') {
|
|
const androidVersion = systemInfo.system.match(/Android (\d+)/);
|
|
console.log('Android版本檢查:', androidVersion);
|
|
if (androidVersion && parseInt(androidVersion[1]) < 6) {
|
|
this.playbackRateSupported = false;
|
|
console.log(`❌ Android版本不支持 (${androidVersion[1]})，需要Android 6+才支持playbackRate`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 檢查音頻實例是否支持playbackRate
|
|
console.log('🔍 音頻實例檢查:');
|
|
console.log('- playbackRate初始值:', audio.playbackRate);
|
|
console.log('- playbackRate類型:', typeof audio.playbackRate);
|
|
|
|
// 嘗試設置並檢測是否真正支持
|
|
const testRate = 1.25;
|
|
const originalRate = audio.playbackRate || 1.0;
|
|
|
|
try {
|
|
audio.playbackRate = testRate;
|
|
console.log('- 設置測試速度:', testRate);
|
|
console.log('- 設置後的值:', audio.playbackRate);
|
|
|
|
// 檢查設置是否生效
|
|
if (Math.abs(audio.playbackRate - testRate) < 0.01) {
|
|
this.playbackRateSupported = true;
|
|
console.log('✅ playbackRate功能正常');
|
|
} else {
|
|
this.playbackRateSupported = false;
|
|
console.log('❌ playbackRate設置無效，可能不被支持');
|
|
}
|
|
|
|
} catch (error) {
|
|
this.playbackRateSupported = false;
|
|
console.log('❌ playbackRate設置出錯:', error);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('檢查播放速度支持時出錯:', error);
|
|
this.playbackRateSupported = false;
|
|
}
|
|
},
|
|
|
|
formatTime(seconds) {
|
|
const mins = Math.floor(seconds / 60);
|
|
const secs = Math.floor(seconds % 60);
|
|
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
},
|
|
|
|
// 清理音频缓存
|
|
clearAudioCache() {
|
|
this.audioCache = {};
|
|
console.log('音频缓存已清理');
|
|
},
|
|
|
|
// 限制缓存大小，保留最近访问的页面
|
|
limitCacheSize(maxSize = 10) {
|
|
const cacheKeys = Object.keys(this.audioCache);
|
|
if (cacheKeys.length > maxSize) {
|
|
// 删除最旧的缓存项
|
|
const keysToDelete = cacheKeys.slice(0, cacheKeys.length - maxSize);
|
|
keysToDelete.forEach(key => {
|
|
delete this.audioCache[key];
|
|
});
|
|
console.log('缓存大小已限制，删除了', keysToDelete.length, '个缓存项');
|
|
}
|
|
},
|
|
|
|
// 自動加載第一頁音頻並播放
|
|
async autoLoadAndPlayFirstPage() {
|
|
try {
|
|
console.log('開始自動加載第一頁音頻');
|
|
|
|
// 確保當前是第一頁且是文字頁面
|
|
if (this.currentPage === 1 && this.isTextPage) {
|
|
console.log('當前是第一頁文字頁面，開始加載音頻');
|
|
|
|
// 加載音頻
|
|
await this.getCurrentPageAudio();
|
|
|
|
// 檢查是否成功加載音頻
|
|
if (this.currentPageAudios && this.currentPageAudios.length > 0) {
|
|
console.log('音頻加載成功，getCurrentPageAudio已經自動播放第一個音頻');
|
|
// getCurrentPageAudio方法已經處理了第一個音頻的播放，這裡不需要再次調用playAudio
|
|
} else {
|
|
console.log('第一頁沒有音頻數據');
|
|
}
|
|
} else {
|
|
console.log('當前頁面不是第一頁文字頁面，跳過自動播放');
|
|
}
|
|
} catch (error) {
|
|
console.error('自動加載和播放音頻失敗:', error);
|
|
}
|
|
},
|
|
|
|
// 清理音频资源
|
|
destroyAudio() {
|
|
if (this.currentAudio) {
|
|
this.currentAudio.destroy();
|
|
this.currentAudio = null;
|
|
}
|
|
this.isPlaying = false;
|
|
this.clearAudioCache();
|
|
},
|
|
|
|
// 暂停音频（页面隐藏时调用）
|
|
pauseOnHide() {
|
|
this.pauseAudio();
|
|
},
|
|
|
|
// 开始预加载音频（由父组件调用）
|
|
async startPreloadAudio() {
|
|
if (this.isPreloading) {
|
|
console.log('已在预加载中，跳过');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
console.log('开始预加载音频数据');
|
|
this.isPreloading = true;
|
|
this.preloadProgress = 0;
|
|
|
|
// 获取需要预加载的页面列表（当前页面后的几页）
|
|
const preloadPages = this.getPreloadPageList();
|
|
|
|
if (preloadPages.length === 0) {
|
|
console.log('没有需要预加载的页面');
|
|
this.isPreloading = false;
|
|
return;
|
|
}
|
|
|
|
console.log('需要预加载的页面:', preloadPages);
|
|
|
|
// 逐个预加载页面音频
|
|
for (let i = 0; i < preloadPages.length; i++) {
|
|
const pageInfo = preloadPages[i];
|
|
|
|
try {
|
|
console.log(`开始预加载第${pageInfo.pageIndex + 1}页音频`);
|
|
await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);
|
|
|
|
// 更新预加载进度
|
|
this.preloadProgress = Math.round(((i + 1) / preloadPages.length) * 100);
|
|
console.log(`预加载进度: ${this.preloadProgress}%`);
|
|
|
|
// 延迟一下，避免请求过于频繁
|
|
await new Promise(resolve => setTimeout(resolve, 600));
|
|
|
|
} catch (error) {
|
|
console.error(`预加载第${pageInfo.pageIndex + 1}页音频失败:`, error);
|
|
// 继续预加载其他页面
|
|
}
|
|
}
|
|
|
|
console.log('音频预加载完成');
|
|
|
|
} catch (error) {
|
|
console.error('预加载音频失败:', error);
|
|
} finally {
|
|
this.isPreloading = false;
|
|
this.preloadProgress = 100;
|
|
}
|
|
},
|
|
|
|
// 获取需要预加载的页面列表
|
|
getPreloadPageList() {
|
|
const preloadPages = [];
|
|
const maxPreloadPages = 3; // 优化：最多预加载3页，减少服务器压力
|
|
|
|
// 从当前页面的下一页开始预加载
|
|
for (let i = this.currentPage; i < Math.min(this.currentPage + maxPreloadPages, this.bookPages.length); i++) {
|
|
const pageData = this.bookPages[i];
|
|
|
|
// 检查页面是否有文本内容且未缓存
|
|
if (pageData && pageData.length > 0) {
|
|
const hasTextContent = pageData.some(item => item.type === 'text' && item.content);
|
|
const cacheKey = `${this.courseId}_${i + 1}`;
|
|
const isAlreadyCached = this.audioCache[cacheKey];
|
|
|
|
if (hasTextContent && !isAlreadyCached) {
|
|
preloadPages.push({
|
|
pageIndex: i,
|
|
pageData: pageData
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return preloadPages;
|
|
},
|
|
|
|
// 预加载单个页面的音频
|
|
async preloadPageAudio(pageIndex, pageData) {
|
|
const cacheKey = `${this.courseId}_${pageIndex + 1}`;
|
|
|
|
// 检查是否已经缓存
|
|
if (this.audioCache[cacheKey]) {
|
|
console.log(`第${pageIndex + 1}页音频已缓存，跳过`);
|
|
return;
|
|
}
|
|
|
|
// 收集页面中的文本内容
|
|
const textItems = pageData.filter(item => item.type === 'text' && item.content);
|
|
|
|
if (textItems.length === 0) {
|
|
console.log(`第${pageIndex + 1}页没有文本内容，跳过`);
|
|
return;
|
|
}
|
|
|
|
console.log(`第${pageIndex + 1}页有${textItems.length}个文本段落需要预加载`);
|
|
|
|
const audioArray = [];
|
|
let totalDuration = 0;
|
|
|
|
// 逐个处理文本项，支持长文本分割
|
|
for (let i = 0; i < textItems.length; i++) {
|
|
const item = textItems[i];
|
|
|
|
try {
|
|
console.log(`第${pageIndex + 1}页处理第 ${i + 1}/${textItems.length} 个文本项，长度: ${item.content.length}`);
|
|
|
|
// 使用分批次请求音频
|
|
const batchResult = await this.requestAudioInBatches(item.content, this.voiceId);
|
|
|
|
if (batchResult.audioSegments.length > 0) {
|
|
// 将所有音频段添加到音频数组
|
|
for (const segment of batchResult.audioSegments) {
|
|
if (!segment.error) {
|
|
audioArray.push({
|
|
url: segment.url,
|
|
text: segment.text,
|
|
duration: segment.duration,
|
|
startIndex: segment.startIndex,
|
|
endIndex: segment.endIndex,
|
|
segmentIndex: segment.segmentIndex,
|
|
originalTextIndex: i, // 标记属于哪个原始文本项
|
|
isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
|
|
});
|
|
|
|
totalDuration += segment.duration;
|
|
}
|
|
}
|
|
|
|
console.log(`第${pageIndex + 1}页第${i + 1}个文本项预加载完成，获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
|
|
} else {
|
|
console.error(`第${pageIndex + 1}页第${i + 1}个文本项音频预加载全部失败`);
|
|
}
|
|
} catch (error) {
|
|
console.error(`第${pageIndex + 1}页第${i + 1}个文本项处理异常:`, error);
|
|
}
|
|
|
|
// 每个文本项处理之间间隔600ms，避免请求过于频繁
|
|
if (i < textItems.length - 1) {
|
|
await new Promise(resolve => setTimeout(resolve, 600));
|
|
}
|
|
}
|
|
|
|
// 保存到缓存
|
|
if (audioArray.length > 0) {
|
|
this.audioCache[cacheKey] = {
|
|
audios: audioArray,
|
|
totalDuration: totalDuration
|
|
};
|
|
|
|
console.log(`第${pageIndex + 1}页音频预加载完成，共${audioArray.length}个音频，总时长: ${totalDuration}秒`);
|
|
|
|
// 限制缓存大小
|
|
this.limitCacheSize(10);
|
|
}
|
|
},
|
|
|
|
// 检查指定页面是否有音频缓存
|
|
checkAudioCache(pageNumber) {
|
|
const cacheKey = `${this.courseId}_${pageNumber}`;
|
|
const cachedData = this.audioCache[cacheKey];
|
|
|
|
if (cachedData && cachedData.audios && cachedData.audios.length > 0) {
|
|
console.log(`第${pageNumber}页音频已缓存，共${cachedData.audios.length}个音频`);
|
|
return true;
|
|
}
|
|
|
|
console.log(`第${pageNumber}页音频未缓存`);
|
|
return false;
|
|
},
|
|
|
|
// 自动播放已缓存的音频
|
|
async autoPlayCachedAudio() {
|
|
try {
|
|
const cacheKey = `${this.courseId}_${this.currentPage}`;
|
|
const cachedData = this.audioCache[cacheKey];
|
|
|
|
if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
|
|
console.log('当前页面没有缓存的音频');
|
|
return;
|
|
}
|
|
|
|
console.log(`开始自动播放第${this.currentPage}页的缓存音频`);
|
|
|
|
// 停止当前播放的音频
|
|
this.pauseAudio();
|
|
|
|
// 设置当前页面的音频数据
|
|
this.currentPageAudios = cachedData.audios;
|
|
this.totalDuration = cachedData.totalDuration;
|
|
|
|
// 重置播放状态
|
|
this.currentAudioIndex = 0;
|
|
this.currentTime = 0;
|
|
this.isPlaying = false;
|
|
|
|
// 延迟一下再开始播放，确保UI更新完成
|
|
setTimeout(() => {
|
|
this.playAudio();
|
|
}, 300);
|
|
|
|
} catch (error) {
|
|
console.error('自动播放缓存音频失败:', error);
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 初始檢測播放速度支持
|
|
this.checkInitialPlaybackRateSupport();
|
|
|
|
// 监听音色切换事件
|
|
uni.$on('selectVoice', (voiceId) => {
|
|
console.log('音色切換:', this.voiceId, '->', voiceId);
|
|
|
|
// 音色切換時清除所有音頻緩存，因為不同音色的音頻文件不同
|
|
this.clearAudioCache();
|
|
|
|
// 停止當前播放的音頻
|
|
if (this.currentAudio) {
|
|
this.currentAudio.destroy();
|
|
this.currentAudio = null;
|
|
}
|
|
|
|
// 重置音頻狀態
|
|
this.currentPageAudios = [];
|
|
this.totalTime = 0;
|
|
this.hasAudioData = false;
|
|
this.isPlaying = false;
|
|
this.currentTime = 0;
|
|
this.currentAudioIndex = 0;
|
|
this.currentHighlightIndex = -1;
|
|
this.sliderValue = 0;
|
|
this.isDragging = false;
|
|
|
|
// 通知父组件音频状态变化
|
|
this.$emit('audio-state-change', {
|
|
hasAudioData: this.hasAudioData,
|
|
isLoading: this.isAudioLoading,
|
|
currentHighlightIndex: this.currentHighlightIndex
|
|
});
|
|
|
|
// 重新請求當前頁面的音頻數據
|
|
if (this.isTextPage) {
|
|
console.log('音色切換後重新獲取音頻數據');
|
|
this.handleGetAudio();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 自动播放预加载的音频
|
|
async autoPlayPreloadedAudio() {
|
|
try {
|
|
// 检查是否有音频数据
|
|
if (!this.hasAudioData || this.currentPageAudios.length === 0) {
|
|
console.log('没有可播放的音频数据');
|
|
return;
|
|
}
|
|
|
|
// 检查第一个音频是否有效
|
|
const firstAudio = this.currentPageAudios[0];
|
|
if (!firstAudio || !firstAudio.url) {
|
|
console.log('第一个音频无效');
|
|
return;
|
|
}
|
|
|
|
console.log('开始自动播放预加载音频');
|
|
|
|
// 重置播放状态
|
|
this.currentAudioIndex = 0;
|
|
this.currentTime = 0;
|
|
this.sliderValue = 0;
|
|
this.currentHighlightIndex = 0;
|
|
|
|
// 创建音频实例
|
|
this.createAudioInstance();
|
|
|
|
// 稍等一下再播放，确保音频准备就绪
|
|
setTimeout(() => {
|
|
if (this.currentAudio && !this.isPlaying) {
|
|
this.currentAudio.play();
|
|
console.log('预加载音频自动播放成功');
|
|
}
|
|
}, 200);
|
|
|
|
} catch (error) {
|
|
console.error('自动播放预加载音频失败:', error);
|
|
}
|
|
},
|
|
|
|
beforeDestroy() {
|
|
// 清理事件监听
|
|
uni.$off('selectVoice');
|
|
// 清理音频资源
|
|
this.destroyAudio();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 音频控制栏样式 */
|
|
.audio-controls-wrapper {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.audio-controls {
|
|
background: #fff;
|
|
padding: 20rpx 40rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
transition: transform 0.3s ease;
|
|
position: relative;
|
|
z-index: 10;
|
|
&.audio-hidden {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
.audio-time {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.time-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
min-width: 80rpx;
|
|
}
|
|
|
|
.progress-container {
|
|
flex: 1;
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.audio-controls-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.control-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10rpx;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.control-btn.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.control-text {
|
|
font-size: 28rpx;
|
|
color: #4A4A4A;
|
|
}
|
|
|
|
.play-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
/* 音频加载状态样式 */
|
|
.audio-loading-container {
|
|
background: #fff;
|
|
padding: 40rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20rpx;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 加载指示器样式 */
|
|
.loading-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10rpx;
|
|
padding: 10rpx 20rpx;
|
|
background: rgba(6, 218, 220, 0.1);
|
|
border-radius: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.loading-indicator-text {
|
|
font-size: 24rpx;
|
|
color: #06DADC;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 获取音频按钮样式 */
|
|
.audio-get-button-container {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
padding: 30rpx;
|
|
border-radius: 20rpx;
|
|
border: 2rpx solid #E5E5E5;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.get-audio-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
padding: 20rpx 40rpx;
|
|
background: linear-gradient(135deg, #06DADC 0%, #04B8BA 100%);
|
|
border-radius: 50rpx;
|
|
box-shadow: 0 8rpx 20rpx rgba(6, 218, 220, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.get-audio-btn:active {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 4rpx 10rpx rgba(6, 218, 220, 0.2);
|
|
}
|
|
|
|
/* 音频预加载提示样式 */
|
|
.audio-preloaded-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.preloaded-tip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
padding: 20rpx 40rpx;
|
|
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
|
|
border-radius: 50rpx;
|
|
box-shadow: 0 8rpx 20rpx rgba(82, 196, 26, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.preloaded-text {
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.get-audio-text {
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|