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

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