四零语境前端代码仓库
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.

2509 lines
83 KiB

1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
  1. <template>
  2. <view class="audio-controls-wrapper">
  3. <!-- 会员限制页面不显示任何音频控制 -->
  4. <view v-if="isAudioDisabled" class="member-restricted-container">
  5. <!-- 不显示任何内容完全隐藏音频功能 -->
  6. </view>
  7. <!-- 音频加载中 -->
  8. <view v-else-if="isTextPage && isAudioLoading" class="audio-loading-container">
  9. <uv-loading-icon mode="spinner" size="30" color="#06DADC"></uv-loading-icon>
  10. <text class="loading-text">{{currentPage}}页音频加载中请稍等...</text>
  11. </view>
  12. <!-- 正常音频控制栏 -->
  13. <view v-else-if="isTextPage && hasAudioData" class="audio-controls">
  14. <!-- 加载指示器 -->
  15. <view v-if="isAudioLoading" class="loading-indicator">
  16. <uv-loading-icon mode="spinner" size="16" color="#06DADC"></uv-loading-icon>
  17. <text class="loading-indicator-text">正在加载更多音频...</text>
  18. </view>
  19. <view class="audio-time">
  20. <text class="time-text">{{ formatTime(currentTime) }}</text>
  21. <view class="progress-container">
  22. <uv-slider
  23. v-model="sliderValue"
  24. :min="0"
  25. :max="totalTime"
  26. :step="0.1"
  27. activeColor="#06DADC"
  28. backgroundColor="#e0e0e0"
  29. :blockSize="16"
  30. blockColor="#ffffff"
  31. disabled
  32. :customStyle="{ flex: 1, margin: '0 10px' }"
  33. />
  34. </view>
  35. <text class="time-text">{{ formatTime(totalTime) }}</text>
  36. </view>
  37. <view class="audio-controls-row">
  38. <view class="control-btn" @click="toggleLoop">
  39. <uv-icon name="reload" size="20" :color="isLoop ? '#06DADC' : '#999'"></uv-icon>
  40. <text class="control-text">循环</text>
  41. </view>
  42. <view class="control-btn" @click="$emit('previous-page')">
  43. <text class="control-text">上一页</text>
  44. </view>
  45. <view class="play-btn" @click="togglePlay">
  46. <uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="40" color="#666"></uv-icon>
  47. </view>
  48. <view class="control-btn" @click="$emit('next-page')">
  49. <text class="control-text">下一页</text>
  50. </view>
  51. <view class="control-btn" @click="toggleSpeed" :class="{ 'disabled': !playbackRateSupported }">
  52. <text class="control-text" :style="{ opacity: playbackRateSupported ? 1 : 0.5 }">
  53. {{ playbackRateSupported ? playSpeed + 'x' : '不支持' }}
  54. </text>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. import config from '@/mixins/config.js'
  62. export default {
  63. name: 'AudioControls',
  64. mixins: [config],
  65. props: {
  66. // 基础数据
  67. currentPage: {
  68. type: Number,
  69. default: 1
  70. },
  71. courseId: {
  72. type: String,
  73. default: ''
  74. },
  75. voiceId: {
  76. type: String,
  77. default: ''
  78. },
  79. bookPages: {
  80. type: Array,
  81. default: () => []
  82. },
  83. isTextPage: {
  84. type: Boolean,
  85. default: false
  86. },
  87. shouldLoadAudio: {
  88. type: Boolean,
  89. default: false
  90. },
  91. isMember: {
  92. type: Boolean,
  93. default: false
  94. },
  95. currentPageRequiresMember: {
  96. type: Boolean,
  97. default: false
  98. },
  99. pagePay: {
  100. type: Array,
  101. default: () => []
  102. }
  103. },
  104. data() {
  105. return {
  106. // 音频控制相关数据
  107. isPlaying: false,
  108. currentTime: 0,
  109. totalTime: 0,
  110. sliderValue: 0, // 滑動條的值
  111. isDragging: false, // 是否正在拖動滑動條
  112. isLoop: false,
  113. playSpeed: 1.0,
  114. speedOptions: [0.5, 0.8, 1.0, 1.25, 1.5, 2.0], // 根據uni-app文檔的官方支持值
  115. playbackRateSupported: true, // 播放速度控制是否支持
  116. // 音频数组管理
  117. currentPageAudios: [], // 当前页面的音频数组
  118. currentAudioIndex: 0, // 当前播放的音频索引
  119. audioContext: null, // 音频上下文
  120. currentAudio: null, // 当前音频实例
  121. // 音频缓存管理
  122. audioCache: {}, // 页面音频缓存 {pageIndex: {audios: [], totalDuration: 0}}
  123. // 预加载相关状态
  124. isPreloading: false, // 是否正在预加载
  125. preloadProgress: 0, // 预加载进度 (0-100)
  126. preloadQueue: [], // 预加载队列
  127. // 音频加载状态
  128. isAudioLoading: false, // 音频是否正在加载
  129. hasAudioData: false, // 当前页面是否已有音频数据
  130. isVoiceChanging: false, // 音色切换中的加载状态
  131. audioLoadFailed: false, // 音频获取失败状态
  132. // 文本高亮相关
  133. currentHighlightIndex: -1, // 当前高亮的文本索引
  134. // 课程切换相关状态
  135. isJustSwitchedCourse: false, // 是否刚刚切换了课程
  136. // 页面切换防抖相关
  137. pageChangeTimer: null, // 页面切换防抖定时器
  138. isPageChanging: false, // 是否正在切换页面
  139. // 请求取消相关
  140. currentRequestId: null, // 当前音频请求ID
  141. shouldCancelRequest: false, // 是否应该取消当前请求
  142. // 本地音色ID(避免直接修改prop)
  143. localVoiceId: '', // 本地音色ID,从prop初始化
  144. }
  145. },
  146. computed: {
  147. // 计算音频播放进度百分比
  148. progressPercent() {
  149. return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;
  150. },
  151. // 检查当前页面是否有缓存的音频
  152. hasCurrentPageCache() {
  153. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  154. const cachedData = this.audioCache[cacheKey];
  155. // 更严格的缓存有效性检查
  156. if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
  157. return false;
  158. }
  159. // 检查缓存的音色ID是否与当前音色匹配
  160. if (cachedData.voiceId && cachedData.voiceId !== this.localVoiceId) {
  161. console.warn('缓存音色不匹配:', cachedData.voiceId, '!=', this.localVoiceId);
  162. return false;
  163. }
  164. // 检查音频URL是否有效
  165. const firstAudio = cachedData.audios[0];
  166. if (!firstAudio || !firstAudio.url) {
  167. console.warn('缓存音频数据无效');
  168. return false;
  169. }
  170. return true;
  171. },
  172. // 判断音频功能是否应该被禁用(会员限制页面且用户非会员)
  173. isAudioDisabled() {
  174. return this.currentPageRequiresMember && !this.isMember;
  175. },
  176. // 检查当前页面是否正在预加载中
  177. isCurrentPagePreloading() {
  178. // 如果全局预加载状态为true,需要检查当前页面是否在预加载队列中
  179. if (this.isPreloading) {
  180. // 检查当前页面是否有缓存(如果有缓存说明已经预加载完成)
  181. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  182. const hasCache = this.audioCache[cacheKey] && this.audioCache[cacheKey].audios && this.audioCache[cacheKey].audios.length > 0;
  183. // 如果没有缓存且正在预加载,说明当前页面可能正在预加载中
  184. if (!hasCache) {
  185. console.log('当前页面可能正在预加载中,页面:', this.currentPage, '缓存状态:', hasCache);
  186. return true;
  187. }
  188. }
  189. return false;
  190. }
  191. },
  192. watch: {
  193. // 监听页面变化,重置音频状态
  194. currentPage: {
  195. handler(newPage, oldPage) {
  196. if (newPage !== oldPage) {
  197. console.log('页面切换:', oldPage, '->', newPage);
  198. // 设置页面切换状态
  199. this.isPageChanging = true;
  200. // 立即重置音频状态,防止穿音
  201. this.resetAudioState();
  202. // 清除之前的防抖定时器
  203. if (this.pageChangeTimer) {
  204. clearTimeout(this.pageChangeTimer);
  205. }
  206. // 使用防抖机制,避免频繁切换时重复加载
  207. this.pageChangeTimer = setTimeout(() => {
  208. this.isPageChanging = false;
  209. // 检查新页面是否有预加载完成的音频缓存
  210. this.$nextTick(() => {
  211. this.checkAndLoadPreloadedAudio();
  212. });
  213. }, 300); // 300ms防抖延迟
  214. }
  215. },
  216. immediate: false
  217. },
  218. // 监听音色变化,更新本地音色ID
  219. voiceId: {
  220. handler(newVoiceId, oldVoiceId) {
  221. if (newVoiceId !== oldVoiceId) {
  222. console.log('🎵 音色ID变化:', oldVoiceId, '->', newVoiceId);
  223. // 更新本地音色ID
  224. this.localVoiceId = newVoiceId;
  225. }
  226. },
  227. immediate: true // 立即执行,用于初始化
  228. }
  229. },
  230. methods: {
  231. // 检查并自动加载预加载完成的音频
  232. checkAndLoadPreloadedAudio() {
  233. // 只在需要加载音频的页面检查
  234. if (!this.shouldLoadAudio) {
  235. return;
  236. }
  237. // 检查当前页面是否有缓存的音频数据
  238. const pageKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  239. const cachedAudio = this.audioCache[pageKey];
  240. if (cachedAudio && cachedAudio.audios && cachedAudio.audios.length > 0) {
  241. // 有缓存:直接显示控制栏
  242. this.currentPageAudios = cachedAudio.audios;
  243. this.totalTime = cachedAudio.totalDuration || 0;
  244. this.hasAudioData = true;
  245. this.isAudioLoading = false;
  246. console.log('检测到缓存音频,显示控制栏');
  247. } else {
  248. // 没有缓存:自动开始加载音频
  249. console.log('没有缓存音频,开始加载当前页面音频');
  250. this.getCurrentPageAudio();
  251. }
  252. },
  253. // 智能分割文本,按句号和逗号分割中英文文本
  254. splitTextIntelligently(text) {
  255. if (!text || typeof text !== 'string') {
  256. return [text];
  257. }
  258. // 判断是否为中文文本(包含中文字符)
  259. const isChinese = /[\u4e00-\u9fa5]/.test(text);
  260. const maxLength = isChinese ? 100 : 200;
  261. // 如果文本长度不超过限制,直接返回
  262. if (text.length <= maxLength) {
  263. return [{
  264. text: text,
  265. startIndex: 0,
  266. endIndex: text.length - 1
  267. }];
  268. }
  269. const segments = [];
  270. let currentText = text;
  271. let globalStartIndex = 0;
  272. while (currentText.length > 0) {
  273. if (currentText.length <= maxLength) {
  274. // 剩余文本不超过限制,直接添加
  275. segments.push({
  276. text: currentText,
  277. startIndex: globalStartIndex,
  278. endIndex: globalStartIndex + currentText.length - 1
  279. });
  280. break;
  281. }
  282. // 在限制长度内寻找最佳分割点
  283. let splitIndex = maxLength;
  284. let bestSplitIndex = -1;
  285. // 优先寻找句号
  286. for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {
  287. const char = currentText[i];
  288. if (char === '。' || char === '.') {
  289. bestSplitIndex = i + 1; // 包含句号
  290. break;
  291. }
  292. }
  293. // 如果没找到句号,寻找逗号
  294. if (bestSplitIndex === -1) {
  295. for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {
  296. const char = currentText[i];
  297. if (char === ',' || char === ',' || char === ';' || char === ';') {
  298. bestSplitIndex = i + 1; // 包含标点符号
  299. break;
  300. }
  301. }
  302. }
  303. // 如果还是没找到合适的分割点,使用默认长度
  304. if (bestSplitIndex === -1) {
  305. bestSplitIndex = maxLength;
  306. }
  307. // 提取当前段落
  308. const segment = currentText.substring(0, bestSplitIndex).trim();
  309. if (segment.length > 0) {
  310. segments.push({
  311. text: segment,
  312. startIndex: globalStartIndex,
  313. endIndex: globalStartIndex + segment.length - 1
  314. });
  315. }
  316. // 更新剩余文本和全局索引
  317. currentText = currentText.substring(bestSplitIndex).trim();
  318. globalStartIndex += bestSplitIndex;
  319. }
  320. console.log(`文本分割完成,原长度: ${text.length},分割为 ${segments.length} 段:`, segments);
  321. return segments;
  322. },
  323. // 分批次请求音频
  324. async requestAudioInBatches(text, voiceType) {
  325. const segments = this.splitTextIntelligently(text);
  326. const audioSegments = [];
  327. let totalDuration = 0;
  328. const requestId = this.currentRequestId; // 保存当前请求ID
  329. console.log(`开始分批次请求音频,共 ${segments.length} 段,请求ID: ${requestId}`);
  330. for (let i = 0; i < segments.length; i++) {
  331. // 检查是否应该取消请求
  332. if (this.shouldCancelRequest || this.currentRequestId !== requestId) {
  333. console.log(`请求已取消,停止音频加载,请求ID: ${requestId}`);
  334. return null; // 返回null表示请求被取消
  335. }
  336. const segment = segments[i];
  337. try {
  338. console.log(`请求第 ${i + 1}/${segments.length} 段音频:`, segment.text.substring(0, 50) + '...');
  339. const radioRes = await this.$api.music.textToVoice({
  340. text: segment.text,
  341. voiceType: voiceType,
  342. });
  343. if (radioRes.code === 200 && radioRes.result && radioRes.result.url) {
  344. const audioUrl = radioRes.result.url;
  345. const duration = radioRes.result.time || 0;
  346. audioSegments.push({
  347. url: audioUrl,
  348. text: segment.text,
  349. duration: duration,
  350. startIndex: segment.startIndex,
  351. endIndex: segment.endIndex,
  352. segmentIndex: i,
  353. isSegmented: segments.length > 1,
  354. originalText: text
  355. });
  356. totalDuration += duration;
  357. console.log(`${i + 1} 段音频请求成功,时长: ${duration}`);
  358. } else {
  359. console.error(`${i + 1} 段音频请求失败:`, radioRes);
  360. // 即使某段失败,也继续处理其他段
  361. audioSegments.push({
  362. url: null,
  363. text: segment.text,
  364. duration: 0,
  365. startIndex: segment.startIndex,
  366. endIndex: segment.endIndex,
  367. segmentIndex: i,
  368. error: true,
  369. isSegmented: segments.length > 1,
  370. originalText: text
  371. });
  372. }
  373. } catch (error) {
  374. console.error(`${i + 1} 段音频请求异常:`, error);
  375. audioSegments.push({
  376. url: null,
  377. text: segment.text,
  378. duration: 0,
  379. startIndex: segment.startIndex,
  380. endIndex: segment.endIndex,
  381. segmentIndex: i,
  382. error: true,
  383. isSegmented: segments.length > 1,
  384. originalText: text
  385. });
  386. }
  387. // 每个请求之间间隔400ms,避免请求过于频繁
  388. if (i < segments.length - 1) {
  389. await new Promise(resolve => setTimeout(resolve, 400));
  390. }
  391. }
  392. console.log(`分批次音频请求完成,成功 ${audioSegments.filter(s => !s.error).length}/${segments.length}`);
  393. return {
  394. audioSegments: audioSegments,
  395. totalDuration: totalDuration,
  396. originalText: text
  397. };
  398. },
  399. // 获取当前页面的音频内容
  400. async getCurrentPageAudio(autoPlay = false) {
  401. // 检查是否正在页面切换中,如果是则不加载音频
  402. if (this.isPageChanging) {
  403. console.log('页面切换中,跳过音频加载');
  404. return;
  405. }
  406. // 检查是否需要加载音频
  407. if (!this.shouldLoadAudio) {
  408. console.log('当前页面不需要加载音频');
  409. // 清空音频状态
  410. this.currentPageAudios = [];
  411. this.hasAudioData = false;
  412. this.isAudioLoading = false;
  413. this.audioLoadFailed = false;
  414. this.currentAudioIndex = 0;
  415. this.currentTime = 0;
  416. this.totalTime = 0;
  417. this.currentHighlightIndex = -1;
  418. // 通知父组件音频状态变化
  419. this.$emit('audio-state-change', {
  420. hasAudioData: false,
  421. isLoading: false,
  422. currentHighlightIndex: -1
  423. });
  424. return;
  425. }
  426. // 检查会员限制
  427. if (this.isAudioDisabled) {
  428. return;
  429. }
  430. // 检查是否已经在加载中,防止重复加载(音色切换时除外)
  431. if (this.isAudioLoading && !this.isVoiceChanging) {
  432. console.log('音频已在加载中,跳过重复加载');
  433. return;
  434. }
  435. // 检查缓存中是否已有当前页面的音频数据
  436. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  437. if (this.audioCache[cacheKey]) {
  438. console.log('从缓存加载音频数据:', cacheKey);
  439. // 从缓存加载音频数据
  440. this.currentPageAudios = this.audioCache[cacheKey].audios;
  441. this.totalTime = this.audioCache[cacheKey].totalDuration;
  442. this.currentAudioIndex = 0;
  443. this.isPlaying = false;
  444. this.currentTime = 0;
  445. this.hasAudioData = true;
  446. this.isAudioLoading = false;
  447. // 如果是课程切换后的自动加载,清除切换标识
  448. if (this.isJustSwitchedCourse) {
  449. this.isJustSwitchedCourse = false;
  450. }
  451. // 通知父组件音频状态变化
  452. this.$emit('audio-state-change', {
  453. hasAudioData: this.hasAudioData,
  454. isLoading: this.isAudioLoading,
  455. currentHighlightIndex: this.currentHighlightIndex
  456. });
  457. return;
  458. }
  459. // 开始加载状态
  460. this.isAudioLoading = true;
  461. this.hasAudioData = false;
  462. // 重置请求取消标识并生成新的请求ID
  463. this.shouldCancelRequest = false;
  464. this.currentRequestId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
  465. console.log('开始新的音频请求,ID:', this.currentRequestId);
  466. // 清空当前页面音频数组
  467. this.currentPageAudios = [];
  468. this.currentAudioIndex = 0;
  469. this.isPlaying = false;
  470. this.currentTime = 0;
  471. this.totalTime = 0;
  472. // 通知父组件开始加载
  473. this.$emit('audio-state-change', {
  474. hasAudioData: this.hasAudioData,
  475. isLoading: this.isAudioLoading,
  476. currentHighlightIndex: this.currentHighlightIndex
  477. });
  478. try {
  479. // 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
  480. const currentPageData = this.bookPages[this.currentPage - 1];
  481. if (currentPageData) {
  482. // 收集所有text类型的元素
  483. const textItems = currentPageData.filter(item => item.type === 'text');
  484. if (textItems.length > 0) {
  485. let firstAudioPlayed = false; // 标记是否已播放第一个音频
  486. let loadedAudiosCount = 0; // 已加载的音频数量
  487. // 逐个处理文本项,支持长文本分割
  488. for (let index = 0; index < textItems.length; index++) {
  489. const item = textItems[index];
  490. try {
  491. console.log(`处理第 ${index + 1}/${textItems.length} 个文本项,长度: ${item.content.length}`);
  492. // 使用分批次请求音频
  493. console.log('🎵 请求音频 - 当前音色ID:', this.localVoiceId);
  494. const batchResult = await this.requestAudioInBatches(item.content, this.localVoiceId);
  495. // 检查请求是否被取消
  496. if (batchResult === null) {
  497. console.log('音频请求被取消,停止处理');
  498. return;
  499. }
  500. if (batchResult.audioSegments.length > 0) {
  501. // 同时保存到原始数据中以保持兼容性(使用第一段的URL)
  502. const firstValidSegment = batchResult.audioSegments.find(seg => !seg.error);
  503. if (firstValidSegment) {
  504. item.audioUrl = firstValidSegment.url;
  505. }
  506. // 将所有音频段添加到音频数组
  507. for (const segment of batchResult.audioSegments) {
  508. if (!segment.error) {
  509. const audioData = {
  510. url: segment.url,
  511. text: segment.text,
  512. duration: segment.duration,
  513. startIndex: segment.startIndex,
  514. endIndex: segment.endIndex,
  515. segmentIndex: segment.segmentIndex,
  516. originalTextIndex: index, // 标记属于哪个原始文本项
  517. isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
  518. };
  519. this.currentPageAudios.push(audioData);
  520. loadedAudiosCount++;
  521. }
  522. }
  523. // 如果是第一个音频,立即开始播放
  524. if (!firstAudioPlayed && this.currentPageAudios.length > 0) {
  525. firstAudioPlayed = true;
  526. this.hasAudioData = true;
  527. this.currentAudioIndex = 0;
  528. console.log(`第一个音频时长: ${this.currentPageAudios[0].duration}`);
  529. // 通知父组件有音频数据了,但仍在加载中
  530. this.$emit('audio-state-change', {
  531. hasAudioData: this.hasAudioData,
  532. isLoading: this.isAudioLoading, // 保持加载状态
  533. currentHighlightIndex: this.currentHighlightIndex
  534. });
  535. // 立即创建音频实例并开始播放
  536. console.log('创建第一个音频实例并开始播放');
  537. this.createAudioInstance();
  538. // 等待音频实例准备好后开始播放(仅在非音色切换时或明确要求自动播放时)
  539. setTimeout(() => {
  540. if (this.currentAudio && !this.isPlaying && (!this.isVoiceChanging || autoPlay)) {
  541. if (autoPlay || !this.isVoiceChanging) {
  542. console.log('自动播放第一个音频,autoPlay:', autoPlay);
  543. this.currentAudio.play();
  544. // isPlaying状态会在onPlay事件中自动设置
  545. this.updateHighlightIndex();
  546. }
  547. }
  548. }, 100);
  549. }
  550. console.log(`文本项 ${index + 1} 处理完成,获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
  551. } else {
  552. console.error(`文本项 ${index + 1} 音频请求全部失败`);
  553. }
  554. } catch (error) {
  555. console.error(`文本项 ${index + 1} 处理异常:`, error);
  556. }
  557. }
  558. console.log('所有音频请求完成,共获取', this.currentPageAudios.length, '个音频');
  559. // 如果有音频,重新计算精确的总时长
  560. if (this.currentPageAudios.length > 0) {
  561. await this.calculateTotalDuration();
  562. // 将音频数据保存到缓存中
  563. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  564. this.audioCache[cacheKey] = {
  565. audios: [...this.currentPageAudios], // 深拷贝音频数组
  566. totalDuration: this.totalTime,
  567. voiceId: this.localVoiceId, // 保存音色ID用于验证
  568. timestamp: Date.now() // 保存时间戳
  569. };
  570. console.log('音频数据已缓存:', cacheKey, this.audioCache[cacheKey]);
  571. // 限制缓存大小
  572. this.limitCacheSize(10);
  573. }
  574. }
  575. }
  576. // 结束加载状态
  577. this.isAudioLoading = false;
  578. this.isVoiceChanging = false; // 清除音色切换加载状态
  579. // 如果是课程切换后的自动加载,清除切换标识
  580. if (this.isJustSwitchedCourse) {
  581. this.isJustSwitchedCourse = false;
  582. }
  583. // 设置音频数据状态和失败状态
  584. this.hasAudioData = this.currentPageAudios.length > 0;
  585. this.audioLoadFailed = !this.hasAudioData && this.shouldLoadAudio; // 如果需要音频但没有音频数据,则认为获取失败
  586. // 通知父组件音频状态变化
  587. this.$emit('audio-state-change', {
  588. hasAudioData: this.hasAudioData,
  589. isLoading: this.isAudioLoading,
  590. audioLoadFailed: this.audioLoadFailed,
  591. currentHighlightIndex: this.currentHighlightIndex
  592. });
  593. } catch (error) {
  594. console.error('getCurrentPageAudio 方法执行异常:', error);
  595. // 确保在异常情况下重置加载状态
  596. this.isAudioLoading = false;
  597. this.isVoiceChanging = false;
  598. this.audioLoadFailed = true;
  599. this.hasAudioData = false;
  600. // 通知父组件音频加载失败
  601. this.$emit('audio-state-change', {
  602. hasAudioData: false,
  603. isLoading: false,
  604. audioLoadFailed: true,
  605. currentHighlightIndex: this.currentHighlightIndex
  606. });
  607. // 显示错误提示
  608. uni.showToast({
  609. title: '音频加载失败,请重试',
  610. icon: 'none',
  611. duration: 2000
  612. });
  613. }
  614. },
  615. // 重新获取音频
  616. retryGetAudio() {
  617. console.log('用户点击重新获取音频');
  618. // 检查是否需要加载音频
  619. if (!this.shouldLoadAudio) {
  620. console.log('当前页面不支持音频功能');
  621. return;
  622. }
  623. // 重置失败状态
  624. this.audioLoadFailed = false;
  625. // 清除当前页面的音频缓存
  626. const pageKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  627. if (this.audioCache[pageKey]) {
  628. delete this.audioCache[pageKey];
  629. console.log('清除失败页面的音频缓存:', pageKey);
  630. }
  631. // 重新获取音频
  632. this.getCurrentPageAudio();
  633. },
  634. // 重置音频状态
  635. resetAudioState() {
  636. // 取消当前正在进行的音频请求
  637. this.shouldCancelRequest = true;
  638. console.log('页面切换:标记取消当前音频请求');
  639. // 立即停止并销毁当前音频实例,防止穿音
  640. if (this.currentAudio) {
  641. if (this.isPlaying) {
  642. this.currentAudio.pause();
  643. console.log('页面切换:立即停止音频播放');
  644. }
  645. this.currentAudio.destroy();
  646. this.currentAudio = null;
  647. console.log('页面切换:销毁音频实例');
  648. }
  649. // 重置播放状态
  650. this.currentAudioIndex = 0;
  651. this.isPlaying = false;
  652. this.currentTime = 0;
  653. this.totalTime = 0;
  654. this.sliderValue = 0;
  655. this.isAudioLoading = false;
  656. this.audioLoadFailed = false;
  657. this.currentHighlightIndex = -1;
  658. this.playSpeed = 1.0;
  659. // 如果不需要加载音频,直接重置为初始状态
  660. if (!this.shouldLoadAudio) {
  661. console.log('不需要音频的页面:重置音频状态');
  662. this.currentPageAudios = [];
  663. this.totalTime = 0;
  664. this.hasAudioData = false;
  665. } else {
  666. // 文本页面:检查是否有缓存的音频数据
  667. const pageKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  668. const cachedAudio = this.audioCache[pageKey];
  669. if (cachedAudio && cachedAudio.audios && cachedAudio.audios.length > 0) {
  670. // 有缓存:直接显示控制栏
  671. this.currentPageAudios = cachedAudio.audios;
  672. this.totalTime = cachedAudio.totalDuration || 0;
  673. this.hasAudioData = true;
  674. console.log('检测到缓存音频,显示控制栏');
  675. } else {
  676. // 没有缓存:重置为初始状态,但不立即加载(由checkAndLoadPreloadedAudio处理)
  677. this.currentPageAudios = [];
  678. this.totalTime = 0;
  679. this.hasAudioData = false;
  680. console.log('没有缓存音频,重置状态');
  681. }
  682. }
  683. // 通知父组件音频状态变化
  684. this.$emit('audio-state-change', {
  685. hasAudioData: this.hasAudioData,
  686. isLoading: this.isAudioLoading,
  687. currentHighlightIndex: this.currentHighlightIndex
  688. });
  689. },
  690. // 加载缓存的音频数据并显示播放控制栏
  691. loadCachedAudioData() {
  692. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  693. const cachedData = this.audioCache[cacheKey];
  694. // 严格验证缓存数据
  695. if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
  696. console.warn('缓存数据不存在或为空:', cacheKey);
  697. uni.showToast({
  698. title: '缓存音频数据不存在',
  699. icon: 'none'
  700. });
  701. return;
  702. }
  703. // 检查音色ID是否匹配
  704. if (cachedData.voiceId && cachedData.voiceId !== this.localVoiceId) {
  705. console.warn('缓存音色不匹配:', cachedData.voiceId, '!=', this.localVoiceId);
  706. uni.showToast({
  707. title: '音色已切换,请重新获取音频',
  708. icon: 'none'
  709. });
  710. return;
  711. }
  712. // 检查音频URL是否有效
  713. const firstAudio = cachedData.audios[0];
  714. if (!firstAudio || !firstAudio.url) {
  715. console.warn('缓存音频URL无效');
  716. uni.showToast({
  717. title: '缓存音频数据损坏',
  718. icon: 'none'
  719. });
  720. return;
  721. }
  722. console.log('手动加载缓存音频数据:', cacheKey);
  723. // 从缓存加载音频数据
  724. this.currentPageAudios = cachedData.audios;
  725. this.totalTime = cachedData.totalDuration || 0;
  726. this.currentAudioIndex = 0;
  727. this.isPlaying = false;
  728. this.currentTime = 0;
  729. this.hasAudioData = true;
  730. this.isAudioLoading = false;
  731. this.audioLoadFailed = false;
  732. this.currentHighlightIndex = -1;
  733. // 通知父组件音频状态变化
  734. this.$emit('audio-state-change', {
  735. hasAudioData: this.hasAudioData,
  736. isLoading: this.isAudioLoading,
  737. currentHighlightIndex: this.currentHighlightIndex
  738. });
  739. console.log('缓存音频加载完成,播放控制栏已显示');
  740. },
  741. // 手动获取音频
  742. async handleGetAudio() {
  743. // 检查会员限制
  744. if (this.isAudioDisabled) {
  745. return;
  746. }
  747. // 检查是否有音色ID
  748. if (!this.localVoiceId) {
  749. uni.showToast({
  750. title: '音色未加载,请稍后重试',
  751. icon: 'none'
  752. });
  753. return;
  754. }
  755. // 检查当前页面是否支持音频播放
  756. if (!this.shouldLoadAudio) {
  757. uni.showToast({
  758. title: '当前页面不支持音频播放',
  759. icon: 'none'
  760. });
  761. return;
  762. }
  763. // 检查是否正在加载
  764. if (this.isAudioLoading) {
  765. return;
  766. }
  767. // 调用获取音频方法
  768. await this.getCurrentPageAudio();
  769. },
  770. // 计算音频总时长
  771. async calculateTotalDuration() {
  772. let totalDuration = 0;
  773. for (let i = 0; i < this.currentPageAudios.length; i++) {
  774. const audio = this.currentPageAudios[i];
  775. // 使用API返回的准确时长信息
  776. if (audio.duration && audio.duration > 0) {
  777. console.log(`使用API返回的准确时长 ${i + 1}:`, audio.duration, '秒');
  778. totalDuration += audio.duration;
  779. } else {
  780. // 如果没有时长信息,使用文字长度估算(备用方案)
  781. const textLength = audio.text.length;
  782. // 假设较快语速每分钟约300个字符,即每秒约5个字符
  783. const estimatedDuration = Math.max(1, textLength / 5);
  784. audio.duration = estimatedDuration;
  785. totalDuration += estimatedDuration;
  786. console.log(`备用估算音频时长 ${i + 1}:`, estimatedDuration, '秒 (文字长度:', textLength, ')');
  787. }
  788. }
  789. this.totalTime = totalDuration;
  790. console.log('音频总时长:', totalDuration, '秒');
  791. },
  792. // 获取音频时长
  793. getAudioDuration(audioUrl) {
  794. return new Promise((resolve, reject) => {
  795. const audio = uni.createInnerAudioContext();
  796. audio.src = audioUrl;
  797. let resolved = false;
  798. // 监听音频加载完成事件
  799. audio.onCanplay(() => {
  800. console.log('音频可以播放,duration:', audio.duration);
  801. if (!resolved && audio.duration && audio.duration > 0) {
  802. resolved = true;
  803. resolve(audio.duration);
  804. audio.destroy();
  805. }
  806. });
  807. // 监听音频元数据加载完成事件
  808. audio.onLoadedmetadata = () => {
  809. console.log('音频元数据加载完成,duration:', audio.duration);
  810. if (!resolved && audio.duration && audio.duration > 0) {
  811. resolved = true;
  812. resolve(audio.duration);
  813. audio.destroy();
  814. }
  815. };
  816. // 监听音频时长更新事件
  817. audio.onDurationChange = () => {
  818. console.log('音频时长更新,duration:', audio.duration);
  819. if (!resolved && audio.duration && audio.duration > 0) {
  820. resolved = true;
  821. resolve(audio.duration);
  822. audio.destroy();
  823. }
  824. };
  825. // 移除onPlay監聽器,避免意外播放
  826. audio.onError((error) => {
  827. console.error('音频加载失败:', error);
  828. if (!resolved) {
  829. resolved = true;
  830. reject(error);
  831. audio.destroy();
  832. }
  833. });
  834. // 設置較長的超時時間,但不播放音頻
  835. setTimeout(() => {
  836. if (!resolved) {
  837. console.log('無法獲取音頻時長,使用默認值');
  838. resolved = true;
  839. reject(new Error('無法獲取音頻時長'));
  840. audio.destroy();
  841. }
  842. }, 1000);
  843. // 最終超時處理
  844. setTimeout(() => {
  845. if (!resolved) {
  846. console.warn('獲取音頻時長超時,使用默認值');
  847. resolved = true;
  848. reject(new Error('获取音频时长超时'));
  849. audio.destroy();
  850. }
  851. }, 5000);
  852. });
  853. },
  854. // 音频控制方法
  855. togglePlay() {
  856. // 检查会员限制
  857. if (this.isAudioDisabled) {
  858. return;
  859. }
  860. if (this.currentPageAudios.length === 0) {
  861. uni.showToast({
  862. title: '当前页面没有音频内容',
  863. icon: 'none'
  864. });
  865. return;
  866. }
  867. if (this.isPlaying) {
  868. this.pauseAudio();
  869. } else {
  870. this.playAudio();
  871. }
  872. },
  873. // 播放音频
  874. playAudio() {
  875. // 检查会员限制
  876. if (this.isAudioDisabled) {
  877. return;
  878. }
  879. if (this.currentPageAudios.length === 0) return;
  880. // 如果没有当前音频实例或者需要切换音频
  881. if (!this.currentAudio || this.currentAudio.src !== this.currentPageAudios[this.currentAudioIndex].url) {
  882. this.createAudioInstance();
  883. // 创建实例后稍等一下再播放,确保音频准备就绪
  884. setTimeout(() => {
  885. if (this.currentAudio) {
  886. this.currentAudio.play();
  887. // isPlaying状态会在onPlay事件中自动设置
  888. this.updateHighlightIndex();
  889. }
  890. }, 50);
  891. } else {
  892. // 音频实例已存在,直接播放
  893. this.currentAudio.play();
  894. // isPlaying状态会在onPlay事件中自动设置
  895. this.updateHighlightIndex();
  896. }
  897. },
  898. // 暂停音频
  899. pauseAudio() {
  900. if (this.currentAudio) {
  901. this.currentAudio.pause();
  902. }
  903. this.isPlaying = false;
  904. // 暂停时清除高亮
  905. this.currentHighlightIndex = -1;
  906. // 通知父组件高亮状态变化
  907. this.emitHighlightChange(-1);
  908. },
  909. // 播放指定的音频段落(通过文本内容匹配)
  910. playSpecificAudio(textContent) {
  911. console.log('尝试播放指定音频段落:', textContent);
  912. // 检查textContent是否有效
  913. if (!textContent || typeof textContent !== 'string') {
  914. console.log('无效的文本内容:', textContent);
  915. uni.showToast({
  916. title: '无效的文本内容',
  917. icon: 'none'
  918. });
  919. return false;
  920. }
  921. // 在当前页面音频数组中查找匹配的音频
  922. let audioIndex = this.currentPageAudios.findIndex(audio =>
  923. audio.text && audio.text.trim() === textContent.trim()
  924. );
  925. // 如果直接匹配失败,尝试匹配分段音频
  926. if (audioIndex === -1) {
  927. console.log('直接匹配失败,尝试匹配分段音频');
  928. // 查找包含该文本的分段音频
  929. audioIndex = this.currentPageAudios.findIndex(audio => {
  930. if (!audio.text) return false;
  931. // 检查是否为分段音频,且原始文本包含目标文本
  932. if (audio.isSegmented && audio.originalText) {
  933. return audio.originalText.trim() === textContent.trim();
  934. }
  935. // 检查目标文本是否包含在当前音频文本中,或者当前音频文本包含在目标文本中
  936. const audioText = audio.text.trim();
  937. const targetText = textContent.trim();
  938. return audioText.includes(targetText) || targetText.includes(audioText);
  939. });
  940. if (audioIndex !== -1) {
  941. console.log('找到分段音频匹配,索引:', audioIndex);
  942. }
  943. }
  944. if (audioIndex !== -1) {
  945. console.log('找到匹配的音频,索引:', audioIndex);
  946. // 停止当前播放的音频
  947. if (this.currentAudio) {
  948. this.currentAudio.pause();
  949. this.currentAudio.destroy();
  950. this.currentAudio = null;
  951. }
  952. // 设置新的音频索引
  953. this.currentAudioIndex = audioIndex;
  954. // 重置播放状态
  955. this.isPlaying = false;
  956. this.currentTime = 0;
  957. this.sliderValue = 0;
  958. // 更新高亮索引
  959. this.currentHighlightIndex = audioIndex;
  960. this.emitHighlightChange(audioIndex);
  961. // 创建新的音频实例并播放
  962. this.createAudioInstance();
  963. // 稍等一下再播放,确保音频准备就绪
  964. setTimeout(() => {
  965. if (this.currentAudio) {
  966. this.currentAudio.play();
  967. console.log('开始播放指定音频段落');
  968. }
  969. }, 100);
  970. return true; // 成功找到并播放
  971. } else {
  972. console.log('未找到匹配的音频段落:', textContent);
  973. uni.showToast({
  974. title: '未找到对应的音频',
  975. icon: 'none'
  976. });
  977. return false; // 未找到匹配的音频
  978. }
  979. },
  980. // 创建音频实例
  981. createAudioInstance() {
  982. // 销毁之前的音频实例
  983. if (this.currentAudio) {
  984. this.currentAudio.pause();
  985. this.currentAudio.destroy();
  986. this.currentAudio = null;
  987. }
  988. // 重置播放状态
  989. this.isPlaying = false;
  990. // 優先使用微信原生API以支持playbackRate
  991. let audio;
  992. if (typeof wx !== 'undefined' && wx.createInnerAudioContext) {
  993. console.log('使用微信原生音頻API');
  994. audio = wx.createInnerAudioContext();
  995. } else {
  996. console.log('使用uni-app音頻API');
  997. audio = uni.createInnerAudioContext();
  998. }
  999. const audioUrl = this.currentPageAudios[this.currentAudioIndex].url;
  1000. audio.src = audioUrl;
  1001. console.log('🎵 创建音频实例 - 当前音色ID:', this.voiceId);
  1002. console.log('🎵 创建音频实例 - 音频URL:', audioUrl);
  1003. console.log('🎵 创建音频实例 - 音频索引:', this.currentAudioIndex);
  1004. console.log('🎵 创建音频实例 - 音频文本:', this.currentPageAudios[this.currentAudioIndex].text?.substring(0, 50) + '...');
  1005. // 在音頻可以播放時檢測playbackRate支持
  1006. audio.onCanplay(() => {
  1007. console.log('🎵 音頻可以播放,開始檢測playbackRate支持');
  1008. this.checkPlaybackRateSupport(audio);
  1009. // 檢測完成後,設置用戶期望的播放速度
  1010. setTimeout(() => {
  1011. if (this.playbackRateSupported) {
  1012. console.log('設置播放速度:', this.playSpeed);
  1013. audio.playbackRate = this.playSpeed;
  1014. // 驗證設置結果
  1015. setTimeout(() => {
  1016. console.log('最終播放速度:', audio.playbackRate);
  1017. if (Math.abs(audio.playbackRate - this.playSpeed) > 0.01) {
  1018. console.log('⚠️ 播放速度設置可能未生效');
  1019. } else {
  1020. console.log('✅ 播放速度設置成功');
  1021. }
  1022. }, 50);
  1023. } else {
  1024. console.log('❌ 當前環境不支持播放速度控制');
  1025. }
  1026. }, 50);
  1027. });
  1028. // 音频事件监听
  1029. audio.onPlay(() => {
  1030. console.log('音频开始播放');
  1031. this.isPlaying = true;
  1032. });
  1033. audio.onPause(() => {
  1034. console.log('音频暂停');
  1035. this.isPlaying = false;
  1036. });
  1037. audio.onTimeUpdate(() => {
  1038. this.updateCurrentTime();
  1039. });
  1040. audio.onEnded(() => {
  1041. console.log('当前音频播放结束');
  1042. this.onAudioEnded();
  1043. });
  1044. audio.onError((error) => {
  1045. console.error('音频播放错误:', error);
  1046. this.isPlaying = false;
  1047. uni.showToast({
  1048. title: '音频播放失败',
  1049. icon: 'none'
  1050. });
  1051. });
  1052. this.currentAudio = audio;
  1053. },
  1054. // 更新当前播放时间
  1055. updateCurrentTime() {
  1056. if (!this.currentAudio) return;
  1057. let totalTime = 0;
  1058. // 计算之前音频的总时长
  1059. for (let i = 0; i < this.currentAudioIndex; i++) {
  1060. totalTime += this.currentPageAudios[i].duration;
  1061. }
  1062. // 加上当前音频的播放时间
  1063. totalTime += this.currentAudio.currentTime;
  1064. this.currentTime = totalTime;
  1065. // 如果不是正在拖動滑動條,則同步更新滑動條的值
  1066. if (!this.isDragging) {
  1067. this.sliderValue = this.currentTime;
  1068. }
  1069. // 更新当前高亮的文本索引
  1070. this.updateHighlightIndex();
  1071. },
  1072. // 更新高亮文本索引
  1073. updateHighlightIndex() {
  1074. if (!this.isPlaying || this.currentPageAudios.length === 0) {
  1075. this.currentHighlightIndex = -1;
  1076. this.emitHighlightChange(-1);
  1077. return;
  1078. }
  1079. // 获取当前播放的音频数据
  1080. const currentAudio = this.currentPageAudios[this.currentAudioIndex];
  1081. if (!currentAudio) {
  1082. this.currentHighlightIndex = -1;
  1083. this.emitHighlightChange(-1);
  1084. return;
  1085. }
  1086. // 如果是分段音频,需要计算正确的高亮索引
  1087. if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {
  1088. // 使用原始文本项的索引作为高亮索引
  1089. this.currentHighlightIndex = currentAudio.originalTextIndex;
  1090. console.log('分段音频高亮索引:', this.currentHighlightIndex, '原始文本索引:', currentAudio.originalTextIndex, '段索引:', currentAudio.segmentIndex);
  1091. } else {
  1092. // 非分段音频,使用音频索引
  1093. this.currentHighlightIndex = this.currentAudioIndex;
  1094. console.log('普通音频高亮索引:', this.currentHighlightIndex, '当前音频索引:', this.currentAudioIndex);
  1095. }
  1096. // 使用辅助方法发送高亮变化事件
  1097. this.emitHighlightChange(this.currentAudioIndex);
  1098. },
  1099. // 发送高亮变化事件的辅助方法
  1100. emitHighlightChange(highlightIndex = -1) {
  1101. if (highlightIndex === -1) {
  1102. // 清除高亮
  1103. this.$emit('highlight-change', -1);
  1104. return;
  1105. }
  1106. // 获取对应的音频数据
  1107. const audioData = this.currentPageAudios[highlightIndex];
  1108. if (!audioData) {
  1109. this.$emit('highlight-change', -1);
  1110. return;
  1111. }
  1112. // 发送详细的高亮信息
  1113. this.$emit('highlight-change', {
  1114. highlightIndex: audioData.originalTextIndex !== undefined ? audioData.originalTextIndex : highlightIndex,
  1115. isSegmented: audioData.isSegmented || false,
  1116. segmentIndex: audioData.segmentIndex || 0,
  1117. startIndex: audioData.startIndex || 0,
  1118. endIndex: audioData.endIndex || 0,
  1119. currentText: audioData.text || ''
  1120. });
  1121. },
  1122. // 音频播放结束处理
  1123. onAudioEnded() {
  1124. if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
  1125. // 播放下一个音频
  1126. this.currentAudioIndex++;
  1127. this.playAudio();
  1128. } else {
  1129. // 所有音频播放完毕
  1130. if (this.isLoop) {
  1131. // 循环播放
  1132. this.currentAudioIndex = 0;
  1133. this.playAudio();
  1134. } else {
  1135. // 停止播放
  1136. this.isPlaying = false;
  1137. this.currentTime = this.totalTime;
  1138. this.currentHighlightIndex = -1;
  1139. this.$emit('highlight-change', -1);
  1140. }
  1141. }
  1142. },
  1143. toggleLoop() {
  1144. this.isLoop = !this.isLoop;
  1145. },
  1146. toggleSpeed() {
  1147. // 檢查是否支持播放速度控制
  1148. if (!this.playbackRateSupported) {
  1149. uni.showToast({
  1150. title: '當前設備不支持播放速度控制',
  1151. icon: 'none',
  1152. duration: 2000
  1153. });
  1154. return;
  1155. }
  1156. const currentIndex = this.speedOptions.indexOf(this.playSpeed);
  1157. const nextIndex = (currentIndex + 1) % this.speedOptions.length;
  1158. const oldSpeed = this.playSpeed;
  1159. this.playSpeed = this.speedOptions[nextIndex];
  1160. console.log(`播放速度切換: ${oldSpeed}x -> ${this.playSpeed}x`);
  1161. // 如果当前有音频在播放,更新播放速度
  1162. if (this.currentAudio) {
  1163. const wasPlaying = this.isPlaying;
  1164. const currentTime = this.currentAudio.currentTime;
  1165. // 設置新的播放速度
  1166. this.currentAudio.playbackRate = this.playSpeed;
  1167. // 如果正在播放,需要重啟播放才能使播放速度生效
  1168. if (wasPlaying) {
  1169. this.currentAudio.pause();
  1170. setTimeout(() => {
  1171. this.currentAudio.seek(currentTime);
  1172. this.currentAudio.play();
  1173. }, 50);
  1174. }
  1175. console.log('音頻實例播放速度已更新為:', this.currentAudio.playbackRate);
  1176. // 顯示速度變更提示
  1177. uni.showToast({
  1178. title: `播放速度: ${this.playSpeed}x`,
  1179. icon: 'none',
  1180. duration: 1000
  1181. });
  1182. }
  1183. },
  1184. // 滑動條值實時更新 (@input 事件)
  1185. onSliderInput(value) {
  1186. // 在拖動過程中實時更新顯示的時間,但不影響實際播放
  1187. if (this.isDragging) {
  1188. // 可以在這裡實時更新顯示時間,讓用戶看到拖動到的時間點
  1189. // 但不改變實際的 currentTime,避免影響播放邏輯
  1190. console.log('實時更新滑動條值:', value);
  1191. }
  1192. },
  1193. // 滑動條拖動過程中的處理 (@changing 事件)
  1194. onSliderChanging(value) {
  1195. // 第一次觸發 changing 事件時,暫停播放並標記為拖動狀態
  1196. if (!this.isDragging) {
  1197. if (this.isPlaying) {
  1198. this.pauseAudio();
  1199. console.log('開始拖動滑動條,暫停播放');
  1200. }
  1201. this.isDragging = true;
  1202. }
  1203. // 更新滑動條的值,但不改變實際播放位置
  1204. this.sliderValue = value;
  1205. console.log('拖動中,滑動條值:', value);
  1206. },
  1207. // 滑動條拖動結束的處理 (@change 事件)
  1208. onSliderChange(value) {
  1209. console.log('滑動條變化,跳轉到位置:', value, '是否為拖動:', this.isDragging);
  1210. // 如果不是拖動狀態(即單點),需要先暫停播放
  1211. if (!this.isDragging && this.isPlaying) {
  1212. this.pauseAudio();
  1213. console.log('單點滑動條,暫停播放');
  1214. }
  1215. // 重置拖動狀態
  1216. this.isDragging = false;
  1217. this.sliderValue = value;
  1218. // 跳轉到指定位置,但不自動恢復播放
  1219. this.seekToTime(value, false);
  1220. console.log('滑動條操作完成,保持暫停狀態,需要手動點擊播放');
  1221. },
  1222. // 跳轉到指定時間
  1223. seekToTime(targetTime, shouldResume = false) {
  1224. if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
  1225. console.log('沒有音頻數據,無法跳轉');
  1226. return;
  1227. }
  1228. // 確保目標時間在有效範圍內
  1229. targetTime = Math.max(0, Math.min(targetTime, this.totalTime));
  1230. console.log('跳轉到時間:', targetTime, '秒', '總時長:', this.totalTime, '是否恢復播放:', shouldResume);
  1231. let accumulatedTime = 0;
  1232. let targetAudioIndex = -1;
  1233. let targetAudioTime = 0;
  1234. // 找到目標時間對應的音頻片段
  1235. for (let i = 0; i < this.currentPageAudios.length; i++) {
  1236. const audioDuration = this.currentPageAudios[i].duration || 0;
  1237. console.log(`音頻片段 ${i}: 時長=${audioDuration}, 累計時間=${accumulatedTime}, 範圍=[${accumulatedTime}, ${accumulatedTime + audioDuration}]`);
  1238. if (targetTime >= accumulatedTime && targetTime <= accumulatedTime + audioDuration) {
  1239. targetAudioIndex = i;
  1240. targetAudioTime = targetTime - accumulatedTime;
  1241. break;
  1242. }
  1243. accumulatedTime += audioDuration;
  1244. }
  1245. // 如果沒有找到合適的音頻片段,使用最後一個
  1246. if (targetAudioIndex === -1 && this.currentPageAudios.length > 0) {
  1247. targetAudioIndex = this.currentPageAudios.length - 1;
  1248. targetAudioTime = this.currentPageAudios[targetAudioIndex].duration || 0;
  1249. console.log('使用最後一個音頻片段作為目標');
  1250. }
  1251. console.log('目標音頻索引:', targetAudioIndex, '目標音頻時間:', targetAudioTime);
  1252. if (targetAudioIndex === -1) {
  1253. console.error('無法找到目標音頻片段');
  1254. return;
  1255. }
  1256. // 如果需要切換到不同的音頻片段
  1257. if (targetAudioIndex !== this.currentAudioIndex) {
  1258. console.log(`切換音頻片段: ${this.currentAudioIndex} -> ${targetAudioIndex}`);
  1259. this.currentAudioIndex = targetAudioIndex;
  1260. this.createAudioInstance();
  1261. // 等待音頻實例創建完成後再跳轉
  1262. this.waitForAudioReady(() => {
  1263. if (this.currentAudio) {
  1264. this.currentAudio.seek(targetAudioTime);
  1265. this.currentTime = targetTime;
  1266. console.log('切換音頻並跳轉到:', targetAudioTime, '秒');
  1267. // 如果拖動前正在播放,則恢復播放
  1268. if (shouldResume) {
  1269. this.currentAudio.play();
  1270. this.isPlaying = true;
  1271. console.log('恢復播放狀態');
  1272. }
  1273. }
  1274. });
  1275. } else {
  1276. // 在當前音頻片段內跳轉
  1277. if (this.currentAudio) {
  1278. this.currentAudio.seek(targetAudioTime);
  1279. this.currentTime = targetTime;
  1280. console.log('在當前音頻內跳轉到:', targetAudioTime, '秒');
  1281. // 如果拖動前正在播放,則恢復播放
  1282. if (shouldResume) {
  1283. this.currentAudio.play();
  1284. this.isPlaying = true;
  1285. console.log('恢復播放狀態');
  1286. }
  1287. }
  1288. }
  1289. },
  1290. // 等待音頻實例準備就緒
  1291. waitForAudioReady(callback, maxAttempts = 10, currentAttempt = 0) {
  1292. if (currentAttempt >= maxAttempts) {
  1293. console.error('音頻實例準備超時');
  1294. return;
  1295. }
  1296. if (this.currentAudio && this.currentAudio.src) {
  1297. // 音頻實例已準備好
  1298. setTimeout(callback, 50); // 稍微延遲確保完全準備好
  1299. } else {
  1300. // 繼續等待
  1301. setTimeout(() => {
  1302. this.waitForAudioReady(callback, maxAttempts, currentAttempt + 1);
  1303. }, 100);
  1304. }
  1305. },
  1306. // 初始檢測播放速度支持(不依賴音頻實例)
  1307. checkInitialPlaybackRateSupport() {
  1308. try {
  1309. const systemInfo = uni.getSystemInfoSync();
  1310. console.log('初始檢測 - 系統信息:', systemInfo);
  1311. // 檢查基礎庫版本 - playbackRate需要2.11.0及以上
  1312. const SDKVersion = systemInfo.SDKVersion || '0.0.0';
  1313. const versionArray = SDKVersion.split('.').map(v => parseInt(v));
  1314. const isVersionSupported = versionArray[0] > 2 ||
  1315. (versionArray[0] === 2 && versionArray[1] > 11) ||
  1316. (versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
  1317. if (!isVersionSupported) {
  1318. this.playbackRateSupported = false;
  1319. console.log(`初始檢測 - 基礎庫版本過低 (${SDKVersion}),需要2.11.0及以上才支持播放速度控制`);
  1320. return;
  1321. }
  1322. // Android 6以下版本不支持
  1323. if (systemInfo.platform === 'android') {
  1324. const androidVersion = systemInfo.system.match(/Android (\d+)/);
  1325. if (androidVersion && parseInt(androidVersion[1]) < 6) {
  1326. this.playbackRateSupported = false;
  1327. console.log('初始檢測 - Android版本過低,需要Android 6及以上才支持播放速度控制');
  1328. return;
  1329. }
  1330. }
  1331. // 檢查微信原生API是否可用
  1332. if (typeof wx === 'undefined' || !wx.createInnerAudioContext) {
  1333. console.log('初始檢測 - 微信原生API不可用,可能影響playbackRate支持');
  1334. } else {
  1335. console.log('初始檢測 - 微信原生API可用');
  1336. }
  1337. // 如果通過基本檢測,暫時設為支持,等音頻實例創建後再詳細檢測
  1338. this.playbackRateSupported = true;
  1339. console.log('初始檢測 - 基本條件滿足,等待音頻實例檢測');
  1340. } catch (error) {
  1341. console.error('初始檢測播放速度支持時出錯:', error);
  1342. this.playbackRateSupported = false;
  1343. }
  1344. },
  1345. // 檢查播放速度控制支持
  1346. checkPlaybackRateSupport(audio) {
  1347. try {
  1348. // 檢查基礎庫版本和平台支持
  1349. const systemInfo = uni.getSystemInfoSync();
  1350. console.log('系統信息:', systemInfo);
  1351. console.log('平台:', systemInfo.platform);
  1352. console.log('基礎庫版本:', systemInfo.SDKVersion);
  1353. console.log('系統版本:', systemInfo.system);
  1354. // 根據uni-app文檔,微信小程序需要基礎庫2.11.0+才支持playbackRate
  1355. const SDKVersion = systemInfo.SDKVersion || '0.0.0';
  1356. const versionArray = SDKVersion.split('.').map(v => parseInt(v));
  1357. const isVersionSupported = versionArray[0] > 2 ||
  1358. (versionArray[0] === 2 && versionArray[1] > 11) ||
  1359. (versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
  1360. console.log('基礎庫版本檢查:', {
  1361. version: SDKVersion,
  1362. parsed: versionArray,
  1363. supported: isVersionSupported
  1364. });
  1365. if (!isVersionSupported) {
  1366. this.playbackRateSupported = false;
  1367. console.log(`❌ 基礎庫版本不支持 (${SDKVersion}),微信小程序需要2.11.0+才支持playbackRate`);
  1368. return;
  1369. }
  1370. // Android平台需要6.0+版本支持
  1371. if (systemInfo.platform === 'android') {
  1372. const androidVersion = systemInfo.system.match(/Android (\d+)/);
  1373. console.log('Android版本檢查:', androidVersion);
  1374. if (androidVersion && parseInt(androidVersion[1]) < 6) {
  1375. this.playbackRateSupported = false;
  1376. console.log(`❌ Android版本不支持 (${androidVersion[1]}),需要Android 6+才支持playbackRate`);
  1377. return;
  1378. }
  1379. }
  1380. // 檢查音頻實例是否支持playbackRate
  1381. console.log('🔍 音頻實例檢查:');
  1382. console.log('- playbackRate初始值:', audio.playbackRate);
  1383. console.log('- playbackRate類型:', typeof audio.playbackRate);
  1384. // 嘗試設置並檢測是否真正支持
  1385. const testRate = 1.25;
  1386. const originalRate = audio.playbackRate || 1.0;
  1387. try {
  1388. audio.playbackRate = testRate;
  1389. console.log('- 設置測試速度:', testRate);
  1390. console.log('- 設置後的值:', audio.playbackRate);
  1391. // 檢查設置是否生效
  1392. if (Math.abs(audio.playbackRate - testRate) < 0.01) {
  1393. this.playbackRateSupported = true;
  1394. console.log('✅ playbackRate功能正常');
  1395. } else {
  1396. this.playbackRateSupported = false;
  1397. console.log('❌ playbackRate設置無效,可能不被支持');
  1398. }
  1399. } catch (error) {
  1400. this.playbackRateSupported = false;
  1401. console.log('❌ playbackRate設置出錯:', error);
  1402. }
  1403. } catch (error) {
  1404. console.error('檢查播放速度支持時出錯:', error);
  1405. this.playbackRateSupported = false;
  1406. }
  1407. },
  1408. formatTime(seconds) {
  1409. const mins = Math.floor(seconds / 60);
  1410. const secs = Math.floor(seconds % 60);
  1411. return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  1412. },
  1413. // 清理音频缓存
  1414. clearAudioCache() {
  1415. this.audioCache = {};
  1416. console.log('音频缓存已清理');
  1417. },
  1418. // 限制缓存大小,保留最近访问的页面
  1419. limitCacheSize(maxSize = 10) {
  1420. const cacheKeys = Object.keys(this.audioCache);
  1421. if (cacheKeys.length > maxSize) {
  1422. // 删除最旧的缓存项
  1423. const keysToDelete = cacheKeys.slice(0, cacheKeys.length - maxSize);
  1424. keysToDelete.forEach(key => {
  1425. delete this.audioCache[key];
  1426. });
  1427. console.log('缓存大小已限制,删除了', keysToDelete.length, '个缓存项');
  1428. }
  1429. },
  1430. // 自動加載第一頁音頻並播放
  1431. async autoLoadAndPlayFirstPage() {
  1432. try {
  1433. console.log('開始自動加載第一頁音頻');
  1434. // 確保當前是第一頁且需要加載音頻
  1435. if (this.currentPage === 1 && this.shouldLoadAudio) {
  1436. console.log('當前是第一頁且需要音頻,開始加載音頻');
  1437. // 加載音頻
  1438. await this.getCurrentPageAudio();
  1439. // 檢查是否成功加載音頻
  1440. if (this.currentPageAudios && this.currentPageAudios.length > 0) {
  1441. console.log('音頻加載成功,getCurrentPageAudio已經自動播放第一個音頻');
  1442. // getCurrentPageAudio方法已經處理了第一個音頻的播放,這裡不需要再次調用playAudio
  1443. } else {
  1444. console.log('第一頁沒有音頻數據');
  1445. }
  1446. } else {
  1447. console.log('當前頁面不是第一頁文字頁面,跳過自動播放');
  1448. }
  1449. } catch (error) {
  1450. console.error('自動加載和播放音頻失敗:', error);
  1451. }
  1452. },
  1453. // 清理音频资源
  1454. destroyAudio() {
  1455. if (this.currentAudio) {
  1456. this.currentAudio.destroy();
  1457. this.currentAudio = null;
  1458. }
  1459. this.isPlaying = false;
  1460. this.clearAudioCache();
  1461. },
  1462. // 课程切换时的完整数据清理(保留音色设置)
  1463. resetForCourseChange() {
  1464. console.log('课程切换:开始清理所有数据,保留音色设置');
  1465. // 1. 停止并销毁当前音频
  1466. if (this.isPlaying && this.currentAudio) {
  1467. this.pauseAudio();
  1468. }
  1469. if (this.currentAudio) {
  1470. this.currentAudio.destroy();
  1471. this.currentAudio = null;
  1472. }
  1473. // 2. 清空所有音频相关数据
  1474. this.currentPageAudios = [];
  1475. this.currentAudioIndex = 0;
  1476. this.currentTime = 0;
  1477. this.totalTime = 0;
  1478. this.sliderValue = 0;
  1479. this.isDragging = false;
  1480. this.isPlaying = false;
  1481. this.hasAudioData = false;
  1482. this.isAudioLoading = false;
  1483. this.audioLoadFailed = false;
  1484. this.currentHighlightIndex = -1;
  1485. // 3. 清空音频缓存(因为课程变了,所有缓存都无效)
  1486. this.clearAudioCache();
  1487. // 4. 重置预加载状态
  1488. this.isPreloading = false;
  1489. this.preloadProgress = 0;
  1490. this.preloadedPages = new Set();
  1491. // 5. 重置播放控制状态
  1492. this.isLoop = false;
  1493. this.playSpeed = 1.0;
  1494. this.playbackRateSupported = true;
  1495. // 6. 重置音色切换状态
  1496. this.isVoiceChanging = false;
  1497. // 7. 设置课程切换状态
  1498. this.isJustSwitchedCourse = true;
  1499. // 注意:不清空 voiceId,保留用户的音色选择
  1500. console.log('课程切换:数据清理完成,音色保持为:', this.voiceId);
  1501. // 7. 通知父组件状态变化
  1502. this.$emit('audio-state-change', {
  1503. hasAudioData: false,
  1504. isLoading: false,
  1505. audioLoadFailed: false,
  1506. currentHighlightIndex: -1
  1507. });
  1508. },
  1509. // 自动加载并播放音频(课程切换后调用)
  1510. async autoLoadAndPlayAudio() {
  1511. console.log('开始自动加载音频');
  1512. // 检查是否需要加载音频
  1513. if (!this.shouldLoadAudio) {
  1514. console.log('当前页面不需要加载音频,跳过音频加载');
  1515. return;
  1516. }
  1517. // 检查必要条件
  1518. if (!this.courseId || !this.currentPage) {
  1519. console.log('缺少必要参数,跳过音频加载');
  1520. return;
  1521. }
  1522. try {
  1523. // 设置加载状态
  1524. this.isAudioLoading = true;
  1525. // 开始加载音频
  1526. await this.getCurrentPageAudio();
  1527. console.log('音频自动加载完成,hasAudioData:', this.hasAudioData);
  1528. } catch (error) {
  1529. console.error('自动加载音频失败:', error);
  1530. this.isAudioLoading = false;
  1531. }
  1532. },
  1533. // 暂停音频(页面隐藏时调用)
  1534. pauseOnHide() {
  1535. this.pauseAudio();
  1536. },
  1537. // 处理音色切换(由父组件调用)
  1538. async handleVoiceChange(newVoiceId, options = {}) {
  1539. console.log('🎵 AudioControls: 开始处理音色切换', this.voiceId, '->', newVoiceId);
  1540. // 检查是否正在加载音频,如果是则阻止音色切换
  1541. if (this.isAudioLoading) {
  1542. console.log('🎵 音频正在加载中,阻止音色切换');
  1543. throw new Error('音频加载中,请稍后再试');
  1544. }
  1545. const { preloadAllPages = true } = options; // 默认预加载所有页面
  1546. try {
  1547. // 1. 停止当前播放的音频
  1548. if (this.isPlaying) {
  1549. this.pauseAudio();
  1550. }
  1551. // 2. 销毁当前音频实例
  1552. if (this.currentAudio) {
  1553. this.currentAudio.destroy();
  1554. this.currentAudio = null;
  1555. }
  1556. // 3. 清理所有音频缓存(因为音色变了,所有缓存都无效)
  1557. this.clearAudioCache();
  1558. console.log('🎵 AudioControls: 已清理所有音频缓存');
  1559. // 4. 重置音频状态
  1560. this.currentPageAudios = [];
  1561. this.currentAudioIndex = 0;
  1562. this.isPlaying = false;
  1563. this.currentTime = 0;
  1564. this.totalTime = 0;
  1565. this.hasAudioData = false;
  1566. this.audioLoadFailed = false;
  1567. this.currentHighlightIndex = -1;
  1568. // 5. 设置音色切换加载状态
  1569. this.isVoiceChanging = true;
  1570. this.isAudioLoading = true;
  1571. // 6. 更新本地音色ID(不直接修改prop)
  1572. this.localVoiceId = newVoiceId;
  1573. // 7. 通知父组件开始加载状态
  1574. this.$emit('audio-state-change', {
  1575. hasAudioData: false,
  1576. isLoading: true,
  1577. currentHighlightIndex: -1
  1578. });
  1579. // 8. 如果当前页面需要加载音频,优先获取当前页面音频
  1580. if (this.shouldLoadAudio && this.courseId && this.currentPage) {
  1581. console.log('🎵 AudioControls: 优先获取当前页面音频,使用新音色:', newVoiceId);
  1582. await this.getCurrentPageAudio();
  1583. console.log('🎵 AudioControls: 当前页面音频获取完成');
  1584. } else {
  1585. // 如果不需要加载音频,直接清除加载状态
  1586. this.isAudioLoading = false;
  1587. console.log('🎵 AudioControls: 不需要音频的页面,直接清除加载状态');
  1588. }
  1589. // 9. 清除音色切换加载状态
  1590. this.isVoiceChanging = false;
  1591. // 10. 如果需要预加载其他页面,启动预加载
  1592. if (preloadAllPages) {
  1593. console.log('🎵 AudioControls: 开始预加载其他页面音频,使用新音色:', newVoiceId);
  1594. // 延迟启动预加载,确保当前页面音频加载完成
  1595. setTimeout(() => {
  1596. this.preloadAllPagesAudio();
  1597. }, 1000);
  1598. }
  1599. // 11. 通知父组件最终状态
  1600. this.$emit('audio-state-change', {
  1601. hasAudioData: this.hasAudioData,
  1602. isLoading: this.isAudioLoading,
  1603. currentHighlightIndex: this.currentHighlightIndex
  1604. });
  1605. // 12. 通知父组件音色切换完成
  1606. this.$emit('voice-change-complete', {
  1607. voiceId: newVoiceId,
  1608. hasAudioData: this.hasAudioData,
  1609. preloadAllPages: preloadAllPages
  1610. });
  1611. console.log('🎵 AudioControls: 音色切换处理完成');
  1612. } catch (error) {
  1613. console.error('🎵 AudioControls: 音色切换处理失败:', error);
  1614. // 清除加载状态
  1615. this.isVoiceChanging = false;
  1616. this.isAudioLoading = false;
  1617. // 通知父组件状态变化
  1618. this.$emit('audio-state-change', {
  1619. hasAudioData: false,
  1620. isLoading: false,
  1621. currentHighlightIndex: -1
  1622. });
  1623. this.$emit('voice-change-error', error);
  1624. }
  1625. },
  1626. // 预加载所有页面音频(音色切换时使用)
  1627. async preloadAllPagesAudio() {
  1628. if (this.isPreloading) {
  1629. console.log('已在预加载中,跳过');
  1630. return;
  1631. }
  1632. try {
  1633. console.log('开始预加载所有页面音频');
  1634. this.isPreloading = true;
  1635. this.preloadProgress = 0;
  1636. // 获取所有文本页面
  1637. const allTextPages = [];
  1638. for (let i = 0; i < this.bookPages.length; i++) {
  1639. const pageData = this.bookPages[i];
  1640. const hasTextContent = pageData && pageData.some(item => item.type === 'text');
  1641. if (hasTextContent && i !== this.currentPage - 1) { // 排除当前页面,因为已经加载过了
  1642. allTextPages.push({
  1643. pageIndex: i + 1,
  1644. pageData: pageData
  1645. });
  1646. }
  1647. }
  1648. if (allTextPages.length === 0) {
  1649. console.log('没有需要预加载的页面');
  1650. this.isPreloading = false;
  1651. return;
  1652. }
  1653. console.log(`需要预加载 ${allTextPages.length} 个页面的音频`);
  1654. // 逐页预加载音频
  1655. for (let i = 0; i < allTextPages.length; i++) {
  1656. const pageInfo = allTextPages[i];
  1657. try {
  1658. console.log(`预加载第 ${pageInfo.pageIndex} 页音频 (${i + 1}/${allTextPages.length})`);
  1659. await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);
  1660. // 更新进度
  1661. this.preloadProgress = Math.round(((i + 1) / allTextPages.length) * 100);
  1662. console.log(`预加载进度: ${this.preloadProgress}%`);
  1663. // 添加小延迟,避免请求过于频繁
  1664. if (i < allTextPages.length - 1) {
  1665. await new Promise(resolve => setTimeout(resolve, 200));
  1666. }
  1667. } catch (error) {
  1668. console.error(`预加载第 ${pageInfo.pageIndex} 页音频失败:`, error);
  1669. // 继续预加载其他页面,不因单页失败而中断
  1670. }
  1671. }
  1672. console.log('所有页面音频预加载完成');
  1673. } catch (error) {
  1674. console.error('预加载所有页面音频失败:', error);
  1675. } finally {
  1676. this.isPreloading = false;
  1677. this.preloadProgress = 100;
  1678. console.log('音色切换后的音频预加载任务结束');
  1679. }
  1680. },
  1681. // 开始预加载音频(由父组件调用)
  1682. async startPreloadAudio() {
  1683. if (this.isPreloading) {
  1684. console.log('已在预加载中,跳过');
  1685. return;
  1686. }
  1687. try {
  1688. console.log('开始预加载音频数据');
  1689. this.isPreloading = true;
  1690. this.preloadProgress = 0;
  1691. // 获取需要预加载的页面列表(当前页面后的几页)
  1692. const preloadPages = this.getPreloadPageList();
  1693. if (preloadPages.length === 0) {
  1694. console.log('没有需要预加载的页面');
  1695. this.isPreloading = false;
  1696. return;
  1697. }
  1698. console.log('需要预加载的页面:', preloadPages);
  1699. // 逐个预加载页面音频
  1700. for (let i = 0; i < preloadPages.length; i++) {
  1701. const pageInfo = preloadPages[i];
  1702. try {
  1703. console.log(`开始预加载第${pageInfo.pageIndex + 1}页音频`);
  1704. await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);
  1705. // 更新预加载进度
  1706. this.preloadProgress = Math.round(((i + 1) / preloadPages.length) * 100);
  1707. console.log(`预加载进度: ${this.preloadProgress}%`);
  1708. // 延迟一下,避免请求过于频繁
  1709. await new Promise(resolve => setTimeout(resolve, 600));
  1710. } catch (error) {
  1711. console.error(`预加载第${pageInfo.pageIndex + 1}页音频失败:`, error);
  1712. // 继续预加载其他页面
  1713. }
  1714. }
  1715. console.log('音频预加载完成');
  1716. } catch (error) {
  1717. console.error('预加载音频失败:', error);
  1718. } finally {
  1719. this.isPreloading = false;
  1720. this.preloadProgress = 100;
  1721. }
  1722. },
  1723. // 获取需要预加载的页面列表
  1724. getPreloadPageList() {
  1725. const preloadPages = [];
  1726. const maxPreloadPages = 3; // 优化:最多预加载3页,减少服务器压力
  1727. // 从当前页面的下一页开始预加载
  1728. for (let i = this.currentPage; i < Math.min(this.currentPage + maxPreloadPages, this.bookPages.length); i++) {
  1729. const pageData = this.bookPages[i];
  1730. // 检查页面是否需要会员且用户非会员,如果是则跳过
  1731. const pageRequiresMember = this.pagePay[i] === 'Y';
  1732. if (pageRequiresMember && !this.isMember) {
  1733. console.log(`${i + 1}页需要会员,跳过预加载`);
  1734. continue;
  1735. }
  1736. // 检查页面是否有文本内容且未缓存
  1737. if (pageData && pageData.length > 0) {
  1738. const hasTextContent = pageData.some(item => item.type === 'text' && item.content);
  1739. const cacheKey = `${this.courseId}_${i + 1}_${this.voiceId}`;
  1740. const isAlreadyCached = this.audioCache[cacheKey];
  1741. if (hasTextContent && !isAlreadyCached) {
  1742. preloadPages.push({
  1743. pageIndex: i,
  1744. pageData: pageData
  1745. });
  1746. }
  1747. }
  1748. }
  1749. return preloadPages;
  1750. },
  1751. // 预加载单个页面的音频
  1752. async preloadPageAudio(pageIndex, pageData) {
  1753. const cacheKey = `${this.courseId}_${pageIndex + 1}_${this.voiceId}`;
  1754. // 检查是否已经缓存
  1755. if (this.audioCache[cacheKey]) {
  1756. console.log(`${pageIndex + 1}页音频已缓存,跳过`);
  1757. return;
  1758. }
  1759. // 收集页面中的文本内容
  1760. const textItems = pageData.filter(item => item.type === 'text' && item.content);
  1761. if (textItems.length === 0) {
  1762. console.log(`${pageIndex + 1}页没有文本内容,跳过`);
  1763. return;
  1764. }
  1765. console.log(`${pageIndex + 1}页有${textItems.length}个文本段落需要预加载`);
  1766. const audioArray = [];
  1767. let totalDuration = 0;
  1768. // 逐个处理文本项,支持长文本分割
  1769. for (let i = 0; i < textItems.length; i++) {
  1770. const item = textItems[i];
  1771. try {
  1772. console.log(`${pageIndex + 1}页处理第 ${i + 1}/${textItems.length} 个文本项,长度: ${item.content.length}`);
  1773. // 使用分批次请求音频
  1774. const batchResult = await this.requestAudioInBatches(item.content, this.localVoiceId);
  1775. // 检查请求是否被取消
  1776. if (batchResult === null) {
  1777. console.log(`${pageIndex + 1}页预加载被取消`);
  1778. return;
  1779. }
  1780. if (batchResult.audioSegments.length > 0) {
  1781. // 将所有音频段添加到音频数组
  1782. for (const segment of batchResult.audioSegments) {
  1783. if (!segment.error) {
  1784. audioArray.push({
  1785. url: segment.url,
  1786. text: segment.text,
  1787. duration: segment.duration,
  1788. startIndex: segment.startIndex,
  1789. endIndex: segment.endIndex,
  1790. segmentIndex: segment.segmentIndex,
  1791. originalTextIndex: i, // 标记属于哪个原始文本项
  1792. isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
  1793. });
  1794. totalDuration += segment.duration;
  1795. }
  1796. }
  1797. console.log(`${pageIndex + 1}页第${i + 1}个文本项预加载完成,获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
  1798. } else {
  1799. console.error(`${pageIndex + 1}页第${i + 1}个文本项音频预加载全部失败`);
  1800. }
  1801. } catch (error) {
  1802. console.error(`${pageIndex + 1}页第${i + 1}个文本项处理异常:`, error);
  1803. }
  1804. // 每个文本项处理之间间隔600ms,避免请求过于频繁
  1805. if (i < textItems.length - 1) {
  1806. await new Promise(resolve => setTimeout(resolve, 600));
  1807. }
  1808. }
  1809. // 保存到缓存
  1810. if (audioArray.length > 0) {
  1811. this.audioCache[cacheKey] = {
  1812. audios: audioArray,
  1813. totalDuration: totalDuration,
  1814. voiceId: this.localVoiceId, // 保存音色ID用于验证
  1815. timestamp: Date.now() // 保存时间戳
  1816. };
  1817. console.log(`${pageIndex + 1}页音频预加载完成,共${audioArray.length}个音频,总时长: ${totalDuration}`);
  1818. // 限制缓存大小
  1819. this.limitCacheSize(10);
  1820. }
  1821. },
  1822. // 检查指定页面是否有音频缓存
  1823. checkAudioCache(pageNumber) {
  1824. const cacheKey = `${this.courseId}_${pageNumber}_${this.localVoiceId}`;
  1825. const cachedData = this.audioCache[cacheKey];
  1826. if (cachedData && cachedData.audios && cachedData.audios.length > 0) {
  1827. console.log(`${pageNumber}页音频已缓存,共${cachedData.audios.length}个音频`);
  1828. return true;
  1829. }
  1830. console.log(`${pageNumber}页音频未缓存`);
  1831. return false;
  1832. },
  1833. // 自动播放已缓存的音频
  1834. async autoPlayCachedAudio() {
  1835. try {
  1836. // 如果正在音色切换中,不自动播放
  1837. if (this.isVoiceChanging) {
  1838. console.log('音色切换中,跳过自动播放');
  1839. return;
  1840. }
  1841. const cacheKey = `${this.courseId}_${this.currentPage}_${this.voiceId}`;
  1842. const cachedData = this.audioCache[cacheKey];
  1843. if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
  1844. console.log('当前页面没有缓存的音频');
  1845. return;
  1846. }
  1847. console.log(`开始自动播放第${this.currentPage}页的缓存音频`);
  1848. // 停止当前播放的音频
  1849. this.pauseAudio();
  1850. // 设置当前页面的音频数据
  1851. this.currentPageAudios = cachedData.audios;
  1852. this.totalDuration = cachedData.totalDuration;
  1853. // 重置播放状态
  1854. this.currentAudioIndex = 0;
  1855. this.currentTime = 0;
  1856. this.isPlaying = false;
  1857. // 延迟一下再开始播放,确保UI更新完成
  1858. setTimeout(() => {
  1859. this.playAudio();
  1860. }, 300);
  1861. } catch (error) {
  1862. console.error('自动播放缓存音频失败:', error);
  1863. }
  1864. }
  1865. },
  1866. mounted() {
  1867. // 初始檢測播放速度支持
  1868. this.checkInitialPlaybackRateSupport();
  1869. },
  1870. // 自动播放预加载的音频
  1871. async autoPlayPreloadedAudio() {
  1872. try {
  1873. // 如果正在音色切换中,不自动播放
  1874. if (this.isVoiceChanging) {
  1875. console.log('音色切换中,跳过预加载音频自动播放');
  1876. return;
  1877. }
  1878. // 检查是否有音频数据
  1879. if (!this.hasAudioData || this.currentPageAudios.length === 0) {
  1880. console.log('没有可播放的音频数据');
  1881. return;
  1882. }
  1883. // 检查第一个音频是否有效
  1884. const firstAudio = this.currentPageAudios[0];
  1885. if (!firstAudio || !firstAudio.url) {
  1886. console.log('第一个音频无效');
  1887. return;
  1888. }
  1889. console.log('开始自动播放预加载音频');
  1890. // 重置播放状态
  1891. this.currentAudioIndex = 0;
  1892. this.currentTime = 0;
  1893. this.sliderValue = 0;
  1894. this.currentHighlightIndex = 0;
  1895. // 创建音频实例
  1896. this.createAudioInstance();
  1897. // 稍等一下再播放,确保音频准备就绪
  1898. setTimeout(() => {
  1899. if (this.currentAudio && !this.isPlaying) {
  1900. this.currentAudio.play();
  1901. console.log('预加载音频自动播放成功');
  1902. }
  1903. }, 200);
  1904. } catch (error) {
  1905. console.error('自动播放预加载音频失败:', error);
  1906. }
  1907. },
  1908. beforeDestroy() {
  1909. // 清理页面切换防抖定时器
  1910. if (this.pageChangeTimer) {
  1911. clearTimeout(this.pageChangeTimer);
  1912. this.pageChangeTimer = null;
  1913. }
  1914. // 清理音频资源
  1915. this.destroyAudio();
  1916. console.log('AudioControls组件已销毁,清理所有资源');
  1917. }
  1918. }
  1919. </script>
  1920. <style lang="scss" scoped>
  1921. /* 音频控制栏样式 */
  1922. .audio-controls-wrapper {
  1923. position: relative;
  1924. z-index: 10;
  1925. }
  1926. .audio-controls {
  1927. background: #fff;
  1928. padding: 20rpx 40rpx;
  1929. border-bottom: 1rpx solid #eee;
  1930. transition: transform 0.3s ease;
  1931. position: relative;
  1932. z-index: 10;
  1933. &.audio-hidden {
  1934. transform: translateY(100%);
  1935. }
  1936. }
  1937. .audio-time {
  1938. display: flex;
  1939. align-items: center;
  1940. margin-bottom: 20rpx;
  1941. }
  1942. .time-text {
  1943. font-size: 28rpx;
  1944. color: #999;
  1945. min-width: 80rpx;
  1946. }
  1947. .progress-container {
  1948. flex: 1;
  1949. margin: 0 20rpx;
  1950. }
  1951. .audio-controls-row {
  1952. display: flex;
  1953. align-items: center;
  1954. justify-content: space-between;
  1955. }
  1956. .control-btn {
  1957. display: flex;
  1958. align-items: center;
  1959. padding: 10rpx;
  1960. gap: 8rpx;
  1961. }
  1962. .control-btn.disabled {
  1963. pointer-events: none;
  1964. opacity: 0.6;
  1965. }
  1966. .control-text {
  1967. font-size: 28rpx;
  1968. color: #4A4A4A;
  1969. }
  1970. .play-btn {
  1971. display: flex;
  1972. align-items: center;
  1973. justify-content: center;
  1974. padding: 10rpx;
  1975. }
  1976. /* 音频加载状态样式 */
  1977. .audio-loading-container {
  1978. background: #fff;
  1979. padding: 40rpx;
  1980. border-bottom: 1rpx solid #eee;
  1981. display: flex;
  1982. flex-direction: column;
  1983. align-items: center;
  1984. justify-content: center;
  1985. gap: 20rpx;
  1986. position: relative;
  1987. z-index: 10;
  1988. }
  1989. /* 加载指示器样式 */
  1990. .loading-indicator {
  1991. display: flex;
  1992. align-items: center;
  1993. justify-content: center;
  1994. gap: 10rpx;
  1995. padding: 10rpx 20rpx;
  1996. background: rgba(6, 218, 220, 0.1);
  1997. border-radius: 20rpx;
  1998. margin-bottom: 10rpx;
  1999. }
  2000. .loading-indicator-text {
  2001. font-size: 24rpx;
  2002. color: #06DADC;
  2003. }
  2004. .loading-text {
  2005. font-size: 28rpx;
  2006. color: #999;
  2007. }
  2008. /* 音色切换加载状态特殊样式 */
  2009. .voice-changing {
  2010. background: linear-gradient(135deg, #fff5f0 0%, #ffe7d9 100%);
  2011. border: 2rpx solid #ff6b35;
  2012. }
  2013. .voice-changing-text {
  2014. color: #ff6b35;
  2015. font-weight: 500;
  2016. }
  2017. /* 预加载状态特殊样式 */
  2018. .preloading {
  2019. background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  2020. border: 2rpx solid #06DADC;
  2021. }
  2022. .preloading .loading-text {
  2023. color: #06DADC;
  2024. font-weight: 500;
  2025. }
  2026. /* 课程切换状态特殊样式 */
  2027. .course-switching {
  2028. background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
  2029. border: 2rpx solid #52c41a;
  2030. }
  2031. .course-switching .loading-text {
  2032. color: #52c41a;
  2033. font-weight: 500;
  2034. }
  2035. /* 获取音频按钮样式 */
  2036. .audio-get-button-container {
  2037. background: rgba(255, 255, 255, 0.95);
  2038. backdrop-filter: blur(10px);
  2039. padding: 30rpx;
  2040. border-radius: 20rpx;
  2041. border: 2rpx solid #E5E5E5;
  2042. transition: all 0.3s ease;
  2043. position: relative;
  2044. z-index: 10;
  2045. }
  2046. .get-audio-btn {
  2047. display: flex;
  2048. align-items: center;
  2049. justify-content: center;
  2050. gap: 16rpx;
  2051. padding: 20rpx 40rpx;
  2052. background: linear-gradient(135deg, #06DADC 0%, #04B8BA 100%);
  2053. border-radius: 50rpx;
  2054. box-shadow: 0 8rpx 20rpx rgba(6, 218, 220, 0.3);
  2055. transition: all 0.3s ease;
  2056. }
  2057. .get-audio-btn:active {
  2058. transform: scale(0.95);
  2059. box-shadow: 0 4rpx 10rpx rgba(6, 218, 220, 0.2);
  2060. }
  2061. /* 音频预加载提示样式 */
  2062. .audio-preloaded-container {
  2063. display: flex;
  2064. justify-content: center;
  2065. align-items: center;
  2066. padding: 20rpx;
  2067. transition: all 0.3s ease;
  2068. position: relative;
  2069. z-index: 10;
  2070. }
  2071. .preloaded-tip {
  2072. display: flex;
  2073. align-items: center;
  2074. justify-content: center;
  2075. gap: 16rpx;
  2076. padding: 20rpx 40rpx;
  2077. background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  2078. border-radius: 50rpx;
  2079. box-shadow: 0 8rpx 20rpx rgba(82, 196, 26, 0.3);
  2080. transition: all 0.3s ease;
  2081. }
  2082. .preloaded-text {
  2083. color: #ffffff;
  2084. font-size: 28rpx;
  2085. font-weight: 500;
  2086. }
  2087. /* 音频获取失败样式 */
  2088. .audio-failed-container {
  2089. display: flex;
  2090. flex-direction: column;
  2091. align-items: center;
  2092. justify-content: center;
  2093. padding: 20rpx;
  2094. gap: 20rpx;
  2095. }
  2096. .failed-tip {
  2097. display: flex;
  2098. align-items: center;
  2099. justify-content: center;
  2100. gap: 16rpx;
  2101. padding: 20rpx 40rpx;
  2102. background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
  2103. border-radius: 50rpx;
  2104. box-shadow: 0 8rpx 20rpx rgba(255, 77, 79, 0.3);
  2105. }
  2106. .failed-text {
  2107. color: #ffffff;
  2108. font-size: 28rpx;
  2109. font-weight: 500;
  2110. }
  2111. .retry-btn {
  2112. display: flex;
  2113. align-items: center;
  2114. justify-content: center;
  2115. gap: 12rpx;
  2116. padding: 16rpx 32rpx;
  2117. background: linear-gradient(135deg, #06DADC 0%, #05B8BA 100%);
  2118. border-radius: 40rpx;
  2119. box-shadow: 0 6rpx 16rpx rgba(6, 218, 220, 0.3);
  2120. transition: all 0.3s ease;
  2121. }
  2122. .retry-btn:active {
  2123. transform: scale(0.95);
  2124. box-shadow: 0 4rpx 12rpx rgba(6, 218, 220, 0.4);
  2125. }
  2126. .retry-text {
  2127. color: #ffffff;
  2128. font-size: 26rpx;
  2129. font-weight: 500;
  2130. }
  2131. .get-audio-text {
  2132. font-size: 32rpx;
  2133. color: #FFFFFF;
  2134. font-weight: 500;
  2135. }
  2136. /* 会员限制容器样式 */
  2137. .member-restricted-container {
  2138. height: 0;
  2139. overflow: hidden;
  2140. opacity: 0;
  2141. pointer-events: none;
  2142. }
  2143. </style>