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

3433 lines
105 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 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="shouldLoadAudio && 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="shouldLoadAudio && 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, Number],
  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. isWordAudioPlaying: {
  104. type: Boolean,
  105. default: false
  106. }
  107. },
  108. data() {
  109. return {
  110. // 音频控制相关数据
  111. isPlaying: false,
  112. currentTime: 0,
  113. totalTime: 0,
  114. sliderValue: 0, // 滑動條的值
  115. isDragging: false, // 是否正在拖動滑動條
  116. isLoop: false,
  117. playSpeed: 1.0,
  118. speedOptions: [0.5, 0.8, 1.0, 1.25, 1.5, 2.0], // 根據uni-app文檔的官方支持值
  119. playbackRateSupported: true, // 播放速度控制是否支持
  120. // 音频数组管理
  121. currentPageAudios: [], // 当前页面的音频数组
  122. currentAudioIndex: 0, // 当前播放的音频索引
  123. audioContext: null, // 音频上下文
  124. currentAudio: null, // 当前音频实例
  125. // 音频缓存管理
  126. audioCache: {}, // 页面音频缓存 {pageIndex: {audios: [], totalDuration: 0}}
  127. // 预加载相关状态
  128. isPreloading: false, // 是否正在预加载
  129. preloadProgress: 0, // 预加载进度 (0-100)
  130. preloadQueue: [], // 预加载队列
  131. // 音频加载状态
  132. isAudioLoading: false, // 音频是否正在加载
  133. hasAudioData: false, // 当前页面是否已有音频数据
  134. isVoiceChanging: false, // 音色切换中的加载状态
  135. audioLoadFailed: false, // 音频获取失败状态
  136. // 文本高亮相关
  137. currentHighlightIndex: -1, // 当前高亮的文本索引
  138. // 课程切换相关状态
  139. isJustSwitchedCourse: false, // 是否刚刚切换了课程
  140. // 页面切换防抖相关
  141. pageChangeTimer: null, // 页面切换防抖定时器
  142. isPageChanging: false, // 是否正在切换页面
  143. // 请求取消相关
  144. currentRequestId: null, // 当前音频请求ID
  145. shouldCancelRequest: false, // 是否应该取消当前请求
  146. // 本地音色ID(避免直接修改prop)
  147. localVoiceId: '', // 本地音色ID,从prop初始化
  148. // 倍速检查相关
  149. lastSpeedCheckTime: -1, // 上次检查倍速的时间点
  150. }
  151. },
  152. computed: {
  153. // 计算音频播放进度百分比
  154. progressPercent() {
  155. return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;
  156. },
  157. // 检查当前页面是否有缓存的音频
  158. hasCurrentPageCache() {
  159. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  160. const cachedData = this.audioCache[cacheKey];
  161. // 更严格的缓存有效性检查
  162. if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
  163. return false;
  164. }
  165. // 检查缓存的音色ID是否与当前音色匹配
  166. if (cachedData.voiceId && cachedData.voiceId !== this.localVoiceId) {
  167. // console.warn('缓存音色不匹配:', cachedData.voiceId, '!=', this.localVoiceId);
  168. return false;
  169. }
  170. // 检查音频URL是否有效
  171. const firstAudio = cachedData.audios[0];
  172. if (!firstAudio || !firstAudio.url) {
  173. // console.warn('缓存音频数据无效');
  174. return false;
  175. }
  176. return true;
  177. },
  178. // 判断音频功能是否应该被禁用(会员限制页面且用户非会员)
  179. isAudioDisabled() {
  180. return this.currentPageRequiresMember && !this.isMember;
  181. },
  182. // 检查当前页面是否正在预加载中
  183. isCurrentPagePreloading() {
  184. // 如果全局预加载状态为true,需要检查当前页面是否在预加载队列中
  185. if (this.isPreloading) {
  186. // 检查当前页面是否有缓存(如果有缓存说明已经预加载完成)
  187. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  188. const hasCache = this.audioCache[cacheKey] && this.audioCache[cacheKey].audios && this.audioCache[cacheKey].audios.length > 0;
  189. // 如果没有缓存且正在预加载,说明当前页面可能正在预加载中
  190. if (!hasCache) {
  191. // console.log('当前页面可能正在预加载中,页面:', this.currentPage, '缓存状态:', hasCache);
  192. return true;
  193. }
  194. }
  195. return false;
  196. }
  197. },
  198. watch: {
  199. // 监听页面变化,重置音频状态
  200. currentPage: {
  201. handler(newPage, oldPage) {
  202. if (newPage !== oldPage) {
  203. // console.log('页面切换:', oldPage, '->', newPage);
  204. // 设置页面切换状态
  205. this.isPageChanging = true;
  206. // 立即重置音频状态,防止穿音
  207. this.resetAudioState();
  208. // 清除之前的防抖定时器
  209. if (this.pageChangeTimer) {
  210. clearTimeout(this.pageChangeTimer);
  211. }
  212. // 使用防抖机制,避免频繁切换时重复加载
  213. this.pageChangeTimer = setTimeout(() => {
  214. this.isPageChanging = false;
  215. // 检查新页面是否有预加载完成的音频缓存
  216. this.$nextTick(() => {
  217. this.checkAndLoadPreloadedAudio();
  218. });
  219. }, 300); // 300ms防抖延迟
  220. }
  221. },
  222. immediate: false
  223. },
  224. // 监听音色变化,更新本地音色ID
  225. voiceId: {
  226. handler(newVoiceId, oldVoiceId) {
  227. if (newVoiceId !== oldVoiceId) {
  228. // console.log('🎵 音色ID变化:', oldVoiceId, '->', newVoiceId);
  229. // 更新本地音色ID
  230. this.localVoiceId = newVoiceId;
  231. }
  232. },
  233. immediate: true // 立即执行,用于初始化
  234. },
  235. // 监听页面数据变化,当页面数据重新加载后自动获取音频
  236. bookPages: {
  237. handler(newBookPages, oldBookPages) {
  238. // 检查当前页面数据是否从无到有
  239. const currentPageData = newBookPages && newBookPages[this.currentPage - 1];
  240. const oldCurrentPageData = oldBookPages && oldBookPages[this.currentPage - 1];
  241. if (currentPageData && !oldCurrentPageData && this.shouldLoadAudio && this.courseId) {
  242. console.log(`🎵 bookPages监听: 当前页面数据已加载,自动获取音频,页面=${this.currentPage}`);
  243. this.$nextTick(() => {
  244. this.getCurrentPageAudio();
  245. });
  246. }
  247. },
  248. deep: true // 深度监听数组变化
  249. }
  250. },
  251. methods: {
  252. // 查找第一个非导语音频的索引
  253. findFirstNonLeadAudioIndex() {
  254. for (let i = 0; i < this.currentPageAudios.length; i++) {
  255. if (!this.currentPageAudios[i].isLead) {
  256. return i;
  257. }
  258. }
  259. return -1; // 如果所有音频都是导语,返回-1
  260. },
  261. // 创建HTML5 Audio实例并包装为uni-app兼容接口
  262. createHTML5Audio() {
  263. const audio = new Audio();
  264. // 包装为uni-app兼容的接口
  265. const wrappedAudio = {
  266. // 原生HTML5 Audio实例
  267. _nativeAudio: audio,
  268. // 基本属性
  269. get src() { return audio.src; },
  270. set src(value) { audio.src = value; },
  271. get duration() { return audio.duration || 0; },
  272. get currentTime() { return audio.currentTime || 0; },
  273. get paused() { return audio.paused; },
  274. // 支持倍速的关键属性
  275. get playbackRate() { return audio.playbackRate; },
  276. set playbackRate(value) {
  277. try {
  278. audio.playbackRate = value;
  279. // console.log(`🎵 HTML5 Audio倍速设置成功: ${value}x`);
  280. } catch (error) {
  281. console.error('❌ HTML5 Audio倍速设置失败:', error);
  282. }
  283. },
  284. // 基本方法
  285. play() {
  286. return audio.play().catch(error => {
  287. console.error('HTML5 Audio播放失败:', error);
  288. });
  289. },
  290. pause() {
  291. audio.pause();
  292. },
  293. stop() {
  294. audio.pause();
  295. audio.currentTime = 0;
  296. },
  297. seek(time) {
  298. audio.currentTime = time;
  299. },
  300. destroy() {
  301. audio.pause();
  302. audio.src = '';
  303. audio.load();
  304. },
  305. // 事件绑定方法
  306. onCanplay(callback) {
  307. audio.addEventListener('canplay', callback);
  308. },
  309. onPlay(callback) {
  310. audio.addEventListener('play', callback);
  311. },
  312. onPause(callback) {
  313. audio.addEventListener('pause', callback);
  314. },
  315. onEnded(callback) {
  316. audio.addEventListener('ended', callback);
  317. },
  318. onTimeUpdate(callback) {
  319. audio.addEventListener('timeupdate', callback);
  320. },
  321. onError(callback) {
  322. // 包装错误事件,过滤掉非关键错误
  323. const wrappedCallback = (error) => {
  324. // 只在有src且音频正在播放时才传递错误事件
  325. if (audio.src && audio.src.trim() !== '' && !audio.paused) {
  326. callback(error);
  327. } else {
  328. console.log('🔇 HTML5 Audio错误(已忽略):', {
  329. hasSrc: !!audio.src,
  330. paused: audio.paused,
  331. errorType: error.type || 'unknown'
  332. });
  333. }
  334. };
  335. audio.addEventListener('error', wrappedCallback);
  336. },
  337. // 移除事件监听
  338. offCanplay(callback) {
  339. audio.removeEventListener('canplay', callback);
  340. },
  341. offPlay(callback) {
  342. audio.removeEventListener('play', callback);
  343. },
  344. offPause(callback) {
  345. audio.removeEventListener('pause', callback);
  346. },
  347. offEnded(callback) {
  348. audio.removeEventListener('ended', callback);
  349. },
  350. offTimeUpdate(callback) {
  351. audio.removeEventListener('timeupdate', callback);
  352. },
  353. offError(callback) {
  354. audio.removeEventListener('error', callback);
  355. }
  356. };
  357. return wrappedAudio;
  358. },
  359. // 检查并自动加载预加载完成的音频
  360. checkAndLoadPreloadedAudio() {
  361. // 只在需要加载音频的页面检查
  362. if (!this.shouldLoadAudio) {
  363. // 非文本页面,确保音频状态为空
  364. this.currentPageAudios = [];
  365. this.totalTime = 0;
  366. this.hasAudioData = false;
  367. this.isAudioLoading = false;
  368. // 通知父组件音频状态变化
  369. this.$emit('audio-state-change', {
  370. hasAudioData: false,
  371. isLoading: false,
  372. currentHighlightIndex: -1
  373. });
  374. return;
  375. }
  376. // 检查当前页面是否有缓存的音频数据
  377. const pageKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  378. const cachedAudio = this.audioCache[pageKey];
  379. if (cachedAudio && cachedAudio.audios && cachedAudio.audios.length > 0) {
  380. // 有缓存:直接显示控制栏
  381. this.currentPageAudios = cachedAudio.audios;
  382. this.totalTime = cachedAudio.totalDuration || 0;
  383. this.hasAudioData = true;
  384. this.isAudioLoading = false;
  385. // 设置初始音频索引为第一个非导语音频
  386. const firstNonLeadIndex = this.findFirstNonLeadAudioIndex();
  387. this.currentAudioIndex = firstNonLeadIndex >= 0 ? firstNonLeadIndex : 0;
  388. this.currentTime = 0;
  389. this.currentHighlightIndex = -1;
  390. console.log(`🎵 checkAndLoadPreloadedAudio: 从缓存加载音频,页面=${this.currentPage}, 音频数量=${this.currentPageAudios.length}`);
  391. // 通知父组件音频状态变化
  392. this.$emit('audio-state-change', {
  393. hasAudioData: true,
  394. isLoading: false,
  395. currentHighlightIndex: -1
  396. });
  397. } else {
  398. // 没有缓存:自动开始加载音频
  399. console.log(`🎵 checkAndLoadPreloadedAudio: 无缓存,开始加载音频,页面=${this.currentPage}`);
  400. this.getCurrentPageAudio();
  401. }
  402. },
  403. // 智能分割文本,按句号和逗号分割中英文文本
  404. splitTextIntelligently(text) {
  405. if (!text || typeof text !== 'string') {
  406. return [text];
  407. }
  408. // 判断是否为中文文本(包含中文字符)
  409. const isChinese = /[\u4e00-\u9fa5]/.test(text);
  410. const maxLength = isChinese ? 100 : 200;
  411. // 如果文本长度不超过限制,直接返回
  412. if (text.length <= maxLength) {
  413. return [{
  414. text: text,
  415. startIndex: 0,
  416. endIndex: text.length - 1
  417. }];
  418. }
  419. const segments = [];
  420. let currentText = text;
  421. let globalStartIndex = 0;
  422. while (currentText.length > 0) {
  423. if (currentText.length <= maxLength) {
  424. // 剩余文本不超过限制,直接添加
  425. segments.push({
  426. text: currentText,
  427. startIndex: globalStartIndex,
  428. endIndex: globalStartIndex + currentText.length - 1
  429. });
  430. break;
  431. }
  432. // 在限制长度内寻找最佳分割点
  433. let splitIndex = maxLength;
  434. let bestSplitIndex = -1;
  435. // 优先寻找句号
  436. for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {
  437. const char = currentText[i];
  438. if (char === '。' || char === '.') {
  439. bestSplitIndex = i + 1; // 包含句号
  440. break;
  441. }
  442. }
  443. // 如果没找到句号,寻找逗号
  444. if (bestSplitIndex === -1) {
  445. for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {
  446. const char = currentText[i];
  447. if (char === ',' || char === ',' || char === ';' || char === ';') {
  448. bestSplitIndex = i + 1; // 包含标点符号
  449. break;
  450. }
  451. }
  452. }
  453. // 如果还是没找到合适的分割点,使用默认长度
  454. if (bestSplitIndex === -1) {
  455. bestSplitIndex = maxLength;
  456. }
  457. // 提取当前段落
  458. const segment = currentText.substring(0, bestSplitIndex).trim();
  459. if (segment.length > 0) {
  460. segments.push({
  461. text: segment,
  462. startIndex: globalStartIndex,
  463. endIndex: globalStartIndex + segment.length - 1
  464. });
  465. }
  466. // 更新剩余文本和全局索引
  467. currentText = currentText.substring(bestSplitIndex).trim();
  468. globalStartIndex += bestSplitIndex;
  469. }
  470. return segments;
  471. },
  472. // 分批次请求音频
  473. async requestAudioInBatches(text, voiceType) {
  474. const segments = this.splitTextIntelligently(text);
  475. const audioSegments = [];
  476. let totalDuration = 0;
  477. const requestId = this.currentRequestId; // 保存当前请求ID
  478. for (let i = 0; i < segments.length; i++) {
  479. // 检查是否应该取消请求
  480. if (this.shouldCancelRequest || this.currentRequestId !== requestId) {
  481. return null; // 返回null表示请求被取消
  482. }
  483. const segment = segments[i];
  484. try {
  485. console.log(`请求第 ${i + 1}/${segments.length} 段音频:`, segment.text.substring(0, 50) + '...');
  486. const radioRes = await this.$api.music.textToVoice({
  487. text: segment.text,
  488. voiceType: voiceType,
  489. });
  490. if (radioRes.code === 200 && radioRes.result && radioRes.result.url) {
  491. const audioUrl = radioRes.result.url;
  492. const duration = radioRes.result.time || 0;
  493. audioSegments.push({
  494. url: audioUrl,
  495. text: segment.text,
  496. duration: duration,
  497. startIndex: segment.startIndex,
  498. endIndex: segment.endIndex,
  499. segmentIndex: i,
  500. isSegmented: segments.length > 1,
  501. originalText: text
  502. });
  503. totalDuration += duration;
  504. } else {
  505. console.error(`${i + 1} 段音频请求失败:`, radioRes);
  506. // 即使某段失败,也继续处理其他段
  507. audioSegments.push({
  508. url: null,
  509. text: segment.text,
  510. duration: 0,
  511. startIndex: segment.startIndex,
  512. endIndex: segment.endIndex,
  513. segmentIndex: i,
  514. error: true,
  515. isSegmented: segments.length > 1,
  516. originalText: text
  517. });
  518. }
  519. } catch (error) {
  520. console.error(`${i + 1} 段音频请求异常:`, error);
  521. audioSegments.push({
  522. url: null,
  523. text: segment.text,
  524. duration: 0,
  525. startIndex: segment.startIndex,
  526. endIndex: segment.endIndex,
  527. segmentIndex: i,
  528. error: true,
  529. isSegmented: segments.length > 1,
  530. originalText: text
  531. });
  532. }
  533. // 每个请求之间间隔200ms,避免请求过于频繁
  534. if (i < segments.length - 1) {
  535. await new Promise(resolve => setTimeout(resolve, 200));
  536. }
  537. }
  538. console.log(`分批次音频请求完成,成功 ${audioSegments.filter(s => !s.error).length}/${segments.length}`);
  539. return {
  540. audioSegments: audioSegments,
  541. totalDuration: totalDuration,
  542. originalText: text
  543. };
  544. },
  545. // 获取当前页面的音频内容
  546. async getCurrentPageAudio(autoPlay = false) {
  547. // 🎯 确保音色ID已加载完成后再获取音频
  548. if (!this.localVoiceId || this.localVoiceId === '' || this.localVoiceId === null || this.localVoiceId === undefined) {
  549. // 设置加载失败状态
  550. this.isAudioLoading = false;
  551. this.audioLoadFailed = true;
  552. this.hasAudioData = false;
  553. // 通知父组件音频状态变化
  554. this.$emit('audio-state-change', {
  555. hasAudioData: false,
  556. isLoading: false,
  557. currentHighlightIndex: -1
  558. });
  559. uni.showToast({
  560. title: '音色未加载,请稍后重试',
  561. icon: 'none',
  562. duration: 2000
  563. });
  564. return;
  565. }
  566. // 检查是否正在页面切换中,如果是则不加载音频
  567. if (this.isPageChanging) {
  568. return;
  569. }
  570. // 检查是否需要加载音频
  571. if (!this.shouldLoadAudio) {
  572. // 清空音频状态
  573. this.currentPageAudios = [];
  574. this.hasAudioData = false;
  575. this.isAudioLoading = false;
  576. this.audioLoadFailed = false;
  577. this.currentAudioIndex = 0;
  578. this.currentTime = 0;
  579. this.totalTime = 0;
  580. this.currentHighlightIndex = -1;
  581. // 通知父组件音频状态变化
  582. this.$emit('audio-state-change', {
  583. hasAudioData: false,
  584. isLoading: false,
  585. currentHighlightIndex: -1
  586. });
  587. return;
  588. }
  589. // 检查会员限制
  590. if (this.isAudioDisabled) {
  591. return;
  592. }
  593. // 检查是否已经在加载中,防止重复加载(音色切换时除外)
  594. if (this.isAudioLoading && !this.isVoiceChanging) {
  595. return;
  596. }
  597. // 检查缓存中是否已有当前页面的音频数据
  598. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  599. if (this.audioCache[cacheKey]) {
  600. // 从缓存加载音频数据
  601. this.currentPageAudios = this.audioCache[cacheKey].audios;
  602. this.totalTime = this.audioCache[cacheKey].totalDuration;
  603. this.currentAudioIndex = 0;
  604. this.isPlaying = false;
  605. this.currentTime = 0;
  606. this.hasAudioData = true;
  607. this.isAudioLoading = false;
  608. // 如果是课程切换后的自动加载,清除切换标识
  609. if (this.isJustSwitchedCourse) {
  610. this.isJustSwitchedCourse = false;
  611. }
  612. // 通知父组件音频状态变化
  613. this.$emit('audio-state-change', {
  614. hasAudioData: this.hasAudioData,
  615. isLoading: this.isAudioLoading,
  616. currentHighlightIndex: this.currentHighlightIndex
  617. });
  618. return;
  619. }
  620. // 开始加载状态
  621. this.isAudioLoading = true;
  622. this.hasAudioData = false;
  623. // 重置请求取消标识并生成新的请求ID
  624. this.shouldCancelRequest = false;
  625. this.currentRequestId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
  626. // 清空当前页面音频数组
  627. this.currentPageAudios = [];
  628. this.currentAudioIndex = 0;
  629. this.isPlaying = false;
  630. this.currentTime = 0;
  631. this.totalTime = 0;
  632. // 通知父组件开始加载
  633. this.$emit('audio-state-change', {
  634. hasAudioData: this.hasAudioData,
  635. isLoading: this.isAudioLoading,
  636. currentHighlightIndex: this.currentHighlightIndex
  637. });
  638. try {
  639. // 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
  640. const currentPageData = this.bookPages[this.currentPage - 1];
  641. console.log(`🎵 getCurrentPageAudio: 当前页面=${this.currentPage}, 音色ID=${this.localVoiceId}, 课程ID=${this.courseId}`);
  642. console.log(`🎵 getCurrentPageAudio: bookPages长度=${this.bookPages.length}, 当前页面数据:`, currentPageData);
  643. // 检查页面数据是否存在且不为空
  644. if (!currentPageData || currentPageData.length === 0) {
  645. console.log(`🎵 getCurrentPageAudio: 当前页面数据为空,可能还在加载中`);
  646. // 通知父组件页面数据需要加载
  647. this.$emit('page-data-needed', this.currentPage);
  648. // 设置加载失败状态
  649. this.isAudioLoading = false;
  650. this.audioLoadFailed = true;
  651. this.hasAudioData = false;
  652. // 通知父组件音频状态变化
  653. this.$emit('audio-state-change', {
  654. hasAudioData: false,
  655. isLoading: false,
  656. currentHighlightIndex: -1
  657. });
  658. uni.showToast({
  659. title: '页面数据加载中,请稍后重试',
  660. icon: 'none',
  661. duration: 2000
  662. });
  663. return;
  664. }
  665. if (currentPageData) {
  666. // 收集所有text类型的元素,但排除导语(isLead为true的元素)
  667. // 对于重点卡片页面,还需要检查language属性
  668. const textItems = currentPageData.filter(item => {
  669. if (item.type !== 'text' || item.isLead) {
  670. return false;
  671. }
  672. // 检查当前页面类型
  673. const currentPageType = this.bookPages && this.bookPages[this.currentPage - 1]
  674. ? (this.bookPages[this.currentPage - 1].some(pageItem => pageItem.type === 'image') ? '1' : '0')
  675. : '0';
  676. // 如果是重点卡片页面,需要有language属性
  677. if (currentPageType === '1') {
  678. return item.content && (item.language === 'en' || item.language === 'zh');
  679. }
  680. // 普通文本页面,只需要有content
  681. return item.content;
  682. });
  683. console.log(`🎵 getCurrentPageAudio: 找到${textItems.length}个文本项(已排除导语):`, textItems.map(item => item.content?.substring(0, 50) + '...'));
  684. if (textItems.length > 0) {
  685. let firstAudioPlayed = false; // 标记是否已播放第一个音频
  686. let loadedAudiosCount = 0; // 已加载的音频数量
  687. // 逐个处理文本项,支持长文本分割
  688. for (let index = 0; index < textItems.length; index++) {
  689. const item = textItems[index];
  690. try {
  691. // 使用分批次请求音频
  692. const batchResult = await this.requestAudioInBatches(item.content, this.localVoiceId);
  693. // 检查请求是否被取消
  694. if (batchResult === null) {
  695. return;
  696. }
  697. if (batchResult.audioSegments.length > 0) {
  698. // 同时保存到原始数据中以保持兼容性(使用第一段的URL)
  699. const firstValidSegment = batchResult.audioSegments.find(seg => !seg.error);
  700. if (firstValidSegment) {
  701. item.audioUrl = firstValidSegment.url;
  702. }
  703. // 将所有音频段添加到音频数组
  704. for (const segment of batchResult.audioSegments) {
  705. if (!segment.error) {
  706. const audioData = {
  707. url: segment.url,
  708. text: segment.text,
  709. duration: segment.duration,
  710. startIndex: segment.startIndex,
  711. endIndex: segment.endIndex,
  712. segmentIndex: segment.segmentIndex,
  713. originalTextIndex: index, // 标记属于哪个原始文本项
  714. isSegmented: batchResult.audioSegments.length > 1, // 标记是否为分段音频
  715. isLead: item.isLead || false // 标记是否为导语
  716. };
  717. this.currentPageAudios.push(audioData);
  718. loadedAudiosCount++;
  719. }
  720. }
  721. // 如果是第一个音频,立即开始播放
  722. if (!firstAudioPlayed && this.currentPageAudios.length > 0) {
  723. firstAudioPlayed = true;
  724. this.hasAudioData = true;
  725. // 设置初始音频索引为第一个非导语音频
  726. const firstNonLeadIndex = this.findFirstNonLeadAudioIndex();
  727. this.currentAudioIndex = firstNonLeadIndex >= 0 ? firstNonLeadIndex : 0;
  728. // 通知父组件有音频数据了,但仍在加载中
  729. this.$emit('audio-state-change', {
  730. hasAudioData: this.hasAudioData,
  731. isLoading: this.isAudioLoading, // 保持加载状态
  732. currentHighlightIndex: this.currentHighlightIndex
  733. });
  734. // 立即创建音频实例并开始播放
  735. this.createAudioInstance();
  736. // 等待音频实例准备好后开始播放(仅在非音色切换时或明确要求自动播放时)
  737. setTimeout(() => {
  738. if (this.currentAudio && !this.isPlaying && (!this.isVoiceChanging || autoPlay)) {
  739. if (autoPlay || !this.isVoiceChanging) {
  740. this.currentAudio.play();
  741. // isPlaying状态会在onPlay事件中自动设置
  742. this.updateHighlightIndex();
  743. }
  744. }
  745. }, 100);
  746. }
  747. console.log(`文本项 ${index + 1} 处理完成,获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
  748. } else {
  749. console.error(`文本项 ${index + 1} 音频请求全部失败`);
  750. }
  751. } catch (error) {
  752. console.error(`文本项 ${index + 1} 处理异常:`, error);
  753. }
  754. }
  755. // 如果有音频,重新计算精确的总时长
  756. if (this.currentPageAudios.length > 0) {
  757. await this.calculateTotalDuration();
  758. // 将音频数据保存到缓存中
  759. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  760. this.audioCache[cacheKey] = {
  761. audios: [...this.currentPageAudios], // 深拷贝音频数组
  762. totalDuration: this.totalTime,
  763. voiceId: this.localVoiceId, // 保存音色ID用于验证
  764. timestamp: Date.now() // 保存时间戳
  765. };
  766. // 限制缓存大小
  767. this.limitCacheSize(10);
  768. }
  769. }
  770. }
  771. // 结束加载状态
  772. this.isAudioLoading = false;
  773. this.isVoiceChanging = false; // 清除音色切换加载状态
  774. // 如果是课程切换后的自动加载,清除切换标识
  775. if (this.isJustSwitchedCourse) {
  776. this.isJustSwitchedCourse = false;
  777. }
  778. // 设置音频数据状态和失败状态
  779. this.hasAudioData = this.currentPageAudios.length > 0;
  780. this.audioLoadFailed = !this.hasAudioData && this.shouldLoadAudio; // 如果需要音频但没有音频数据,则认为获取失败
  781. // 通知父组件音频状态变化
  782. this.$emit('audio-state-change', {
  783. hasAudioData: this.hasAudioData,
  784. isLoading: this.isAudioLoading,
  785. audioLoadFailed: this.audioLoadFailed,
  786. currentHighlightIndex: this.currentHighlightIndex
  787. });
  788. } catch (error) {
  789. console.error('getCurrentPageAudio 方法执行异常:', error);
  790. // 确保在异常情况下重置加载状态
  791. this.isAudioLoading = false;
  792. this.isVoiceChanging = false;
  793. this.audioLoadFailed = true;
  794. this.hasAudioData = false;
  795. // 通知父组件音频加载失败
  796. this.$emit('audio-state-change', {
  797. hasAudioData: false,
  798. isLoading: false,
  799. audioLoadFailed: true,
  800. currentHighlightIndex: this.currentHighlightIndex
  801. });
  802. // 显示错误提示
  803. uni.showToast({
  804. title: '音频加载失败,请重试',
  805. icon: 'none',
  806. duration: 2000
  807. });
  808. }
  809. },
  810. // 重新获取音频
  811. retryGetAudio() {
  812. // 检查是否需要加载音频
  813. if (!this.shouldLoadAudio) {
  814. return;
  815. }
  816. // 重置失败状态
  817. this.audioLoadFailed = false;
  818. // 清除当前页面的音频缓存
  819. const pageKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  820. if (this.audioCache[pageKey]) {
  821. delete this.audioCache[pageKey];
  822. }
  823. // 重新获取音频
  824. this.getCurrentPageAudio();
  825. },
  826. // 重置音频状态
  827. resetAudioState() {
  828. // 取消当前正在进行的音频请求
  829. this.shouldCancelRequest = true;
  830. // 立即停止并销毁当前音频实例,防止穿音
  831. if (this.currentAudio) {
  832. if (this.isPlaying) {
  833. this.currentAudio.pause();
  834. }
  835. this.currentAudio.destroy();
  836. this.currentAudio = null;
  837. }
  838. // 重置播放状态
  839. this.currentAudioIndex = 0;
  840. this.isPlaying = false;
  841. this.currentTime = 0;
  842. this.totalTime = 0;
  843. this.sliderValue = 0;
  844. this.isAudioLoading = false;
  845. this.audioLoadFailed = false;
  846. this.currentHighlightIndex = -1;
  847. this.playSpeed = 1.0;
  848. // 页面切换时,始终清空当前音频数据,避免数据错乱
  849. // 音频数据的加载由checkAndLoadPreloadedAudio方法统一处理
  850. this.currentPageAudios = [];
  851. this.totalTime = 0;
  852. this.hasAudioData = false;
  853. // 通知父组件音频状态变化
  854. this.$emit('audio-state-change', {
  855. hasAudioData: false,
  856. isLoading: false,
  857. currentHighlightIndex: -1
  858. });
  859. },
  860. // 加载缓存的音频数据并显示播放控制栏
  861. loadCachedAudioData() {
  862. const cacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  863. const cachedData = this.audioCache[cacheKey];
  864. // 严格验证缓存数据
  865. if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
  866. console.warn('缓存数据不存在或为空:', cacheKey);
  867. uni.showToast({
  868. title: '缓存音频数据不存在',
  869. icon: 'none'
  870. });
  871. return;
  872. }
  873. // 检查音色ID是否匹配
  874. if (cachedData.voiceId && cachedData.voiceId !== this.localVoiceId) {
  875. console.warn('缓存音色不匹配:', cachedData.voiceId, '!=', this.localVoiceId);
  876. uni.showToast({
  877. title: '音色已切换,请重新获取音频',
  878. icon: 'none'
  879. });
  880. return;
  881. }
  882. // 检查音频URL是否有效
  883. const firstAudio = cachedData.audios[0];
  884. if (!firstAudio || !firstAudio.url) {
  885. console.warn('缓存音频URL无效');
  886. uni.showToast({
  887. title: '缓存音频数据损坏',
  888. icon: 'none'
  889. });
  890. return;
  891. }
  892. // 从缓存加载音频数据
  893. this.currentPageAudios = cachedData.audios;
  894. this.totalTime = cachedData.totalDuration || 0;
  895. this.currentAudioIndex = 0;
  896. this.isPlaying = false;
  897. this.currentTime = 0;
  898. this.hasAudioData = true;
  899. this.isAudioLoading = false;
  900. this.audioLoadFailed = false;
  901. this.currentHighlightIndex = -1;
  902. // 通知父组件音频状态变化
  903. this.$emit('audio-state-change', {
  904. hasAudioData: this.hasAudioData,
  905. isLoading: this.isAudioLoading,
  906. currentHighlightIndex: this.currentHighlightIndex
  907. });
  908. },
  909. // 手动获取音频
  910. async handleGetAudio() {
  911. // 检查会员限制
  912. if (this.isAudioDisabled) {
  913. return;
  914. }
  915. // 检查是否有音色ID
  916. if (!this.localVoiceId) {
  917. uni.showToast({
  918. title: '音色未加载,请稍后重试',
  919. icon: 'none'
  920. });
  921. return;
  922. }
  923. // 检查当前页面是否支持音频播放
  924. if (!this.shouldLoadAudio) {
  925. uni.showToast({
  926. title: '当前页面不支持音频播放',
  927. icon: 'none'
  928. });
  929. return;
  930. }
  931. // 检查是否正在加载
  932. if (this.isAudioLoading) {
  933. return;
  934. }
  935. // 调用获取音频方法
  936. await this.getCurrentPageAudio();
  937. },
  938. // 计算音频总时长
  939. async calculateTotalDuration() {
  940. let totalDuration = 0;
  941. for (let i = 0; i < this.currentPageAudios.length; i++) {
  942. const audio = this.currentPageAudios[i];
  943. // 使用API返回的准确时长信息
  944. if (audio.duration && audio.duration > 0) {
  945. totalDuration += audio.duration;
  946. } else {
  947. // 如果没有时长信息,使用文字长度估算(备用方案)
  948. const textLength = audio.text.length;
  949. // 假设较快语速每分钟约300个字符,即每秒约5个字符
  950. const estimatedDuration = Math.max(1, textLength / 5);
  951. audio.duration = estimatedDuration;
  952. totalDuration += estimatedDuration;
  953. console.log(`备用估算音频时长 ${i + 1}:`, estimatedDuration, '秒 (文字长度:', textLength, ')');
  954. }
  955. }
  956. this.totalTime = totalDuration;
  957. },
  958. // 获取音频时长
  959. getAudioDuration(audioUrl) {
  960. return new Promise((resolve, reject) => {
  961. const audio = uni.createInnerAudioContext();
  962. audio.src = audioUrl;
  963. let resolved = false;
  964. // 监听音频加载完成事件
  965. audio.onCanplay(() => {
  966. if (!resolved && audio.duration && audio.duration > 0) {
  967. resolved = true;
  968. resolve(audio.duration);
  969. audio.destroy();
  970. }
  971. });
  972. // 监听音频元数据加载完成事件
  973. audio.onLoadedmetadata = () => {
  974. if (!resolved && audio.duration && audio.duration > 0) {
  975. resolved = true;
  976. resolve(audio.duration);
  977. audio.destroy();
  978. }
  979. };
  980. // 监听音频时长更新事件
  981. audio.onDurationChange = () => {
  982. if (!resolved && audio.duration && audio.duration > 0) {
  983. resolved = true;
  984. resolve(audio.duration);
  985. audio.destroy();
  986. }
  987. };
  988. // 移除onPlay監聽器,避免意外播放
  989. audio.onError((error) => {
  990. console.error('音频加载失败:', error);
  991. if (!resolved) {
  992. resolved = true;
  993. reject(error);
  994. audio.destroy();
  995. }
  996. });
  997. // 設置較長的超時時間,但不播放音頻
  998. setTimeout(() => {
  999. if (!resolved) {
  1000. resolved = true;
  1001. reject(new Error('無法獲取音頻時長'));
  1002. audio.destroy();
  1003. }
  1004. }, 1000);
  1005. // 最終超時處理
  1006. setTimeout(() => {
  1007. if (!resolved) {
  1008. console.warn('獲取音頻時長超時,使用默認值');
  1009. resolved = true;
  1010. reject(new Error('获取音频时长超时'));
  1011. audio.destroy();
  1012. }
  1013. }, 5000);
  1014. });
  1015. },
  1016. // 音频控制方法
  1017. togglePlay() {
  1018. // 检查会员限制
  1019. if (this.isAudioDisabled) {
  1020. return;
  1021. }
  1022. if (this.currentPageAudios.length === 0) {
  1023. uni.showToast({
  1024. title: '当前页面没有音频内容',
  1025. icon: 'none'
  1026. });
  1027. return;
  1028. }
  1029. if (this.isPlaying) {
  1030. this.pauseAudio();
  1031. } else {
  1032. this.playAudio();
  1033. }
  1034. },
  1035. // 播放音频
  1036. playAudio() {
  1037. // 检查会员限制
  1038. if (this.isAudioDisabled) {
  1039. return;
  1040. }
  1041. // 检查音频数据有效性
  1042. if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
  1043. console.warn('🎵 playAudio: 没有音频数据');
  1044. return;
  1045. }
  1046. if (this.currentAudioIndex < 0 || this.currentAudioIndex >= this.currentPageAudios.length) {
  1047. console.error('🎵 playAudio: 音频索引无效', this.currentAudioIndex);
  1048. return;
  1049. }
  1050. const currentAudioData = this.currentPageAudios[this.currentAudioIndex];
  1051. if (!currentAudioData || !currentAudioData.url) {
  1052. console.error('🎵 playAudio: 音频数据无效', currentAudioData);
  1053. return;
  1054. }
  1055. // 检查音频数据是否属于当前页面
  1056. const audioCacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  1057. const currentPageCache = this.audioCache[audioCacheKey];
  1058. if (!currentPageCache || !currentPageCache.audios.includes(currentAudioData)) {
  1059. console.error('🎵 playAudio: 音频数据与当前页面不匹配,停止播放');
  1060. return;
  1061. }
  1062. // 🎯 全局音频管理:停止单词音频播放,确保只有一个音频播放
  1063. this.stopWordAudio();
  1064. // 如果没有当前音频实例或者需要切换音频
  1065. if (!this.currentAudio || this.currentAudio.src !== currentAudioData.url) {
  1066. this.createAudioInstance();
  1067. // 创建实例后稍等一下再播放,确保音频准备就绪
  1068. setTimeout(() => {
  1069. if (this.currentAudio) {
  1070. this.currentAudio.play();
  1071. // isPlaying状态会在onPlay事件中自动设置
  1072. this.updateHighlightIndex();
  1073. }
  1074. }, 50);
  1075. } else {
  1076. // 音频实例已存在,直接播放
  1077. this.currentAudio.play();
  1078. // isPlaying状态会在onPlay事件中自动设置
  1079. this.updateHighlightIndex();
  1080. // 确保倍速设置正确
  1081. setTimeout(() => {
  1082. this.applyPlaybackRate(this.currentAudio);
  1083. }, 100);
  1084. }
  1085. },
  1086. // 暂停音频
  1087. pauseAudio() {
  1088. if (this.currentAudio) {
  1089. this.currentAudio.pause();
  1090. }
  1091. this.isPlaying = false;
  1092. // 暂停时清除高亮
  1093. this.currentHighlightIndex = -1;
  1094. // 通知父组件高亮状态变化
  1095. this.emitHighlightChange(-1);
  1096. },
  1097. // 文本标准化函数 - 移除多余空格、标点符号等
  1098. normalizeText(text) {
  1099. if (!text || typeof text !== 'string') return '';
  1100. return text
  1101. .trim()
  1102. .replace(/\s+/g, ' ') // 将多个空格替换为单个空格
  1103. .replace(/[,。!?;:""''()【】《》]/g, '') // 移除中文标点
  1104. .replace(/[,.!?;:"'()\[\]<>]/g, '') // 移除英文标点
  1105. .toLowerCase(); // 转为小写(对英文有效)
  1106. },
  1107. // 备用方案:使用 TTS API 实时生成并播放音频
  1108. async playTextWithTTS(textContent) {
  1109. try {
  1110. // 停止当前播放的音频
  1111. if (this.currentAudio) {
  1112. this.currentAudio.pause();
  1113. this.currentAudio.destroy();
  1114. this.currentAudio = null;
  1115. }
  1116. // 显示加载提示
  1117. uni.showLoading({
  1118. title: '正在生成音频...'
  1119. });
  1120. // 调用 TTS API
  1121. const audioRes = await this.$api.music.textToVoice({
  1122. text: textContent,
  1123. voiceType: this.voiceId || 1 // 使用当前语音类型,默认为1
  1124. });
  1125. uni.hideLoading();
  1126. if (audioRes && audioRes.result && audioRes.result.url) {
  1127. const audioUrl = audioRes.result.url;
  1128. // 创建并播放音频
  1129. const audio = uni.createInnerAudioContext();
  1130. audio.src = audioUrl;
  1131. audio.onPlay(() => {
  1132. this.isPlaying = true;
  1133. });
  1134. audio.onEnded(() => {
  1135. this.isPlaying = false;
  1136. audio.destroy();
  1137. if (this.currentAudio === audio) {
  1138. this.currentAudio = null;
  1139. }
  1140. });
  1141. audio.onError((error) => {
  1142. console.error('🔊 TTS 音频播放失败:', error);
  1143. this.isPlaying = false;
  1144. audio.destroy();
  1145. if (this.currentAudio === audio) {
  1146. this.currentAudio = null;
  1147. }
  1148. uni.showToast({
  1149. title: '音频播放失败',
  1150. icon: 'none'
  1151. });
  1152. });
  1153. // 保存当前音频实例并播放
  1154. this.currentAudio = audio;
  1155. audio.play();
  1156. return true;
  1157. } else {
  1158. console.error('❌ TTS API 请求失败:', audioRes);
  1159. uni.showToast({
  1160. title: '音频生成失败',
  1161. icon: 'none'
  1162. });
  1163. return false;
  1164. }
  1165. } catch (error) {
  1166. uni.hideLoading();
  1167. console.error('❌ TTS 音频生成异常:', error);
  1168. uni.showToast({
  1169. title: '音频生成失败',
  1170. icon: 'none'
  1171. });
  1172. return false;
  1173. }
  1174. },
  1175. // 播放指定的音频段落(通过文本内容匹配)
  1176. playSpecificAudio(textContent) {
  1177. // 检查单词音频播放状态
  1178. if (this.isWordAudioPlaying) {
  1179. uni.showToast({
  1180. title: '请等待单词音频播放完成',
  1181. icon: 'none'
  1182. });
  1183. return false;
  1184. }
  1185. // 检查textContent是否有效
  1186. if (!textContent || typeof textContent !== 'string') {
  1187. console.error('❌ 无效的文本内容:', textContent);
  1188. uni.showToast({
  1189. title: '无效的文本内容',
  1190. icon: 'none'
  1191. });
  1192. return false;
  1193. }
  1194. // 检查音频数据是否已加载
  1195. if (this.currentPageAudios.length === 0) {
  1196. console.warn('⚠️ 当前页面音频数据为空,可能还在加载中');
  1197. uni.showToast({
  1198. title: '音频正在加载中,请稍后再试',
  1199. icon: 'none'
  1200. });
  1201. return false;
  1202. }
  1203. // 标准化目标文本
  1204. const normalizedTarget = this.normalizeText(textContent);
  1205. // 打印所有音频文本用于调试
  1206. this.currentPageAudios.forEach((audio, index) => {
  1207. console.log(` [${index}] 标准化文本: "${this.normalizeText(audio.text)}"`);
  1208. if (audio.originalText) {
  1209. }
  1210. });
  1211. let audioIndex = -1;
  1212. // 第一步:精确匹配(标准化后)
  1213. audioIndex = this.currentPageAudios.findIndex(audio => {
  1214. if (!audio.text) return false;
  1215. const normalizedAudio = this.normalizeText(audio.text);
  1216. return normalizedAudio === normalizedTarget;
  1217. });
  1218. if (audioIndex !== -1) {
  1219. } else {
  1220. // 第二步:包含匹配
  1221. audioIndex = this.currentPageAudios.findIndex(audio => {
  1222. if (!audio.text) return false;
  1223. const normalizedAudio = this.normalizeText(audio.text);
  1224. // 双向包含检查
  1225. return normalizedAudio.includes(normalizedTarget) || normalizedTarget.includes(normalizedAudio);
  1226. });
  1227. if (audioIndex !== -1) {
  1228. } else {
  1229. // 第三步:分段音频匹配
  1230. audioIndex = this.currentPageAudios.findIndex(audio => {
  1231. if (!audio.text) return false;
  1232. // 检查是否为分段音频,且原始文本匹配
  1233. if (audio.isSegmented && audio.originalText) {
  1234. const normalizedOriginal = this.normalizeText(audio.originalText);
  1235. return normalizedOriginal === normalizedTarget ||
  1236. normalizedOriginal.includes(normalizedTarget) ||
  1237. normalizedTarget.includes(normalizedOriginal);
  1238. }
  1239. return false;
  1240. });
  1241. if (audioIndex !== -1) {
  1242. } else {
  1243. // 第四步:句子分割匹配(针对长句子)
  1244. // 将目标句子按标点符号分割
  1245. const targetSentences = normalizedTarget.split(/[,。!?;:,!?;:]/).filter(s => s.trim().length > 0);
  1246. if (targetSentences.length > 1) {
  1247. // 尝试匹配分割后的句子片段
  1248. for (let i = 0; i < targetSentences.length; i++) {
  1249. const sentence = targetSentences[i].trim();
  1250. if (sentence.length < 3) continue; // 跳过太短的片段
  1251. audioIndex = this.currentPageAudios.findIndex(audio => {
  1252. if (!audio.text) return false;
  1253. const normalizedAudio = this.normalizeText(audio.text);
  1254. return normalizedAudio.includes(sentence) || sentence.includes(normalizedAudio);
  1255. });
  1256. if (audioIndex !== -1) {
  1257. break;
  1258. }
  1259. }
  1260. }
  1261. if (audioIndex === -1) {
  1262. // 第五步:关键词匹配(提取关键词进行匹配)
  1263. const keywords = normalizedTarget.split(/\s+/).filter(word => word.length > 2);
  1264. let bestKeywordMatch = -1;
  1265. let bestKeywordCount = 0;
  1266. this.currentPageAudios.forEach((audio, index) => {
  1267. if (!audio.text) return;
  1268. const normalizedAudio = this.normalizeText(audio.text);
  1269. // 计算匹配的关键词数量
  1270. const matchedKeywords = keywords.filter(keyword => normalizedAudio.includes(keyword));
  1271. const matchCount = matchedKeywords.length;
  1272. if (matchCount > bestKeywordCount && matchCount >= Math.min(2, keywords.length)) {
  1273. bestKeywordCount = matchCount;
  1274. bestKeywordMatch = index;
  1275. console.log(` [${index}] 关键词匹配: ${matchCount}/${keywords.length}, 匹配词: [${matchedKeywords.join(', ')}]`);
  1276. }
  1277. });
  1278. if (bestKeywordMatch !== -1) {
  1279. audioIndex = bestKeywordMatch;
  1280. } else {
  1281. // 第六步:相似度匹配(最后的尝试)
  1282. let bestMatch = -1;
  1283. let bestSimilarity = 0;
  1284. this.currentPageAudios.forEach((audio, index) => {
  1285. if (!audio.text) return;
  1286. const normalizedAudio = this.normalizeText(audio.text);
  1287. // 计算简单的相似度(共同字符数 / 较长文本长度)
  1288. const commonChars = [...normalizedTarget].filter(char => normalizedAudio.includes(char)).length;
  1289. const maxLength = Math.max(normalizedTarget.length, normalizedAudio.length);
  1290. const similarity = maxLength > 0 ? commonChars / maxLength : 0;
  1291. console.log(` [${index}] 相似度: ${similarity.toFixed(2)}, 文本: "${audio.text}"`);
  1292. if (similarity > bestSimilarity && similarity > 0.5) { // 降低相似度阈值到50%
  1293. bestSimilarity = similarity;
  1294. bestMatch = index;
  1295. }
  1296. });
  1297. if (bestMatch !== -1) {
  1298. audioIndex = bestMatch;
  1299. }
  1300. }
  1301. }
  1302. }
  1303. }
  1304. }
  1305. if (audioIndex !== -1) {
  1306. // 停止当前播放的音频
  1307. if (this.currentAudio) {
  1308. this.currentAudio.pause();
  1309. this.currentAudio.destroy();
  1310. this.currentAudio = null;
  1311. }
  1312. // 设置新的音频索引
  1313. this.currentAudioIndex = audioIndex;
  1314. // 重置播放状态
  1315. this.isPlaying = false;
  1316. this.currentTime = 0;
  1317. this.sliderValue = 0;
  1318. // 更新高亮索引
  1319. this.currentHighlightIndex = audioIndex;
  1320. this.emitHighlightChange(audioIndex);
  1321. // 创建新的音频实例并播放
  1322. this.createAudioInstance();
  1323. // 稍等一下再播放,确保音频准备就绪
  1324. setTimeout(() => {
  1325. if (this.currentAudio) {
  1326. this.currentAudio.play();
  1327. } else {
  1328. console.error('❌ 音频实例创建失败');
  1329. }
  1330. }, 100);
  1331. return true; // 成功找到并播放
  1332. } else {
  1333. console.error('❌ 未找到匹配的音频段落:', textContent);
  1334. // 最后的尝试:首字符匹配(针对划线重点等特殊情况)
  1335. if (normalizedTarget.length > 5) {
  1336. const firstChars = normalizedTarget.substring(0, Math.min(10, normalizedTarget.length));
  1337. audioIndex = this.currentPageAudios.findIndex(audio => {
  1338. if (!audio.text) return false;
  1339. const normalizedAudio = this.normalizeText(audio.text);
  1340. return normalizedAudio.startsWith(firstChars) || firstChars.startsWith(normalizedAudio.substring(0, Math.min(10, normalizedAudio.length)));
  1341. });
  1342. if (audioIndex !== -1) {
  1343. // 停止当前播放的音频
  1344. if (this.currentAudio) {
  1345. this.currentAudio.pause();
  1346. this.currentAudio.destroy();
  1347. this.currentAudio = null;
  1348. }
  1349. // 设置新的音频索引
  1350. this.currentAudioIndex = audioIndex;
  1351. // 重置播放状态
  1352. this.isPlaying = false;
  1353. this.currentTime = 0;
  1354. this.sliderValue = 0;
  1355. // 更新高亮索引
  1356. this.currentHighlightIndex = audioIndex;
  1357. this.emitHighlightChange(audioIndex);
  1358. // 创建新的音频实例并播放
  1359. this.createAudioInstance();
  1360. // 稍等一下再播放,确保音频准备就绪
  1361. setTimeout(() => {
  1362. if (this.currentAudio) {
  1363. this.currentAudio.play();
  1364. } else {
  1365. console.error('❌ 音频实例创建失败');
  1366. }
  1367. }, 100);
  1368. return true;
  1369. }
  1370. }
  1371. // 备用方案:使用 textToVoice API 实时生成音频
  1372. return this.playTextWithTTS(textContent);
  1373. }
  1374. },
  1375. // 创建音频实例
  1376. createAudioInstance() {
  1377. // 检查音频数据有效性
  1378. if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
  1379. console.error('🎵 createAudioInstance: 没有音频数据');
  1380. return;
  1381. }
  1382. if (this.currentAudioIndex < 0 || this.currentAudioIndex >= this.currentPageAudios.length) {
  1383. console.error('🎵 createAudioInstance: 音频索引无效', this.currentAudioIndex);
  1384. return;
  1385. }
  1386. const currentAudioData = this.currentPageAudios[this.currentAudioIndex];
  1387. if (!currentAudioData || !currentAudioData.url) {
  1388. console.error('🎵 createAudioInstance: 音频数据无效', currentAudioData);
  1389. return;
  1390. }
  1391. // 检查音频数据是否属于当前页面
  1392. const audioCacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  1393. const currentPageCache = this.audioCache[audioCacheKey];
  1394. if (!currentPageCache || !currentPageCache.audios.includes(currentAudioData)) {
  1395. console.error('🎵 createAudioInstance: 音频数据与当前页面不匹配');
  1396. return;
  1397. }
  1398. // 销毁之前的音频实例
  1399. if (this.currentAudio) {
  1400. this.currentAudio.pause();
  1401. this.currentAudio.destroy();
  1402. this.currentAudio = null;
  1403. }
  1404. // 重置播放状态
  1405. this.isPlaying = false;
  1406. // 優先使用微信原生API以支持playbackRate
  1407. let audio;
  1408. // if (typeof wx !== 'undefined' && wx.createInnerAudioContext) {
  1409. // console.log('使用微信原生音頻API');
  1410. // audio = wx.createInnerAudioContext();
  1411. // } else {
  1412. // // 在H5环境下,尝试使用原生HTML5 Audio API来支持倍速
  1413. // if (typeof window !== 'undefined' && window.Audio) {
  1414. // console.log('使用原生HTML5 Audio API以支持倍速');
  1415. audio = this.createHTML5Audio();
  1416. // } else {
  1417. // console.log('使用uni-app音頻API');
  1418. // audio = uni.createInnerAudioContext();
  1419. // }
  1420. // }
  1421. const audioUrl = currentAudioData.url;
  1422. audio.src = audioUrl;
  1423. console.log('🎵 创建音频实例 - 页面:', this.currentPage, '音频索引:', this.currentAudioIndex);
  1424. console.log('🎵 创建音频实例 - 音频URL:', audioUrl);
  1425. console.log('🎵 创建音频实例 - 音频文本:', currentAudioData.text?.substring(0, 50) + '...');
  1426. // 在音頻可以播放時檢測playbackRate支持
  1427. audio.onCanplay(() => {
  1428. this.checkPlaybackRateSupport(audio);
  1429. });
  1430. // 音频事件监听
  1431. audio.onPlay(() => {
  1432. this.isPlaying = true;
  1433. // 在播放开始时立即设置倍速
  1434. this.applyPlaybackRate(audio);
  1435. });
  1436. audio.onPause(() => {
  1437. console.log('📊 暫停時倍速狀態:', {
  1438. 當前播放速度: audio.playbackRate + 'x',
  1439. 期望播放速度: this.playSpeed + 'x'
  1440. });
  1441. this.isPlaying = false;
  1442. });
  1443. audio.onTimeUpdate(() => {
  1444. this.updateCurrentTime();
  1445. // 定期检查倍速设置是否正确(每5秒检查一次)
  1446. if (Math.floor(audio.currentTime) % 5 === 0 && Math.floor(audio.currentTime) !== this.lastSpeedCheckTime) {
  1447. this.lastSpeedCheckTime = Math.floor(audio.currentTime);
  1448. const rateDifference = Math.abs(audio.playbackRate - this.playSpeed);
  1449. if (rateDifference > 0.01) {
  1450. this.applyPlaybackRate(audio);
  1451. }
  1452. }
  1453. });
  1454. audio.onEnded(() => {
  1455. this.onAudioEnded();
  1456. });
  1457. audio.onError((error) => {
  1458. // 更精确的错误判断:只在用户主动播放时出现的错误才提示
  1459. if (audio.src && audio.src.trim() !== '' && this.isPlaying) {
  1460. console.error('音频播放错误:', error);
  1461. this.isPlaying = false;
  1462. uni.showToast({
  1463. title: '音频播放失败',
  1464. icon: 'none'
  1465. });
  1466. } else {
  1467. // 其他情况的错误(初始化、预加载等),只记录日志不提示用户
  1468. console.log('🔇 音频错误(已忽略):', {
  1469. hasSrc: !!audio.src,
  1470. isPlaying: this.isPlaying,
  1471. errorType: error.type || 'unknown'
  1472. });
  1473. }
  1474. });
  1475. this.currentAudio = audio;
  1476. },
  1477. // 更新当前播放时间
  1478. updateCurrentTime() {
  1479. if (!this.currentAudio) return;
  1480. let totalTime = 0;
  1481. // 计算之前音频的总时长
  1482. for (let i = 0; i < this.currentAudioIndex; i++) {
  1483. totalTime += this.currentPageAudios[i].duration;
  1484. }
  1485. // 加上当前音频的播放时间
  1486. totalTime += this.currentAudio.currentTime;
  1487. this.currentTime = totalTime;
  1488. // 如果不是正在拖動滑動條,則同步更新滑動條的值
  1489. if (!this.isDragging) {
  1490. this.sliderValue = this.currentTime;
  1491. }
  1492. // 更新当前高亮的文本索引
  1493. this.updateHighlightIndex();
  1494. },
  1495. // 更新高亮文本索引
  1496. updateHighlightIndex() {
  1497. if (!this.isPlaying || this.currentPageAudios.length === 0) {
  1498. this.currentHighlightIndex = -1;
  1499. this.emitHighlightChange(-1);
  1500. return;
  1501. }
  1502. // 检查是否正在页面切换中,如果是则不更新高亮
  1503. if (this.isPageChanging) {
  1504. return;
  1505. }
  1506. // 获取当前播放的音频数据
  1507. const currentAudio = this.currentPageAudios[this.currentAudioIndex];
  1508. if (!currentAudio) {
  1509. this.currentHighlightIndex = -1;
  1510. this.emitHighlightChange(-1);
  1511. return;
  1512. }
  1513. // 如果当前音频是导语,不进行高亮
  1514. if (currentAudio.isLead) {
  1515. this.currentHighlightIndex = -1;
  1516. this.emitHighlightChange(-1);
  1517. return;
  1518. }
  1519. // 检查音频数据是否属于当前页面,防止页面切换时的数据错乱
  1520. const audioCacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  1521. const currentPageCache = this.audioCache[audioCacheKey];
  1522. // 如果当前音频数据不属于当前页面,则不更新高亮
  1523. if (!currentPageCache || !currentPageCache.audios.includes(currentAudio)) {
  1524. console.warn('🎵 updateHighlightIndex: 音频数据与当前页面不匹配,跳过高亮更新');
  1525. return;
  1526. }
  1527. // 如果是分段音频,需要计算正确的高亮索引
  1528. if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {
  1529. // 使用原始文本项的索引作为高亮索引
  1530. this.currentHighlightIndex = currentAudio.originalTextIndex;
  1531. } else {
  1532. // 非分段音频,使用音频索引
  1533. this.currentHighlightIndex = this.currentAudioIndex;
  1534. }
  1535. // 使用辅助方法发送高亮变化事件
  1536. this.emitHighlightChange(this.currentHighlightIndex);
  1537. // 发送滚动事件,让页面滚动到当前高亮的文本
  1538. this.emitScrollToText(this.currentHighlightIndex);
  1539. },
  1540. // 发送高亮变化事件的辅助方法
  1541. emitHighlightChange(highlightIndex = -1) {
  1542. if (highlightIndex === -1) {
  1543. // 清除高亮
  1544. this.$emit('highlight-change', -1);
  1545. return;
  1546. }
  1547. // 获取当前播放的音频数据(使用currentAudioIndex而不是highlightIndex)
  1548. const audioData = this.currentPageAudios[this.currentAudioIndex];
  1549. if (!audioData) {
  1550. this.$emit('highlight-change', -1);
  1551. return;
  1552. }
  1553. const highlightData = {
  1554. highlightIndex: audioData.originalTextIndex !== undefined ? audioData.originalTextIndex : highlightIndex,
  1555. isSegmented: audioData.isSegmented || false,
  1556. segmentIndex: audioData.segmentIndex || 0,
  1557. startIndex: audioData.startIndex || 0,
  1558. endIndex: audioData.endIndex || 0,
  1559. currentText: audioData.text || ''
  1560. };
  1561. // 发送详细的高亮信息
  1562. this.$emit('highlight-change', highlightData);
  1563. },
  1564. // 发送滚动到文本事件的辅助方法
  1565. emitScrollToText(highlightIndex = -1) {
  1566. if (highlightIndex === -1) {
  1567. return;
  1568. }
  1569. // 获取当前播放的音频数据
  1570. const audioData = this.currentPageAudios[this.currentAudioIndex];
  1571. if (!audioData) {
  1572. return;
  1573. }
  1574. // 检查音频数据是否属于当前页面,防止页面切换时的数据错乱
  1575. const audioCacheKey = `${this.courseId}_${this.currentPage}_${this.localVoiceId}`;
  1576. const currentPageCache = this.audioCache[audioCacheKey];
  1577. // 如果当前音频数据不属于当前页面,则不发送滚动事件
  1578. if (!currentPageCache || !currentPageCache.audios.includes(audioData)) {
  1579. console.warn('🎵 emitScrollToText: 音频数据与当前页面不匹配,跳过滚动事件');
  1580. return;
  1581. }
  1582. const scrollData = {
  1583. highlightIndex: audioData.originalTextIndex !== undefined ? audioData.originalTextIndex : highlightIndex,
  1584. isSegmented: audioData.isSegmented || false,
  1585. segmentIndex: audioData.segmentIndex || 0,
  1586. currentText: audioData.text || '',
  1587. currentPage: this.currentPage
  1588. };
  1589. // 发送滚动事件
  1590. this.$emit('scroll-to-text', scrollData);
  1591. },
  1592. // 音频播放结束处理
  1593. onAudioEnded() {
  1594. if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
  1595. // 查找下一个非导语音频
  1596. let nextIndex = this.currentAudioIndex + 1;
  1597. while (nextIndex < this.currentPageAudios.length && this.currentPageAudios[nextIndex].isLead) {
  1598. console.log(`🎵 跳过导语音频: ${this.currentPageAudios[nextIndex].text}`);
  1599. nextIndex++;
  1600. }
  1601. if (nextIndex < this.currentPageAudios.length) {
  1602. // 找到下一个非导语音频,播放它
  1603. this.currentAudioIndex = nextIndex;
  1604. this.playAudio();
  1605. } else {
  1606. // 没有更多非导语音频,结束播放
  1607. this.isPlaying = false;
  1608. this.currentTime = this.totalTime;
  1609. this.currentHighlightIndex = -1;
  1610. this.$emit('highlight-change', -1);
  1611. }
  1612. // 滚动到下一段音频对应的文字
  1613. // setTimeout(() => {
  1614. // this.scrollToCurrentAudio();
  1615. // }, 300); // 延迟300ms确保音频切换完成
  1616. } else {
  1617. // 所有音频播放完毕
  1618. if (this.isLoop) {
  1619. // 循环播放,从第一个非导语音频开始
  1620. let firstNonLeadIndex = 0;
  1621. while (firstNonLeadIndex < this.currentPageAudios.length && this.currentPageAudios[firstNonLeadIndex].isLead) {
  1622. firstNonLeadIndex++;
  1623. }
  1624. if (firstNonLeadIndex < this.currentPageAudios.length) {
  1625. this.currentAudioIndex = firstNonLeadIndex;
  1626. this.playAudio();
  1627. } else {
  1628. // 所有音频都是导语,停止播放
  1629. this.isPlaying = false;
  1630. this.currentTime = this.totalTime;
  1631. this.currentHighlightIndex = -1;
  1632. this.$emit('highlight-change', -1);
  1633. }
  1634. // 滚动到第一段音频对应的文字
  1635. // setTimeout(() => {
  1636. // this.scrollToCurrentAudio();
  1637. // }, 300);
  1638. } else {
  1639. // 停止播放
  1640. this.isPlaying = false;
  1641. this.currentTime = this.totalTime;
  1642. this.currentHighlightIndex = -1;
  1643. this.$emit('highlight-change', -1);
  1644. }
  1645. }
  1646. },
  1647. // 滚动到当前播放音频对应的文字
  1648. // scrollToCurrentAudio() {
  1649. // try {
  1650. // // 获取当前播放的音频数据
  1651. // const currentAudio = this.currentPageAudios[this.currentAudioIndex];
  1652. // if (!currentAudio) {
  1653. // console.log('🔍 scrollToCurrentAudio: 没有当前音频数据');
  1654. // return;
  1655. // }
  1656. //
  1657. // // 确定要滚动到的文字索引
  1658. // let targetTextIndex = this.currentAudioIndex;
  1659. //
  1660. // // 如果是分段音频,使用原始文本索引
  1661. // if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {
  1662. // targetTextIndex = currentAudio.originalTextIndex;
  1663. // }
  1664. //
  1665. // // 获取当前页面数据
  1666. // const currentPageData = this.bookPages[this.currentPage - 1];
  1667. // if (!currentPageData || !Array.isArray(currentPageData)) {
  1668. // console.warn('⚠️ scrollToCurrentAudio: 无法获取当前页面数据');
  1669. // return;
  1670. // }
  1671. //
  1672. // // 判断目标索引位置的元素类型
  1673. // const targetElement = currentPageData[targetTextIndex];
  1674. // let refPrefix = 'textRef'; // 默认为文本
  1675. //
  1676. // if (targetElement && targetElement.type === 'image') {
  1677. // refPrefix = 'imageRef';
  1678. // }
  1679. //
  1680. // // 构建ref名称:根据元素类型使用不同前缀
  1681. // const refName = `${refPrefix}_${this.currentPage - 1}_${targetTextIndex}`;
  1682. //
  1683. // console.log('🎯 scrollToCurrentAudio:', {
  1684. // currentAudioIndex: this.currentAudioIndex,
  1685. // targetTextIndex: targetTextIndex,
  1686. // targetElementType: targetElement?.type || 'unknown',
  1687. // refPrefix: refPrefix,
  1688. // refName: refName,
  1689. // isSegmented: currentAudio.isSegmented,
  1690. // originalTextIndex: currentAudio.originalTextIndex,
  1691. // audioText: currentAudio.text?.substring(0, 50) + '...'
  1692. // });
  1693. //
  1694. // // 通过父组件调用scrollTo插件
  1695. // this.$emit('scroll-to-text', refName);
  1696. //
  1697. // } catch (error) {
  1698. // console.error('❌ scrollToCurrentAudio 执行失败:', error);
  1699. // }
  1700. // },
  1701. toggleLoop() {
  1702. this.isLoop = !this.isLoop;
  1703. },
  1704. toggleSpeed() {
  1705. // 简化检测:只在极少数情况下阻止倍速切换
  1706. // 只有在明确禁用的情况下才阻止(比如Android 4.x)
  1707. if (!this.playbackRateSupported) {
  1708. // 不再直接返回,而是继续尝试
  1709. }
  1710. const currentIndex = this.speedOptions.indexOf(this.playSpeed);
  1711. const nextIndex = (currentIndex + 1) % this.speedOptions.length;
  1712. const oldSpeed = this.playSpeed;
  1713. this.playSpeed = this.speedOptions[nextIndex];
  1714. console.log('⚡ 倍速切换详情:', {
  1715. 可用选项: this.speedOptions,
  1716. 当前索引: currentIndex,
  1717. 下一个索引: nextIndex,
  1718. 旧速度: oldSpeed + 'x',
  1719. 新速度: this.playSpeed + 'x',
  1720. 切换时间: new Date().toLocaleTimeString()
  1721. });
  1722. // 如果当前有音频在播放,更新播放速度
  1723. console.log('🎵 检查音频实例状态:', {
  1724. 音频实例存在: !!this.currentAudio,
  1725. 正在播放: this.isPlaying,
  1726. 音频src: this.currentAudio ? this.currentAudio.src : '无'
  1727. });
  1728. if (this.currentAudio) {
  1729. const wasPlaying = this.isPlaying;
  1730. const currentTime = this.currentAudio.currentTime;
  1731. console.log('🔧 准备更新音频播放速度:', {
  1732. 播放状态: wasPlaying ? '正在播放' : '已暂停',
  1733. 当前时间: currentTime + 's',
  1734. 目标速度: this.playSpeed + 'x'
  1735. });
  1736. // 使用统一的倍速设置方法
  1737. this.applyPlaybackRate(this.currentAudio);
  1738. // 如果正在播放,需要重启播放才能使播放速度生效
  1739. if (wasPlaying) {
  1740. this.currentAudio.pause();
  1741. setTimeout(() => {
  1742. // 不使用seek方法,直接重新播放
  1743. this.currentAudio.play();
  1744. }, 100);
  1745. }
  1746. console.log('📊 最终音频状态:', {
  1747. 播放速度: this.currentAudio.playbackRate + 'x',
  1748. 播放时间: this.currentAudio.currentTime + 's',
  1749. 播放状态: this.isPlaying ? '播放中' : '已暂停'
  1750. });
  1751. // 显示速度变更提示
  1752. uni.showToast({
  1753. title: `🎵 播放速度: ${this.playSpeed}x`,
  1754. icon: 'none',
  1755. duration: 1000
  1756. });
  1757. } else {
  1758. uni.showToast({
  1759. title: `⚡ 速度设为: ${this.playSpeed}x`,
  1760. icon: 'none',
  1761. duration: 1000
  1762. });
  1763. }
  1764. },
  1765. // 滑動條值實時更新 (@input 事件)
  1766. onSliderInput(value) {
  1767. // 在拖動過程中實時更新顯示的時間,但不影響實際播放
  1768. if (this.isDragging) {
  1769. // 可以在這裡實時更新顯示時間,讓用戶看到拖動到的時間點
  1770. // 但不改變實際的 currentTime,避免影響播放邏輯
  1771. }
  1772. },
  1773. // 滑動條拖動過程中的處理 (@changing 事件)
  1774. onSliderChanging(value) {
  1775. // 第一次觸發 changing 事件時,暫停播放並標記為拖動狀態
  1776. if (!this.isDragging) {
  1777. if (this.isPlaying) {
  1778. this.pauseAudio();
  1779. }
  1780. this.isDragging = true;
  1781. }
  1782. // 更新滑動條的值,但不改變實際播放位置
  1783. this.sliderValue = value;
  1784. },
  1785. // 滑動條拖動結束的處理 (@change 事件)
  1786. onSliderChange(value) {
  1787. // 如果不是拖動狀態(即單點),需要先暫停播放
  1788. if (!this.isDragging && this.isPlaying) {
  1789. this.pauseAudio();
  1790. }
  1791. // 重置拖動狀態
  1792. this.isDragging = false;
  1793. this.sliderValue = value;
  1794. // 跳轉到指定位置,但不自動恢復播放
  1795. this.seekToTime(value, false);
  1796. },
  1797. // 跳轉到指定時間
  1798. seekToTime(targetTime, shouldResume = false) {
  1799. if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
  1800. return;
  1801. }
  1802. // 確保目標時間在有效範圍內
  1803. targetTime = Math.max(0, Math.min(targetTime, this.totalTime));
  1804. let accumulatedTime = 0;
  1805. let targetAudioIndex = -1;
  1806. let targetAudioTime = 0;
  1807. // 找到目標時間對應的音頻片段
  1808. for (let i = 0; i < this.currentPageAudios.length; i++) {
  1809. const audioDuration = this.currentPageAudios[i].duration || 0;
  1810. if (targetTime >= accumulatedTime && targetTime <= accumulatedTime + audioDuration) {
  1811. targetAudioIndex = i;
  1812. targetAudioTime = targetTime - accumulatedTime;
  1813. break;
  1814. }
  1815. accumulatedTime += audioDuration;
  1816. }
  1817. // 如果沒有找到合適的音頻片段,使用最後一個
  1818. if (targetAudioIndex === -1 && this.currentPageAudios.length > 0) {
  1819. targetAudioIndex = this.currentPageAudios.length - 1;
  1820. targetAudioTime = this.currentPageAudios[targetAudioIndex].duration || 0;
  1821. }
  1822. if (targetAudioIndex === -1) {
  1823. console.error('無法找到目標音頻片段');
  1824. return;
  1825. }
  1826. // 如果需要切換到不同的音頻片段
  1827. if (targetAudioIndex !== this.currentAudioIndex) {
  1828. this.currentAudioIndex = targetAudioIndex;
  1829. this.createAudioInstance();
  1830. // 等待音頻實例創建完成後再跳轉
  1831. this.waitForAudioReady(() => {
  1832. if (this.currentAudio) {
  1833. this.currentAudio.seek(targetAudioTime);
  1834. this.currentTime = targetTime;
  1835. // 如果拖動前正在播放,則恢復播放
  1836. if (shouldResume) {
  1837. this.currentAudio.play();
  1838. this.isPlaying = true;
  1839. }
  1840. }
  1841. });
  1842. } else {
  1843. // 在當前音頻片段內跳轉
  1844. if (this.currentAudio) {
  1845. this.currentAudio.seek(targetAudioTime);
  1846. this.currentTime = targetTime;
  1847. // 如果拖動前正在播放,則恢復播放
  1848. if (shouldResume) {
  1849. this.currentAudio.play();
  1850. this.isPlaying = true;
  1851. }
  1852. }
  1853. }
  1854. },
  1855. // 等待音頻實例準備就緒
  1856. waitForAudioReady(callback, maxAttempts = 10, currentAttempt = 0) {
  1857. if (currentAttempt >= maxAttempts) {
  1858. console.error('音頻實例準備超時');
  1859. return;
  1860. }
  1861. if (this.currentAudio && this.currentAudio.src) {
  1862. // 音頻實例已準備好
  1863. setTimeout(callback, 50); // 稍微延遲確保完全準備好
  1864. } else {
  1865. // 繼續等待
  1866. setTimeout(() => {
  1867. this.waitForAudioReady(callback, maxAttempts, currentAttempt + 1);
  1868. }, 100);
  1869. }
  1870. },
  1871. // 初始检测播放速度支持(简化版本,默认启用)
  1872. checkInitialPlaybackRateSupport() {
  1873. try {
  1874. const systemInfo = uni.getSystemInfoSync();
  1875. console.log('📱 系统信息:', {
  1876. platform: systemInfo.platform,
  1877. system: systemInfo.system,
  1878. SDKVersion: systemInfo.SDKVersion,
  1879. brand: systemInfo.brand,
  1880. model: systemInfo.model
  1881. });
  1882. // 简化检测逻辑:默认启用倍速功能
  1883. // 只在极少数明确不支持的情况下禁用
  1884. this.playbackRateSupported = true;
  1885. // 仅对非常老的Android版本进行限制(Android 4.x及以下)
  1886. if (systemInfo.platform === 'android') {
  1887. const androidVersion = systemInfo.system.match(/Android (\d+)/);
  1888. if (androidVersion && parseInt(androidVersion[1]) < 5) {
  1889. this.playbackRateSupported = false;
  1890. console.log(`⚠️ Android版本过低 (${androidVersion[1]}),禁用倍速功能`);
  1891. uni.showToast({
  1892. title: `Android ${androidVersion[1]} 不支持倍速`,
  1893. icon: 'none',
  1894. duration: 2000
  1895. });
  1896. return;
  1897. }
  1898. }
  1899. // 显示成功提示
  1900. uni.showToast({
  1901. title: '✅ 倍速功能可用',
  1902. icon: 'none',
  1903. duration: 1500
  1904. });
  1905. } catch (error) {
  1906. console.error('💥 检测播放速度支持时出错:', error);
  1907. // 即使出错也默认启用
  1908. this.playbackRateSupported = true;
  1909. }
  1910. },
  1911. // 应用播放速度设置
  1912. applyPlaybackRate(audio) {
  1913. if (!audio) return;
  1914. console.log('📊 当前状态检查:', {
  1915. playbackRateSupported: this.playbackRateSupported,
  1916. 期望速度: this.playSpeed + 'x',
  1917. 音频当前速度: audio.playbackRate + 'x',
  1918. 音频播放状态: this.isPlaying ? '播放中' : '未播放'
  1919. });
  1920. if (this.playbackRateSupported) {
  1921. try {
  1922. // 多次尝试设置倍速,确保生效
  1923. const maxAttempts = 3;
  1924. let attempt = 0;
  1925. const trySetRate = () => {
  1926. attempt++;
  1927. audio.playbackRate = this.playSpeed;
  1928. setTimeout(() => {
  1929. const actualRate = audio.playbackRate;
  1930. const rateDifference = Math.abs(actualRate - this.playSpeed);
  1931. if (rateDifference >= 0.01 && attempt < maxAttempts) {
  1932. setTimeout(trySetRate, 100);
  1933. } else if (rateDifference < 0.01) {
  1934. } else {
  1935. }
  1936. }, 50);
  1937. };
  1938. trySetRate();
  1939. } catch (error) {
  1940. }
  1941. } else {
  1942. }
  1943. },
  1944. // 检查播放速度控制支持(简化版本)
  1945. checkPlaybackRateSupport(audio) {
  1946. try {
  1947. // 如果初始检测已经禁用,直接返回
  1948. if (!this.playbackRateSupported) {
  1949. return;
  1950. }
  1951. console.log('🎧 音频实例信息:', {
  1952. 音频对象存在: !!audio,
  1953. 音频对象类型: typeof audio,
  1954. 音频src: audio ? audio.src : '无'
  1955. });
  1956. // 检测音频实例类型和倍速支持
  1957. let isHTML5Audio = false;
  1958. let supportsPlaybackRate = false;
  1959. if (audio) {
  1960. // 检查是否为HTML5 Audio包装实例
  1961. if (audio._nativeAudio && audio._nativeAudio instanceof Audio) {
  1962. isHTML5Audio = true;
  1963. supportsPlaybackRate = true;
  1964. }
  1965. // 检查是否为原生HTML5 Audio
  1966. else if (audio instanceof Audio) {
  1967. isHTML5Audio = true;
  1968. supportsPlaybackRate = true;
  1969. }
  1970. // 检查uni-app音频实例的playbackRate属性
  1971. else if (typeof audio.playbackRate !== 'undefined') {
  1972. supportsPlaybackRate = true;
  1973. } else {
  1974. }
  1975. // console.log('🔍 音频实例分析:', {
  1976. // 是否HTML5Audio: isHTML5Audio,
  1977. // 支持倍速: supportsPlaybackRate,
  1978. // 实例类型: audio.constructor?.name || 'unknown',
  1979. // playbackRate属性: typeof audio.playbackRate
  1980. // });
  1981. // 如果支持倍速,尝试设置当前播放速度
  1982. if (supportsPlaybackRate) {
  1983. try {
  1984. const currentSpeed = this.playSpeed || 1.0;
  1985. audio.playbackRate = currentSpeed;
  1986. // console.log(`🔧 设置播放速度为 ${currentSpeed}x`);
  1987. // 验证设置结果
  1988. // setTimeout(() => {
  1989. // const actualRate = audio.playbackRate;
  1990. // console.log('🔍 播放速度验证:', {
  1991. // 期望值: currentSpeed,
  1992. // 实际值: actualRate,
  1993. // 设置成功: Math.abs(actualRate - currentSpeed) < 0.1
  1994. // });
  1995. // }, 50);
  1996. } catch (error) {
  1997. }
  1998. }
  1999. } else {
  2000. }
  2001. // 保持倍速功能启用状态
  2002. } catch (error) {
  2003. console.error('💥 检查播放速度支持时出错:', error);
  2004. // 即使出错也保持启用状态
  2005. }
  2006. },
  2007. formatTime(seconds) {
  2008. const mins = Math.floor(seconds / 60);
  2009. const secs = Math.floor(seconds % 60);
  2010. return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  2011. },
  2012. // 清理音频缓存
  2013. clearAudioCache() {
  2014. this.audioCache = {};
  2015. },
  2016. // 限制缓存大小,保留最近访问的页面
  2017. limitCacheSize(maxSize = 10) {
  2018. const cacheKeys = Object.keys(this.audioCache);
  2019. if (cacheKeys.length > maxSize) {
  2020. // 删除最旧的缓存项
  2021. const keysToDelete = cacheKeys.slice(0, cacheKeys.length - maxSize);
  2022. keysToDelete.forEach(key => {
  2023. delete this.audioCache[key];
  2024. });
  2025. }
  2026. },
  2027. // 自動加載第一頁音頻並播放
  2028. async autoLoadAndPlayFirstPage() {
  2029. try {
  2030. // 確保當前是第一頁且需要加載音頻
  2031. if (this.currentPage === 1 && this.shouldLoadAudio) {
  2032. // 加載音頻
  2033. await this.getCurrentPageAudio();
  2034. // 檢查是否成功加載音頻
  2035. if (this.currentPageAudios && this.currentPageAudios.length > 0) {
  2036. // getCurrentPageAudio方法已經處理了第一個音頻的播放,這裡不需要再次調用playAudio
  2037. } else {
  2038. }
  2039. } else {
  2040. }
  2041. } catch (error) {
  2042. console.error('自動加載和播放音頻失敗:', error);
  2043. }
  2044. },
  2045. // 清理音频资源
  2046. destroyAudio() {
  2047. // 1. 停止并销毁当前音频实例
  2048. if (this.currentAudio) {
  2049. try {
  2050. // 先暂停再销毁
  2051. if (this.isPlaying) {
  2052. this.currentAudio.pause();
  2053. }
  2054. this.currentAudio.destroy();
  2055. } catch (error) {
  2056. console.error('销毁音频实例失败:', error);
  2057. }
  2058. this.currentAudio = null;
  2059. }
  2060. // 2. 重置所有播放状态
  2061. this.isPlaying = false;
  2062. this.currentTime = 0;
  2063. this.sliderValue = 0;
  2064. this.currentHighlightIndex = -1;
  2065. // 3. 清理音频缓存
  2066. this.clearAudioCache();
  2067. // 4. 取消正在进行的请求
  2068. this.shouldCancelRequest = true;
  2069. // 5. 重置加载状态
  2070. this.isAudioLoading = false;
  2071. this.isVoiceChanging = false;
  2072. this.audioLoadFailed = false;
  2073. },
  2074. // 停止单词音频播放(全局音频管理)
  2075. stopWordAudio() {
  2076. try {
  2077. // 通过父组件访问book页面的单词音频
  2078. const pages = getCurrentPages();
  2079. const currentPage = pages[pages.length - 1];
  2080. if (currentPage && currentPage.$vm) {
  2081. const bookVm = currentPage.$vm;
  2082. if (bookVm.currentWordAudio) {
  2083. bookVm.currentWordAudio.pause();
  2084. bookVm.currentWordAudio.destroy();
  2085. bookVm.currentWordAudio = null;
  2086. bookVm.isWordAudioPlaying = false;
  2087. }
  2088. }
  2089. } catch (error) {
  2090. }
  2091. },
  2092. // 课程切换时的完整数据清理(保留音色设置)
  2093. resetForCourseChange() {
  2094. // 1. 停止并销毁当前音频
  2095. if (this.isPlaying && this.currentAudio) {
  2096. this.pauseAudio();
  2097. }
  2098. if (this.currentAudio) {
  2099. this.currentAudio.destroy();
  2100. this.currentAudio = null;
  2101. }
  2102. // 2. 清空所有音频相关数据
  2103. this.currentPageAudios = [];
  2104. this.currentAudioIndex = 0;
  2105. this.currentTime = 0;
  2106. this.totalTime = 0;
  2107. this.sliderValue = 0;
  2108. this.isDragging = false;
  2109. this.isPlaying = false;
  2110. this.hasAudioData = false;
  2111. this.isAudioLoading = false;
  2112. this.audioLoadFailed = false;
  2113. this.currentHighlightIndex = -1;
  2114. // 3. 清空音频缓存(因为课程变了,所有缓存都无效)
  2115. this.clearAudioCache();
  2116. // 4. 重置预加载状态
  2117. this.isPreloading = false;
  2118. this.preloadProgress = 0;
  2119. this.preloadedPages = new Set();
  2120. // 5. 重置播放控制状态
  2121. this.isLoop = false;
  2122. this.playSpeed = 1.0;
  2123. this.playbackRateSupported = true;
  2124. // 6. 重置音色切换状态
  2125. this.isVoiceChanging = false;
  2126. // 7. 设置课程切换状态
  2127. this.isJustSwitchedCourse = true;
  2128. // 注意:不清空 voiceId,保留用户的音色选择
  2129. // 7. 通知父组件状态变化
  2130. this.$emit('audio-state-change', {
  2131. hasAudioData: false,
  2132. isLoading: false,
  2133. audioLoadFailed: false,
  2134. currentHighlightIndex: -1
  2135. });
  2136. },
  2137. // 自动加载并播放音频(课程切换后调用)
  2138. async autoLoadAndPlayAudio() {
  2139. // 检查是否需要加载音频
  2140. if (!this.shouldLoadAudio) {
  2141. return;
  2142. }
  2143. // 检查必要条件
  2144. if (!this.courseId || !this.currentPage) {
  2145. return;
  2146. }
  2147. try {
  2148. // 设置加载状态
  2149. this.isAudioLoading = true;
  2150. // 开始加载音频
  2151. await this.getCurrentPageAudio();
  2152. } catch (error) {
  2153. console.error('自动加载音频失败:', error);
  2154. this.isAudioLoading = false;
  2155. }
  2156. },
  2157. // 暂停音频(页面隐藏时调用)
  2158. pauseOnHide() {
  2159. this.pauseAudio();
  2160. },
  2161. // 处理音色切换(由父组件调用)
  2162. async handleVoiceChange(newVoiceId, options = {}) {
  2163. console.log(`🎵 handleVoiceChange: 开始音色切换 ${this.localVoiceId} -> ${newVoiceId}`);
  2164. console.log(`🎵 handleVoiceChange: 当前页面=${this.currentPage}, 课程ID=${this.courseId}, bookPages长度=${this.bookPages.length}`);
  2165. // 检查是否正在加载音频,如果是则阻止音色切换
  2166. if (this.isAudioLoading) {
  2167. console.log(`🎵 handleVoiceChange: 音频正在加载中,阻止音色切换`);
  2168. throw new Error('音频加载中,请稍后再试');
  2169. }
  2170. const { preloadAllPages = true } = options; // 默认预加载所有页面
  2171. try {
  2172. // 1. 停止当前播放的音频
  2173. if (this.isPlaying) {
  2174. this.pauseAudio();
  2175. }
  2176. // 2. 销毁当前音频实例
  2177. if (this.currentAudio) {
  2178. this.currentAudio.destroy();
  2179. this.currentAudio = null;
  2180. }
  2181. // 3. 清理所有音频缓存(因为音色变了,所有缓存都无效)
  2182. this.clearAudioCache();
  2183. // 4. 重置音频状态
  2184. this.currentPageAudios = [];
  2185. this.currentAudioIndex = 0;
  2186. this.isPlaying = false;
  2187. this.currentTime = 0;
  2188. this.totalTime = 0;
  2189. this.hasAudioData = false;
  2190. this.audioLoadFailed = false;
  2191. this.currentHighlightIndex = -1;
  2192. // 5. 设置音色切换加载状态
  2193. this.isVoiceChanging = true;
  2194. this.isAudioLoading = true;
  2195. // 6. 更新本地音色ID(不直接修改prop)
  2196. this.localVoiceId = newVoiceId;
  2197. // 7. 通知父组件开始加载状态
  2198. this.$emit('audio-state-change', {
  2199. hasAudioData: false,
  2200. isLoading: true,
  2201. currentHighlightIndex: -1
  2202. });
  2203. // 8. 如果当前页面需要加载音频,优先获取当前页面音频
  2204. if (this.shouldLoadAudio && this.courseId && this.currentPage) {
  2205. console.log(`🎵 handleVoiceChange: 开始获取当前页面音频,页面=${this.currentPage}, 课程=${this.courseId}`);
  2206. await this.getCurrentPageAudio();
  2207. console.log(`🎵 handleVoiceChange: 当前页面音频获取完成,hasAudioData=${this.hasAudioData}`);
  2208. } else {
  2209. // 如果不需要加载音频,直接清除加载状态
  2210. console.log(`🎵 handleVoiceChange: 不需要加载音频,shouldLoadAudio=${this.shouldLoadAudio}, courseId=${this.courseId}, currentPage=${this.currentPage}`);
  2211. this.isAudioLoading = false;
  2212. }
  2213. // 9. 清除音色切换加载状态
  2214. this.isVoiceChanging = false;
  2215. // 10. 如果需要预加载其他页面,启动预加载
  2216. if (preloadAllPages) {
  2217. // 延迟启动预加载,确保当前页面音频加载完成
  2218. setTimeout(() => {
  2219. this.preloadAllPagesAudio();
  2220. }, 1000);
  2221. }
  2222. // 11. 通知父组件最终状态
  2223. this.$emit('audio-state-change', {
  2224. hasAudioData: this.hasAudioData,
  2225. isLoading: this.isAudioLoading,
  2226. currentHighlightIndex: this.currentHighlightIndex
  2227. });
  2228. // 12. 通知父组件音色切换完成
  2229. this.$emit('voice-change-complete', {
  2230. voiceId: newVoiceId,
  2231. hasAudioData: this.hasAudioData,
  2232. preloadAllPages: preloadAllPages
  2233. });
  2234. } catch (error) {
  2235. console.error('🎵 AudioControls: 音色切换处理失败:', error);
  2236. // 清除加载状态
  2237. this.isVoiceChanging = false;
  2238. this.isAudioLoading = false;
  2239. // 通知父组件状态变化
  2240. this.$emit('audio-state-change', {
  2241. hasAudioData: false,
  2242. isLoading: false,
  2243. currentHighlightIndex: -1
  2244. });
  2245. this.$emit('voice-change-error', error);
  2246. }
  2247. },
  2248. // 预加载所有页面音频(音色切换时使用)
  2249. async preloadAllPagesAudio() {
  2250. if (this.isPreloading) {
  2251. return;
  2252. }
  2253. try {
  2254. this.isPreloading = true;
  2255. this.preloadProgress = 0;
  2256. // 获取所有文本页面
  2257. const allTextPages = [];
  2258. for (let i = 0; i < this.bookPages.length; i++) {
  2259. const pageData = this.bookPages[i];
  2260. const hasTextContent = pageData && pageData.some(item => item.type === 'text');
  2261. if (hasTextContent && i !== this.currentPage - 1) { // 排除当前页面,因为已经加载过了
  2262. allTextPages.push({
  2263. pageIndex: i + 1,
  2264. pageData: pageData
  2265. });
  2266. }
  2267. }
  2268. if (allTextPages.length === 0) {
  2269. this.isPreloading = false;
  2270. return;
  2271. }
  2272. // 逐页预加载音频
  2273. for (let i = 0; i < allTextPages.length; i++) {
  2274. const pageInfo = allTextPages[i];
  2275. try {
  2276. console.log(`预加载第 ${pageInfo.pageIndex} 页音频 (${i + 1}/${allTextPages.length})`);
  2277. await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);
  2278. // 更新进度
  2279. this.preloadProgress = Math.round(((i + 1) / allTextPages.length) * 100);
  2280. // 添加小延迟,避免请求过于频繁
  2281. if (i < allTextPages.length - 1) {
  2282. await new Promise(resolve => setTimeout(resolve, 200));
  2283. }
  2284. } catch (error) {
  2285. console.error(`预加载第 ${pageInfo.pageIndex} 页音频失败:`, error);
  2286. // 继续预加载其他页面,不因单页失败而中断
  2287. }
  2288. }
  2289. } catch (error) {
  2290. console.error('预加载所有页面音频失败:', error);
  2291. } finally {
  2292. this.isPreloading = false;
  2293. this.preloadProgress = 100;
  2294. }
  2295. },
  2296. // 开始预加载音频(由父组件调用)
  2297. async startPreloadAudio() {
  2298. if (this.isPreloading) {
  2299. return;
  2300. }
  2301. try {
  2302. this.isPreloading = true;
  2303. this.preloadProgress = 0;
  2304. // 获取需要预加载的页面列表(当前页面后的几页)
  2305. const preloadPages = this.getPreloadPageList();
  2306. if (preloadPages.length === 0) {
  2307. this.isPreloading = false;
  2308. return;
  2309. }
  2310. // 逐个预加载页面音频
  2311. for (let i = 0; i < preloadPages.length; i++) {
  2312. const pageInfo = preloadPages[i];
  2313. try {
  2314. await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);
  2315. // 更新预加载进度
  2316. this.preloadProgress = Math.round(((i + 1) / preloadPages.length) * 100);
  2317. // 延迟一下,避免请求过于频繁
  2318. await new Promise(resolve => setTimeout(resolve, 300));
  2319. } catch (error) {
  2320. console.error(`预加载第${pageInfo.pageIndex + 1}页音频失败:`, error);
  2321. // 继续预加载其他页面
  2322. }
  2323. }
  2324. } catch (error) {
  2325. console.error('预加载音频失败:', error);
  2326. } finally {
  2327. this.isPreloading = false;
  2328. this.preloadProgress = 100;
  2329. }
  2330. },
  2331. // 获取需要预加载的页面列表
  2332. getPreloadPageList() {
  2333. const preloadPages = [];
  2334. const maxPreloadPages = 3; // 优化:最多预加载3页,减少服务器压力
  2335. // 从当前页面的下一页开始预加载
  2336. for (let i = this.currentPage; i < Math.min(this.currentPage + maxPreloadPages, this.bookPages.length); i++) {
  2337. const pageData = this.bookPages[i];
  2338. // 检查页面是否需要会员且用户非会员,如果是则跳过
  2339. const pageRequiresMember = this.pagePay[i] === 'Y';
  2340. if (pageRequiresMember && !this.isMember) {
  2341. continue;
  2342. }
  2343. // 检查页面是否有文本内容且未缓存
  2344. if (pageData && pageData.length > 0) {
  2345. const hasTextContent = pageData.some(item => item.type === 'text' && item.content);
  2346. const cacheKey = `${this.courseId}_${i + 1}_${this.voiceId}`;
  2347. const isAlreadyCached = this.audioCache[cacheKey];
  2348. if (hasTextContent && !isAlreadyCached) {
  2349. preloadPages.push({
  2350. pageIndex: i,
  2351. pageData: pageData
  2352. });
  2353. }
  2354. }
  2355. }
  2356. return preloadPages;
  2357. },
  2358. // 预加载单个页面的音频
  2359. async preloadPageAudio(pageIndex, pageData) {
  2360. const cacheKey = `${this.courseId}_${pageIndex + 1}_${this.voiceId}`;
  2361. // 检查是否已经缓存
  2362. if (this.audioCache[cacheKey]) {
  2363. return;
  2364. }
  2365. // 收集页面中的文本内容
  2366. const textItems = pageData.filter(item => item.type === 'text' && item.content);
  2367. if (textItems.length === 0) {
  2368. return;
  2369. }
  2370. const audioArray = [];
  2371. let totalDuration = 0;
  2372. // 逐个处理文本项,支持长文本分割
  2373. for (let i = 0; i < textItems.length; i++) {
  2374. const item = textItems[i];
  2375. try {
  2376. // 使用分批次请求音频
  2377. const batchResult = await this.requestAudioInBatches(item.content, this.localVoiceId);
  2378. // 检查请求是否被取消
  2379. if (batchResult === null) {
  2380. return;
  2381. }
  2382. if (batchResult.audioSegments.length > 0) {
  2383. // 将所有音频段添加到音频数组
  2384. for (const segment of batchResult.audioSegments) {
  2385. if (!segment.error) {
  2386. audioArray.push({
  2387. url: segment.url,
  2388. text: segment.text,
  2389. duration: segment.duration,
  2390. startIndex: segment.startIndex,
  2391. endIndex: segment.endIndex,
  2392. segmentIndex: segment.segmentIndex,
  2393. originalTextIndex: i, // 标记属于哪个原始文本项
  2394. isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
  2395. });
  2396. totalDuration += segment.duration;
  2397. }
  2398. }
  2399. console.log(`${pageIndex + 1}页第${i + 1}个文本项预加载完成,获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
  2400. } else {
  2401. console.error(`${pageIndex + 1}页第${i + 1}个文本项音频预加载全部失败`);
  2402. }
  2403. } catch (error) {
  2404. console.error(`${pageIndex + 1}页第${i + 1}个文本项处理异常:`, error);
  2405. }
  2406. // 每个文本项处理之间间隔300ms,避免请求过于频繁
  2407. if (i < textItems.length - 1) {
  2408. await new Promise(resolve => setTimeout(resolve, 300));
  2409. }
  2410. }
  2411. // 保存到缓存
  2412. if (audioArray.length > 0) {
  2413. this.audioCache[cacheKey] = {
  2414. audios: audioArray,
  2415. totalDuration: totalDuration,
  2416. voiceId: this.localVoiceId, // 保存音色ID用于验证
  2417. timestamp: Date.now() // 保存时间戳
  2418. };
  2419. // 限制缓存大小
  2420. this.limitCacheSize(10);
  2421. }
  2422. },
  2423. // 检查指定页面是否有音频缓存
  2424. checkAudioCache(pageNumber) {
  2425. const cacheKey = `${this.courseId}_${pageNumber}_${this.localVoiceId}`;
  2426. const cachedData = this.audioCache[cacheKey];
  2427. if (cachedData && cachedData.audios && cachedData.audios.length > 0) {
  2428. return true;
  2429. }
  2430. return false;
  2431. },
  2432. // 自动播放已缓存的音频
  2433. async autoPlayCachedAudio() {
  2434. try {
  2435. // 如果正在音色切换中,不自动播放
  2436. if (this.isVoiceChanging) {
  2437. return;
  2438. }
  2439. const cacheKey = `${this.courseId}_${this.currentPage}_${this.voiceId}`;
  2440. const cachedData = this.audioCache[cacheKey];
  2441. if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
  2442. return;
  2443. }
  2444. // 停止当前播放的音频
  2445. this.pauseAudio();
  2446. // 设置当前页面的音频数据
  2447. this.currentPageAudios = cachedData.audios;
  2448. this.totalDuration = cachedData.totalDuration;
  2449. // 重置播放状态
  2450. this.currentAudioIndex = 0;
  2451. this.currentTime = 0;
  2452. this.isPlaying = false;
  2453. // 延迟一下再开始播放,确保UI更新完成
  2454. setTimeout(() => {
  2455. this.playAudio();
  2456. }, 300);
  2457. } catch (error) {
  2458. console.error('自动播放缓存音频失败:', error);
  2459. }
  2460. }
  2461. },
  2462. mounted() {
  2463. console.log('⚙️ 初始倍速配置:', {
  2464. 默認播放速度: this.playSpeed + 'x',
  2465. 可選速度選項: this.speedOptions.map(s => s + 'x'),
  2466. 初始支持狀態: this.playbackRateSupported
  2467. });
  2468. // 初始檢測播放速度支持
  2469. this.checkInitialPlaybackRateSupport();
  2470. },
  2471. // 自动播放预加载的音频
  2472. async autoPlayPreloadedAudio() {
  2473. try {
  2474. // 如果正在音色切换中,不自动播放
  2475. if (this.isVoiceChanging) {
  2476. return;
  2477. }
  2478. // 检查是否有音频数据
  2479. if (!this.hasAudioData || this.currentPageAudios.length === 0) {
  2480. return;
  2481. }
  2482. // 检查第一个音频是否有效
  2483. const firstAudio = this.currentPageAudios[0];
  2484. if (!firstAudio || !firstAudio.url) {
  2485. return;
  2486. }
  2487. // 重置播放状态
  2488. this.currentAudioIndex = 0;
  2489. this.currentTime = 0;
  2490. this.sliderValue = 0;
  2491. this.currentHighlightIndex = 0;
  2492. // 创建音频实例
  2493. this.createAudioInstance();
  2494. // 稍等一下再播放,确保音频准备就绪
  2495. setTimeout(() => {
  2496. if (this.currentAudio && !this.isPlaying) {
  2497. this.currentAudio.play();
  2498. }
  2499. }, 200);
  2500. } catch (error) {
  2501. console.error('自动播放预加载音频失败:', error);
  2502. }
  2503. },
  2504. beforeDestroy() {
  2505. // 清理页面切换防抖定时器
  2506. if (this.pageChangeTimer) {
  2507. clearTimeout(this.pageChangeTimer);
  2508. this.pageChangeTimer = null;
  2509. }
  2510. // 清理音频资源
  2511. this.destroyAudio();
  2512. }
  2513. }
  2514. </script>
  2515. <style lang="scss" scoped>
  2516. /* 音频控制栏样式 */
  2517. .audio-controls-wrapper {
  2518. position: relative;
  2519. z-index: 10;
  2520. }
  2521. .audio-controls {
  2522. background: #fff;
  2523. padding: 20rpx 40rpx;
  2524. border-bottom: 1rpx solid #eee;
  2525. transition: transform 0.3s ease;
  2526. position: relative;
  2527. z-index: 10;
  2528. &.audio-hidden {
  2529. transform: translateY(100%);
  2530. }
  2531. }
  2532. .audio-time {
  2533. display: flex;
  2534. align-items: center;
  2535. margin-bottom: 20rpx;
  2536. }
  2537. .time-text {
  2538. font-size: 28rpx;
  2539. color: #999;
  2540. min-width: 80rpx;
  2541. }
  2542. .progress-container {
  2543. flex: 1;
  2544. margin: 0 20rpx;
  2545. }
  2546. .audio-controls-row {
  2547. display: flex;
  2548. align-items: center;
  2549. justify-content: space-between;
  2550. }
  2551. .control-btn {
  2552. display: flex;
  2553. align-items: center;
  2554. padding: 10rpx;
  2555. gap: 8rpx;
  2556. }
  2557. .control-btn.disabled {
  2558. pointer-events: none;
  2559. opacity: 0.6;
  2560. }
  2561. .control-text {
  2562. font-size: 28rpx;
  2563. color: #4A4A4A;
  2564. }
  2565. .play-btn {
  2566. display: flex;
  2567. align-items: center;
  2568. justify-content: center;
  2569. padding: 10rpx;
  2570. }
  2571. /* 音频加载状态样式 */
  2572. .audio-loading-container {
  2573. background: #fff;
  2574. padding: 40rpx;
  2575. border-bottom: 1rpx solid #eee;
  2576. display: flex;
  2577. flex-direction: column;
  2578. align-items: center;
  2579. justify-content: center;
  2580. gap: 20rpx;
  2581. position: relative;
  2582. z-index: 10;
  2583. }
  2584. /* 加载指示器样式 */
  2585. .loading-indicator {
  2586. display: flex;
  2587. align-items: center;
  2588. justify-content: center;
  2589. gap: 10rpx;
  2590. padding: 10rpx 20rpx;
  2591. background: rgba(6, 218, 220, 0.1);
  2592. border-radius: 20rpx;
  2593. margin-bottom: 10rpx;
  2594. }
  2595. .loading-indicator-text {
  2596. font-size: 24rpx;
  2597. color: #06DADC;
  2598. }
  2599. .loading-text {
  2600. font-size: 28rpx;
  2601. color: #999;
  2602. }
  2603. /* 音色切换加载状态特殊样式 */
  2604. .voice-changing {
  2605. background: linear-gradient(135deg, #fff5f0 0%, #ffe7d9 100%);
  2606. border: 2rpx solid #ff6b35;
  2607. }
  2608. .voice-changing-text {
  2609. color: #ff6b35;
  2610. font-weight: 500;
  2611. }
  2612. /* 预加载状态特殊样式 */
  2613. .preloading {
  2614. background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  2615. border: 2rpx solid #06DADC;
  2616. }
  2617. .preloading .loading-text {
  2618. color: #06DADC;
  2619. font-weight: 500;
  2620. }
  2621. /* 课程切换状态特殊样式 */
  2622. .course-switching {
  2623. background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
  2624. border: 2rpx solid #52c41a;
  2625. }
  2626. .course-switching .loading-text {
  2627. color: #52c41a;
  2628. font-weight: 500;
  2629. }
  2630. /* 获取音频按钮样式 */
  2631. .audio-get-button-container {
  2632. background: rgba(255, 255, 255, 0.95);
  2633. backdrop-filter: blur(10px);
  2634. padding: 30rpx;
  2635. border-radius: 20rpx;
  2636. border: 2rpx solid #E5E5E5;
  2637. transition: all 0.3s ease;
  2638. position: relative;
  2639. z-index: 10;
  2640. }
  2641. .get-audio-btn {
  2642. display: flex;
  2643. align-items: center;
  2644. justify-content: center;
  2645. gap: 16rpx;
  2646. padding: 20rpx 40rpx;
  2647. background: linear-gradient(135deg, #06DADC 0%, #04B8BA 100%);
  2648. border-radius: 50rpx;
  2649. box-shadow: 0 8rpx 20rpx rgba(6, 218, 220, 0.3);
  2650. transition: all 0.3s ease;
  2651. }
  2652. .get-audio-btn:active {
  2653. transform: scale(0.95);
  2654. box-shadow: 0 4rpx 10rpx rgba(6, 218, 220, 0.2);
  2655. }
  2656. /* 音频预加载提示样式 */
  2657. .audio-preloaded-container {
  2658. display: flex;
  2659. justify-content: center;
  2660. align-items: center;
  2661. padding: 20rpx;
  2662. transition: all 0.3s ease;
  2663. position: relative;
  2664. z-index: 10;
  2665. }
  2666. .preloaded-tip {
  2667. display: flex;
  2668. align-items: center;
  2669. justify-content: center;
  2670. gap: 16rpx;
  2671. padding: 20rpx 40rpx;
  2672. background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  2673. border-radius: 50rpx;
  2674. box-shadow: 0 8rpx 20rpx rgba(82, 196, 26, 0.3);
  2675. transition: all 0.3s ease;
  2676. }
  2677. .preloaded-text {
  2678. color: #ffffff;
  2679. font-size: 28rpx;
  2680. font-weight: 500;
  2681. }
  2682. /* 音频获取失败样式 */
  2683. .audio-failed-container {
  2684. display: flex;
  2685. flex-direction: column;
  2686. align-items: center;
  2687. justify-content: center;
  2688. padding: 20rpx;
  2689. gap: 20rpx;
  2690. }
  2691. .failed-tip {
  2692. display: flex;
  2693. align-items: center;
  2694. justify-content: center;
  2695. gap: 16rpx;
  2696. padding: 20rpx 40rpx;
  2697. background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
  2698. border-radius: 50rpx;
  2699. box-shadow: 0 8rpx 20rpx rgba(255, 77, 79, 0.3);
  2700. }
  2701. .failed-text {
  2702. color: #ffffff;
  2703. font-size: 28rpx;
  2704. font-weight: 500;
  2705. }
  2706. .retry-btn {
  2707. display: flex;
  2708. align-items: center;
  2709. justify-content: center;
  2710. gap: 12rpx;
  2711. padding: 16rpx 32rpx;
  2712. background: linear-gradient(135deg, #06DADC 0%, #05B8BA 100%);
  2713. border-radius: 40rpx;
  2714. box-shadow: 0 6rpx 16rpx rgba(6, 218, 220, 0.3);
  2715. transition: all 0.3s ease;
  2716. }
  2717. .retry-btn:active {
  2718. transform: scale(0.95);
  2719. box-shadow: 0 4rpx 12rpx rgba(6, 218, 220, 0.4);
  2720. }
  2721. .retry-text {
  2722. color: #ffffff;
  2723. font-size: 26rpx;
  2724. font-weight: 500;
  2725. }
  2726. .get-audio-text {
  2727. font-size: 32rpx;
  2728. color: #FFFFFF;
  2729. font-weight: 500;
  2730. }
  2731. /* 会员限制容器样式 */
  2732. .member-restricted-container {
  2733. height: 0;
  2734. overflow: hidden;
  2735. opacity: 0;
  2736. pointer-events: none;
  2737. }
  2738. </style>