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

1837 lines
61 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. <template>
  2. <view class="audio-controls-wrapper">
  3. <!-- 获取音频按钮 -->
  4. <view v-if="!hasAudioData && !isAudioLoading && isTextPage && !hasCurrentPageCache" class="audio-get-button-container">
  5. <view class="get-audio-btn" @click="handleGetAudio">
  6. <uv-icon name="play-circle" size="24" color="#06DADC"></uv-icon>
  7. <text class="get-audio-text">获取第{{currentPage}}页音频</text>
  8. </view>
  9. </view>
  10. <!-- 音频已预加载提示 -->
  11. <view v-else-if="!hasAudioData && !isAudioLoading && isTextPage && hasCurrentPageCache" class="audio-preloaded-container">
  12. <view class="preloaded-tip">
  13. <uv-icon name="checkmark-circle" size="24" color="#52c41a"></uv-icon>
  14. <text class="preloaded-text">{{currentPage}}页音频已预加载</text>
  15. </view>
  16. </view>
  17. <!-- 音频加载状态 -->
  18. <view v-else-if="isAudioLoading && isTextPage && !hasAudioData" class="audio-loading-container">
  19. <uv-loading-icon mode="spinner" size="30" color="#06DADC"></uv-loading-icon>
  20. <text class="loading-text">正在加载第{{currentPage}}页音频...</text>
  21. </view>
  22. <!-- 正常音频控制栏 -->
  23. <view v-else-if="hasAudioData" class="audio-controls" :class="{ 'audio-hidden': !isTextPage }">
  24. <!-- 加载指示器 -->
  25. <view v-if="isAudioLoading" class="loading-indicator">
  26. <uv-loading-icon mode="spinner" size="16" color="#06DADC"></uv-loading-icon>
  27. <text class="loading-indicator-text">正在加载更多音频...</text>
  28. </view>
  29. <view class="audio-time">
  30. <text class="time-text">{{ formatTime(currentTime) }}</text>
  31. <view class="progress-container">
  32. <uv-slider
  33. v-model="sliderValue"
  34. :min="0"
  35. :max="totalTime"
  36. :step="0.1"
  37. activeColor="#06DADC"
  38. backgroundColor="#e0e0e0"
  39. :blockSize="16"
  40. blockColor="#ffffff"
  41. disabled
  42. :customStyle="{ flex: 1, margin: '0 10px' }"
  43. />
  44. </view>
  45. <text class="time-text">{{ formatTime(totalTime) }}</text>
  46. </view>
  47. <view class="audio-controls-row">
  48. <view class="control-btn" @click="toggleLoop">
  49. <uv-icon name="reload" size="20" :color="isLoop ? '#06DADC' : '#999'"></uv-icon>
  50. <text class="control-text">循环</text>
  51. </view>
  52. <view class="control-btn" @click="$emit('previous-page')">
  53. <text class="control-text">上一页</text>
  54. </view>
  55. <view class="play-btn" @click="togglePlay">
  56. <uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="40" color="#666"></uv-icon>
  57. </view>
  58. <view class="control-btn" @click="$emit('next-page')">
  59. <text class="control-text">下一页</text>
  60. </view>
  61. <view class="control-btn" @click="toggleSpeed" :class="{ 'disabled': !playbackRateSupported }">
  62. <text class="control-text" :style="{ opacity: playbackRateSupported ? 1 : 0.5 }">
  63. {{ playbackRateSupported ? playSpeed + 'x' : '不支持' }}
  64. </text>
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. </template>
  70. <script>
  71. import config from '@/mixins/config.js'
  72. export default {
  73. name: 'AudioControls',
  74. mixins: [config],
  75. props: {
  76. // 基础数据
  77. currentPage: {
  78. type: Number,
  79. default: 1
  80. },
  81. courseId: {
  82. type: String,
  83. default: ''
  84. },
  85. voiceId: {
  86. type: String,
  87. default: ''
  88. },
  89. bookPages: {
  90. type: Array,
  91. default: () => []
  92. },
  93. isTextPage: {
  94. type: Boolean,
  95. default: false
  96. }
  97. },
  98. data() {
  99. return {
  100. // 音频控制相关数据
  101. isPlaying: false,
  102. currentTime: 0,
  103. totalTime: 0,
  104. sliderValue: 0, // 滑動條的值
  105. isDragging: false, // 是否正在拖動滑動條
  106. isLoop: false,
  107. playSpeed: 1.0,
  108. speedOptions: [0.5, 0.8, 1.0, 1.25, 1.5, 2.0], // 根據uni-app文檔的官方支持值
  109. playbackRateSupported: true, // 播放速度控制是否支持
  110. // 音频数组管理
  111. currentPageAudios: [], // 当前页面的音频数组
  112. currentAudioIndex: 0, // 当前播放的音频索引
  113. audioContext: null, // 音频上下文
  114. currentAudio: null, // 当前音频实例
  115. // 音频缓存管理
  116. audioCache: {}, // 页面音频缓存 {pageIndex: {audios: [], totalDuration: 0}}
  117. // 预加载相关状态
  118. isPreloading: false, // 是否正在预加载
  119. preloadProgress: 0, // 预加载进度 (0-100)
  120. preloadQueue: [], // 预加载队列
  121. // 音频加载状态
  122. isAudioLoading: false, // 音频是否正在加载
  123. hasAudioData: false, // 当前页面是否已有音频数据
  124. // 文本高亮相关
  125. currentHighlightIndex: -1, // 当前高亮的文本索引
  126. }
  127. },
  128. computed: {
  129. // 计算音频播放进度百分比
  130. progressPercent() {
  131. return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;
  132. },
  133. // 检查当前页面是否有缓存的音频
  134. hasCurrentPageCache() {
  135. const cacheKey = `${this.courseId}_${this.currentPage}`;
  136. const cachedData = this.audioCache[cacheKey];
  137. return cachedData && cachedData.audios && cachedData.audios.length > 0;
  138. }
  139. },
  140. watch: {
  141. // 监听页面变化,重置音频状态
  142. currentPage: {
  143. handler(newPage, oldPage) {
  144. if (newPage !== oldPage) {
  145. this.resetAudioState();
  146. }
  147. },
  148. immediate: false
  149. },
  150. // 监听音色变化,清除缓存
  151. voiceId: {
  152. handler(newVoiceId, oldVoiceId) {
  153. if (newVoiceId !== oldVoiceId && oldVoiceId) {
  154. this.clearAudioCache();
  155. this.resetAudioState();
  156. }
  157. }
  158. }
  159. },
  160. methods: {
  161. // 智能分割文本,按句号和逗号分割中英文文本
  162. splitTextIntelligently(text) {
  163. if (!text || typeof text !== 'string') {
  164. return [text];
  165. }
  166. // 判断是否为中文文本(包含中文字符)
  167. const isChinese = /[\u4e00-\u9fa5]/.test(text);
  168. const maxLength = isChinese ? 200 : 400;
  169. // 如果文本长度不超过限制,直接返回
  170. if (text.length <= maxLength) {
  171. return [{
  172. text: text,
  173. startIndex: 0,
  174. endIndex: text.length - 1
  175. }];
  176. }
  177. const segments = [];
  178. let currentText = text;
  179. let globalStartIndex = 0;
  180. while (currentText.length > 0) {
  181. if (currentText.length <= maxLength) {
  182. // 剩余文本不超过限制,直接添加
  183. segments.push({
  184. text: currentText,
  185. startIndex: globalStartIndex,
  186. endIndex: globalStartIndex + currentText.length - 1
  187. });
  188. break;
  189. }
  190. // 在限制长度内寻找最佳分割点
  191. let splitIndex = maxLength;
  192. let bestSplitIndex = -1;
  193. // 优先寻找句号
  194. for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {
  195. const char = currentText[i];
  196. if (char === '。' || char === '.') {
  197. bestSplitIndex = i + 1; // 包含句号
  198. break;
  199. }
  200. }
  201. // 如果没找到句号,寻找逗号
  202. if (bestSplitIndex === -1) {
  203. for (let i = Math.min(maxLength, currentText.length - 1); i >= Math.max(0, maxLength - 50); i--) {
  204. const char = currentText[i];
  205. if (char === ',' || char === ',' || char === ';' || char === ';') {
  206. bestSplitIndex = i + 1; // 包含标点符号
  207. break;
  208. }
  209. }
  210. }
  211. // 如果还是没找到合适的分割点,使用默认长度
  212. if (bestSplitIndex === -1) {
  213. bestSplitIndex = maxLength;
  214. }
  215. // 提取当前段落
  216. const segment = currentText.substring(0, bestSplitIndex).trim();
  217. if (segment.length > 0) {
  218. segments.push({
  219. text: segment,
  220. startIndex: globalStartIndex,
  221. endIndex: globalStartIndex + segment.length - 1
  222. });
  223. }
  224. // 更新剩余文本和全局索引
  225. currentText = currentText.substring(bestSplitIndex).trim();
  226. globalStartIndex += bestSplitIndex;
  227. }
  228. console.log(`文本分割完成,原长度: ${text.length},分割为 ${segments.length} 段:`, segments);
  229. return segments;
  230. },
  231. // 分批次请求音频
  232. async requestAudioInBatches(text, voiceType) {
  233. const segments = this.splitTextIntelligently(text);
  234. const audioSegments = [];
  235. let totalDuration = 0;
  236. console.log(`开始分批次请求音频,共 ${segments.length}`);
  237. for (let i = 0; i < segments.length; i++) {
  238. const segment = segments[i];
  239. try {
  240. console.log(`请求第 ${i + 1}/${segments.length} 段音频:`, segment.text.substring(0, 50) + '...');
  241. const radioRes = await this.$api.music.textToVoice({
  242. text: segment.text,
  243. voiceType: voiceType,
  244. });
  245. if (radioRes.code === 200) {
  246. const audioUrl = radioRes.result.url;
  247. const duration = radioRes.result.time || 0;
  248. audioSegments.push({
  249. url: audioUrl,
  250. text: segment.text,
  251. duration: duration,
  252. startIndex: segment.startIndex,
  253. endIndex: segment.endIndex,
  254. segmentIndex: i,
  255. isSegmented: segments.length > 1,
  256. originalText: text
  257. });
  258. totalDuration += duration;
  259. console.log(`${i + 1} 段音频请求成功,时长: ${duration}`);
  260. } else {
  261. console.error(`${i + 1} 段音频请求失败:`, radioRes);
  262. // 即使某段失败,也继续处理其他段
  263. audioSegments.push({
  264. url: null,
  265. text: segment.text,
  266. duration: 0,
  267. startIndex: segment.startIndex,
  268. endIndex: segment.endIndex,
  269. segmentIndex: i,
  270. error: true,
  271. isSegmented: segments.length > 1,
  272. originalText: text
  273. });
  274. }
  275. } catch (error) {
  276. console.error(`${i + 1} 段音频请求异常:`, error);
  277. audioSegments.push({
  278. url: null,
  279. text: segment.text,
  280. duration: 0,
  281. startIndex: segment.startIndex,
  282. endIndex: segment.endIndex,
  283. segmentIndex: i,
  284. error: true,
  285. isSegmented: segments.length > 1,
  286. originalText: text
  287. });
  288. }
  289. // 每个请求之间间隔400ms,避免请求过于频繁
  290. if (i < segments.length - 1) {
  291. await new Promise(resolve => setTimeout(resolve, 400));
  292. }
  293. }
  294. console.log(`分批次音频请求完成,成功 ${audioSegments.filter(s => !s.error).length}/${segments.length}`);
  295. return {
  296. audioSegments: audioSegments,
  297. totalDuration: totalDuration,
  298. originalText: text
  299. };
  300. },
  301. // 获取当前页面的音频内容
  302. async getCurrentPageAudio() {
  303. // 检查缓存中是否已有当前页面的音频数据
  304. const cacheKey = `${this.courseId}_${this.currentPage}`;
  305. if (this.audioCache[cacheKey]) {
  306. console.log('从缓存加载音频数据:', cacheKey);
  307. // 从缓存加载音频数据
  308. this.currentPageAudios = this.audioCache[cacheKey].audios;
  309. this.totalTime = this.audioCache[cacheKey].totalDuration;
  310. this.currentAudioIndex = 0;
  311. this.isPlaying = false;
  312. this.currentTime = 0;
  313. this.hasAudioData = true;
  314. this.isAudioLoading = false;
  315. // 通知父组件音频状态变化
  316. this.$emit('audio-state-change', {
  317. hasAudioData: this.hasAudioData,
  318. isLoading: this.isAudioLoading,
  319. currentHighlightIndex: this.currentHighlightIndex
  320. });
  321. return;
  322. }
  323. // 开始加载状态
  324. this.isAudioLoading = true;
  325. this.hasAudioData = false;
  326. // 清空当前页面音频数组
  327. this.currentPageAudios = [];
  328. this.currentAudioIndex = 0;
  329. this.isPlaying = false;
  330. this.currentTime = 0;
  331. this.totalTime = 0;
  332. // 通知父组件开始加载
  333. this.$emit('audio-state-change', {
  334. hasAudioData: this.hasAudioData,
  335. isLoading: this.isAudioLoading,
  336. currentHighlightIndex: this.currentHighlightIndex
  337. });
  338. // 对着当前页面的每一个[]元素进行切割 如果是文本text类型则进行音频请求
  339. const currentPageData = this.bookPages[this.currentPage - 1];
  340. if (currentPageData) {
  341. // 收集所有text类型的元素
  342. const textItems = currentPageData.filter(item => item.type === 'text');
  343. if (textItems.length > 0) {
  344. let firstAudioPlayed = false; // 标记是否已播放第一个音频
  345. let loadedAudiosCount = 0; // 已加载的音频数量
  346. // 逐个处理文本项,支持长文本分割
  347. for (let index = 0; index < textItems.length; index++) {
  348. const item = textItems[index];
  349. try {
  350. console.log(`处理第 ${index + 1}/${textItems.length} 个文本项,长度: ${item.content.length}`);
  351. // 使用分批次请求音频
  352. const batchResult = await this.requestAudioInBatches(item.content, this.voiceId);
  353. if (batchResult.audioSegments.length > 0) {
  354. // 同时保存到原始数据中以保持兼容性(使用第一段的URL)
  355. const firstValidSegment = batchResult.audioSegments.find(seg => !seg.error);
  356. if (firstValidSegment) {
  357. item.audioUrl = firstValidSegment.url;
  358. }
  359. // 将所有音频段添加到音频数组
  360. for (const segment of batchResult.audioSegments) {
  361. if (!segment.error) {
  362. const audioData = {
  363. url: segment.url,
  364. text: segment.text,
  365. duration: segment.duration,
  366. startIndex: segment.startIndex,
  367. endIndex: segment.endIndex,
  368. segmentIndex: segment.segmentIndex,
  369. originalTextIndex: index, // 标记属于哪个原始文本项
  370. isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
  371. };
  372. this.currentPageAudios.push(audioData);
  373. loadedAudiosCount++;
  374. }
  375. }
  376. // 如果是第一个音频,立即开始播放
  377. if (!firstAudioPlayed && this.currentPageAudios.length > 0) {
  378. firstAudioPlayed = true;
  379. this.hasAudioData = true;
  380. this.currentAudioIndex = 0;
  381. console.log(`第一个音频时长: ${this.currentPageAudios[0].duration}`);
  382. // 通知父组件有音频数据了,但仍在加载中
  383. this.$emit('audio-state-change', {
  384. hasAudioData: this.hasAudioData,
  385. isLoading: this.isAudioLoading, // 保持加载状态
  386. currentHighlightIndex: this.currentHighlightIndex
  387. });
  388. // 立即创建音频实例并开始播放
  389. console.log('创建第一个音频实例并开始播放');
  390. this.createAudioInstance();
  391. // 等待音频实例准备好后开始播放
  392. setTimeout(() => {
  393. if (this.currentAudio && !this.isPlaying) {
  394. this.currentAudio.play();
  395. // isPlaying状态会在onPlay事件中自动设置
  396. this.updateHighlightIndex();
  397. }
  398. }, 100);
  399. }
  400. console.log(`文本项 ${index + 1} 处理完成,获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
  401. } else {
  402. console.error(`文本项 ${index + 1} 音频请求全部失败`);
  403. }
  404. } catch (error) {
  405. console.error(`文本项 ${index + 1} 处理异常:`, error);
  406. }
  407. }
  408. console.log('所有音频请求完成,共获取', this.currentPageAudios.length, '个音频');
  409. // 如果有音频,重新计算精确的总时长
  410. if (this.currentPageAudios.length > 0) {
  411. await this.calculateTotalDuration();
  412. // 将音频数据保存到缓存中
  413. const cacheKey = `${this.courseId}_${this.currentPage}`;
  414. this.audioCache[cacheKey] = {
  415. audios: [...this.currentPageAudios], // 深拷贝音频数组
  416. totalDuration: this.totalTime
  417. };
  418. console.log('音频数据已缓存:', cacheKey, this.audioCache[cacheKey]);
  419. // 限制缓存大小
  420. this.limitCacheSize(10);
  421. }
  422. }
  423. }
  424. // 结束加载状态
  425. this.isAudioLoading = false;
  426. // 设置音频数据状态
  427. this.hasAudioData = this.currentPageAudios.length > 0;
  428. // 通知父组件音频状态变化
  429. this.$emit('audio-state-change', {
  430. hasAudioData: this.hasAudioData,
  431. isLoading: this.isAudioLoading,
  432. currentHighlightIndex: this.currentHighlightIndex
  433. });
  434. },
  435. // 重置音频状态
  436. resetAudioState() {
  437. // 先暂停当前播放的音频
  438. if (this.isPlaying && this.currentAudio) {
  439. this.pauseAudio();
  440. console.log('翻页时暂停音频播放');
  441. }
  442. // 检查当前页面是否已有缓存的音频数据
  443. const pageKey = `${this.courseId}_${this.currentPage}`;
  444. const cachedAudio = this.audioCache[pageKey];
  445. if (cachedAudio && cachedAudio.audios && cachedAudio.audios.length > 0) {
  446. // 如果有缓存的音频数据,恢复音频状态
  447. this.currentPageAudios = cachedAudio.audios;
  448. this.totalTime = cachedAudio.totalDuration || 0;
  449. this.hasAudioData = true;
  450. // 自动播放预加载的音频
  451. console.log('检测到预加载音频,准备自动播放');
  452. this.$nextTick(() => {
  453. this.autoPlayPreloadedAudio();
  454. });
  455. } else {
  456. // 如果没有缓存的音频数据,重置为初始状态
  457. this.currentPageAudios = [];
  458. this.totalTime = 0;
  459. this.hasAudioData = false;
  460. }
  461. // 重置播放状态,翻頁時統一設置播放速度為1.0
  462. this.currentAudioIndex = 0;
  463. this.isPlaying = false;
  464. this.currentTime = 0;
  465. this.isAudioLoading = false;
  466. this.currentHighlightIndex = -1;
  467. // 翻頁時強制設置播放速度為1.0(適應微信小程序特性)
  468. this.playSpeed = 1.0;
  469. // 通知父组件音频状态变化
  470. this.$emit('audio-state-change', {
  471. hasAudioData: this.hasAudioData,
  472. isLoading: this.isAudioLoading,
  473. currentHighlightIndex: this.currentHighlightIndex
  474. });
  475. },
  476. // 手动获取音频
  477. async handleGetAudio() {
  478. // 检查是否有音色ID
  479. if (!this.voiceId) {
  480. uni.showToast({
  481. title: '音色未加载,请稍后重试',
  482. icon: 'none'
  483. });
  484. return;
  485. }
  486. // 检查当前页面是否有文本内容
  487. if (!this.isTextPage) {
  488. uni.showToast({
  489. title: '当前页面没有文本内容',
  490. icon: 'none'
  491. });
  492. return;
  493. }
  494. // 检查是否正在加载
  495. if (this.isAudioLoading) {
  496. return;
  497. }
  498. // 调用获取音频方法
  499. await this.getCurrentPageAudio();
  500. },
  501. // 计算音频总时长
  502. async calculateTotalDuration() {
  503. let totalDuration = 0;
  504. for (let i = 0; i < this.currentPageAudios.length; i++) {
  505. const audio = this.currentPageAudios[i];
  506. // 使用API返回的准确时长信息
  507. if (audio.duration && audio.duration > 0) {
  508. console.log(`使用API返回的准确时长 ${i + 1}:`, audio.duration, '秒');
  509. totalDuration += audio.duration;
  510. } else {
  511. // 如果没有时长信息,使用文字长度估算(备用方案)
  512. const textLength = audio.text.length;
  513. // 假设较快语速每分钟约300个字符,即每秒约5个字符
  514. const estimatedDuration = Math.max(1, textLength / 5);
  515. audio.duration = estimatedDuration;
  516. totalDuration += estimatedDuration;
  517. console.log(`备用估算音频时长 ${i + 1}:`, estimatedDuration, '秒 (文字长度:', textLength, ')');
  518. }
  519. }
  520. this.totalTime = totalDuration;
  521. console.log('音频总时长:', totalDuration, '秒');
  522. },
  523. // 获取音频时长
  524. getAudioDuration(audioUrl) {
  525. return new Promise((resolve, reject) => {
  526. const audio = uni.createInnerAudioContext();
  527. audio.src = audioUrl;
  528. let resolved = false;
  529. // 监听音频加载完成事件
  530. audio.onCanplay(() => {
  531. console.log('音频可以播放,duration:', audio.duration);
  532. if (!resolved && audio.duration && audio.duration > 0) {
  533. resolved = true;
  534. resolve(audio.duration);
  535. audio.destroy();
  536. }
  537. });
  538. // 监听音频元数据加载完成事件
  539. audio.onLoadedmetadata = () => {
  540. console.log('音频元数据加载完成,duration:', audio.duration);
  541. if (!resolved && audio.duration && audio.duration > 0) {
  542. resolved = true;
  543. resolve(audio.duration);
  544. audio.destroy();
  545. }
  546. };
  547. // 监听音频时长更新事件
  548. audio.onDurationChange = () => {
  549. console.log('音频时长更新,duration:', audio.duration);
  550. if (!resolved && audio.duration && audio.duration > 0) {
  551. resolved = true;
  552. resolve(audio.duration);
  553. audio.destroy();
  554. }
  555. };
  556. // 移除onPlay監聽器,避免意外播放
  557. audio.onError((error) => {
  558. console.error('音频加载失败:', error);
  559. if (!resolved) {
  560. resolved = true;
  561. reject(error);
  562. audio.destroy();
  563. }
  564. });
  565. // 設置較長的超時時間,但不播放音頻
  566. setTimeout(() => {
  567. if (!resolved) {
  568. console.log('無法獲取音頻時長,使用默認值');
  569. resolved = true;
  570. reject(new Error('無法獲取音頻時長'));
  571. audio.destroy();
  572. }
  573. }, 1000);
  574. // 最終超時處理
  575. setTimeout(() => {
  576. if (!resolved) {
  577. console.warn('獲取音頻時長超時,使用默認值');
  578. resolved = true;
  579. reject(new Error('获取音频时长超时'));
  580. audio.destroy();
  581. }
  582. }, 5000);
  583. });
  584. },
  585. // 音频控制方法
  586. togglePlay() {
  587. if (this.currentPageAudios.length === 0) {
  588. uni.showToast({
  589. title: '当前页面没有音频内容',
  590. icon: 'none'
  591. });
  592. return;
  593. }
  594. if (this.isPlaying) {
  595. this.pauseAudio();
  596. } else {
  597. this.playAudio();
  598. }
  599. },
  600. // 播放音频
  601. playAudio() {
  602. if (this.currentPageAudios.length === 0) return;
  603. // 如果没有当前音频实例或者需要切换音频
  604. if (!this.currentAudio || this.currentAudio.src !== this.currentPageAudios[this.currentAudioIndex].url) {
  605. this.createAudioInstance();
  606. // 创建实例后稍等一下再播放,确保音频准备就绪
  607. setTimeout(() => {
  608. if (this.currentAudio) {
  609. this.currentAudio.play();
  610. // isPlaying状态会在onPlay事件中自动设置
  611. this.updateHighlightIndex();
  612. }
  613. }, 50);
  614. } else {
  615. // 音频实例已存在,直接播放
  616. this.currentAudio.play();
  617. // isPlaying状态会在onPlay事件中自动设置
  618. this.updateHighlightIndex();
  619. }
  620. },
  621. // 暂停音频
  622. pauseAudio() {
  623. if (this.currentAudio) {
  624. this.currentAudio.pause();
  625. }
  626. this.isPlaying = false;
  627. // 暂停时清除高亮
  628. this.currentHighlightIndex = -1;
  629. // 通知父组件高亮状态变化
  630. this.emitHighlightChange(-1);
  631. },
  632. // 播放指定的音频段落(通过文本内容匹配)
  633. playSpecificAudio(textContent) {
  634. console.log('尝试播放指定音频段落:', textContent);
  635. // 检查textContent是否有效
  636. if (!textContent || typeof textContent !== 'string') {
  637. console.log('无效的文本内容:', textContent);
  638. uni.showToast({
  639. title: '无效的文本内容',
  640. icon: 'none'
  641. });
  642. return false;
  643. }
  644. // 在当前页面音频数组中查找匹配的音频
  645. let audioIndex = this.currentPageAudios.findIndex(audio =>
  646. audio.text && audio.text.trim() === textContent.trim()
  647. );
  648. // 如果直接匹配失败,尝试匹配分段音频
  649. if (audioIndex === -1) {
  650. console.log('直接匹配失败,尝试匹配分段音频');
  651. // 查找包含该文本的分段音频
  652. audioIndex = this.currentPageAudios.findIndex(audio => {
  653. if (!audio.text) return false;
  654. // 检查是否为分段音频,且原始文本包含目标文本
  655. if (audio.isSegmented && audio.originalText) {
  656. return audio.originalText.trim() === textContent.trim();
  657. }
  658. // 检查目标文本是否包含在当前音频文本中,或者当前音频文本包含在目标文本中
  659. const audioText = audio.text.trim();
  660. const targetText = textContent.trim();
  661. return audioText.includes(targetText) || targetText.includes(audioText);
  662. });
  663. if (audioIndex !== -1) {
  664. console.log('找到分段音频匹配,索引:', audioIndex);
  665. }
  666. }
  667. if (audioIndex !== -1) {
  668. console.log('找到匹配的音频,索引:', audioIndex);
  669. // 停止当前播放的音频
  670. if (this.currentAudio) {
  671. this.currentAudio.pause();
  672. this.currentAudio.destroy();
  673. this.currentAudio = null;
  674. }
  675. // 设置新的音频索引
  676. this.currentAudioIndex = audioIndex;
  677. // 重置播放状态
  678. this.isPlaying = false;
  679. this.currentTime = 0;
  680. this.sliderValue = 0;
  681. // 更新高亮索引
  682. this.currentHighlightIndex = audioIndex;
  683. this.emitHighlightChange(audioIndex);
  684. // 创建新的音频实例并播放
  685. this.createAudioInstance();
  686. // 稍等一下再播放,确保音频准备就绪
  687. setTimeout(() => {
  688. if (this.currentAudio) {
  689. this.currentAudio.play();
  690. console.log('开始播放指定音频段落');
  691. }
  692. }, 100);
  693. return true; // 成功找到并播放
  694. } else {
  695. console.log('未找到匹配的音频段落:', textContent);
  696. uni.showToast({
  697. title: '未找到对应的音频',
  698. icon: 'none'
  699. });
  700. return false; // 未找到匹配的音频
  701. }
  702. },
  703. // 创建音频实例
  704. createAudioInstance() {
  705. // 销毁之前的音频实例
  706. if (this.currentAudio) {
  707. this.currentAudio.pause();
  708. this.currentAudio.destroy();
  709. this.currentAudio = null;
  710. }
  711. // 重置播放状态
  712. this.isPlaying = false;
  713. // 優先使用微信原生API以支持playbackRate
  714. let audio;
  715. if (typeof wx !== 'undefined' && wx.createInnerAudioContext) {
  716. console.log('使用微信原生音頻API');
  717. audio = wx.createInnerAudioContext();
  718. } else {
  719. console.log('使用uni-app音頻API');
  720. audio = uni.createInnerAudioContext();
  721. }
  722. audio.src = this.currentPageAudios[this.currentAudioIndex].url;
  723. // 在音頻可以播放時檢測playbackRate支持
  724. audio.onCanplay(() => {
  725. console.log('🎵 音頻可以播放,開始檢測playbackRate支持');
  726. this.checkPlaybackRateSupport(audio);
  727. // 檢測完成後,設置用戶期望的播放速度
  728. setTimeout(() => {
  729. if (this.playbackRateSupported) {
  730. console.log('設置播放速度:', this.playSpeed);
  731. audio.playbackRate = this.playSpeed;
  732. // 驗證設置結果
  733. setTimeout(() => {
  734. console.log('最終播放速度:', audio.playbackRate);
  735. if (Math.abs(audio.playbackRate - this.playSpeed) > 0.01) {
  736. console.log('⚠️ 播放速度設置可能未生效');
  737. } else {
  738. console.log('✅ 播放速度設置成功');
  739. }
  740. }, 50);
  741. } else {
  742. console.log('❌ 當前環境不支持播放速度控制');
  743. }
  744. }, 50);
  745. });
  746. // 音频事件监听
  747. audio.onPlay(() => {
  748. console.log('音频开始播放');
  749. this.isPlaying = true;
  750. });
  751. audio.onPause(() => {
  752. console.log('音频暂停');
  753. this.isPlaying = false;
  754. });
  755. audio.onTimeUpdate(() => {
  756. this.updateCurrentTime();
  757. });
  758. audio.onEnded(() => {
  759. console.log('当前音频播放结束');
  760. this.onAudioEnded();
  761. });
  762. audio.onError((error) => {
  763. console.error('音频播放错误:', error);
  764. this.isPlaying = false;
  765. uni.showToast({
  766. title: '音频播放失败',
  767. icon: 'none'
  768. });
  769. });
  770. this.currentAudio = audio;
  771. },
  772. // 更新当前播放时间
  773. updateCurrentTime() {
  774. if (!this.currentAudio) return;
  775. let totalTime = 0;
  776. // 计算之前音频的总时长
  777. for (let i = 0; i < this.currentAudioIndex; i++) {
  778. totalTime += this.currentPageAudios[i].duration;
  779. }
  780. // 加上当前音频的播放时间
  781. totalTime += this.currentAudio.currentTime;
  782. this.currentTime = totalTime;
  783. // 如果不是正在拖動滑動條,則同步更新滑動條的值
  784. if (!this.isDragging) {
  785. this.sliderValue = this.currentTime;
  786. }
  787. // 更新当前高亮的文本索引
  788. this.updateHighlightIndex();
  789. },
  790. // 更新高亮文本索引
  791. updateHighlightIndex() {
  792. if (!this.isPlaying || this.currentPageAudios.length === 0) {
  793. this.currentHighlightIndex = -1;
  794. this.emitHighlightChange(-1);
  795. return;
  796. }
  797. // 获取当前播放的音频数据
  798. const currentAudio = this.currentPageAudios[this.currentAudioIndex];
  799. if (!currentAudio) {
  800. this.currentHighlightIndex = -1;
  801. this.emitHighlightChange(-1);
  802. return;
  803. }
  804. // 如果是分段音频,需要计算正确的高亮索引
  805. if (currentAudio.isSegmented && typeof currentAudio.originalTextIndex !== 'undefined') {
  806. // 使用原始文本项的索引作为高亮索引
  807. this.currentHighlightIndex = currentAudio.originalTextIndex;
  808. console.log('分段音频高亮索引:', this.currentHighlightIndex, '原始文本索引:', currentAudio.originalTextIndex, '段索引:', currentAudio.segmentIndex);
  809. } else {
  810. // 非分段音频,使用音频索引
  811. this.currentHighlightIndex = this.currentAudioIndex;
  812. console.log('普通音频高亮索引:', this.currentHighlightIndex, '当前音频索引:', this.currentAudioIndex);
  813. }
  814. // 使用辅助方法发送高亮变化事件
  815. this.emitHighlightChange(this.currentAudioIndex);
  816. },
  817. // 发送高亮变化事件的辅助方法
  818. emitHighlightChange(highlightIndex = -1) {
  819. if (highlightIndex === -1) {
  820. // 清除高亮
  821. this.$emit('highlight-change', -1);
  822. return;
  823. }
  824. // 获取对应的音频数据
  825. const audioData = this.currentPageAudios[highlightIndex];
  826. if (!audioData) {
  827. this.$emit('highlight-change', -1);
  828. return;
  829. }
  830. // 发送详细的高亮信息
  831. this.$emit('highlight-change', {
  832. highlightIndex: audioData.originalTextIndex !== undefined ? audioData.originalTextIndex : highlightIndex,
  833. isSegmented: audioData.isSegmented || false,
  834. segmentIndex: audioData.segmentIndex || 0,
  835. startIndex: audioData.startIndex || 0,
  836. endIndex: audioData.endIndex || 0,
  837. currentText: audioData.text || ''
  838. });
  839. },
  840. // 音频播放结束处理
  841. onAudioEnded() {
  842. if (this.currentAudioIndex < this.currentPageAudios.length - 1) {
  843. // 播放下一个音频
  844. this.currentAudioIndex++;
  845. this.playAudio();
  846. } else {
  847. // 所有音频播放完毕
  848. if (this.isLoop) {
  849. // 循环播放
  850. this.currentAudioIndex = 0;
  851. this.playAudio();
  852. } else {
  853. // 停止播放
  854. this.isPlaying = false;
  855. this.currentTime = this.totalTime;
  856. this.currentHighlightIndex = -1;
  857. this.$emit('highlight-change', -1);
  858. }
  859. }
  860. },
  861. toggleLoop() {
  862. this.isLoop = !this.isLoop;
  863. },
  864. toggleSpeed() {
  865. // 檢查是否支持播放速度控制
  866. if (!this.playbackRateSupported) {
  867. uni.showToast({
  868. title: '當前設備不支持播放速度控制',
  869. icon: 'none',
  870. duration: 2000
  871. });
  872. return;
  873. }
  874. const currentIndex = this.speedOptions.indexOf(this.playSpeed);
  875. const nextIndex = (currentIndex + 1) % this.speedOptions.length;
  876. const oldSpeed = this.playSpeed;
  877. this.playSpeed = this.speedOptions[nextIndex];
  878. console.log(`播放速度切換: ${oldSpeed}x -> ${this.playSpeed}x`);
  879. // 如果当前有音频在播放,更新播放速度
  880. if (this.currentAudio) {
  881. const wasPlaying = this.isPlaying;
  882. const currentTime = this.currentAudio.currentTime;
  883. // 設置新的播放速度
  884. this.currentAudio.playbackRate = this.playSpeed;
  885. // 如果正在播放,需要重啟播放才能使播放速度生效
  886. if (wasPlaying) {
  887. this.currentAudio.pause();
  888. setTimeout(() => {
  889. this.currentAudio.seek(currentTime);
  890. this.currentAudio.play();
  891. }, 50);
  892. }
  893. console.log('音頻實例播放速度已更新為:', this.currentAudio.playbackRate);
  894. // 顯示速度變更提示
  895. uni.showToast({
  896. title: `播放速度: ${this.playSpeed}x`,
  897. icon: 'none',
  898. duration: 1000
  899. });
  900. }
  901. },
  902. // 滑動條值實時更新 (@input 事件)
  903. onSliderInput(value) {
  904. // 在拖動過程中實時更新顯示的時間,但不影響實際播放
  905. if (this.isDragging) {
  906. // 可以在這裡實時更新顯示時間,讓用戶看到拖動到的時間點
  907. // 但不改變實際的 currentTime,避免影響播放邏輯
  908. console.log('實時更新滑動條值:', value);
  909. }
  910. },
  911. // 滑動條拖動過程中的處理 (@changing 事件)
  912. onSliderChanging(value) {
  913. // 第一次觸發 changing 事件時,暫停播放並標記為拖動狀態
  914. if (!this.isDragging) {
  915. if (this.isPlaying) {
  916. this.pauseAudio();
  917. console.log('開始拖動滑動條,暫停播放');
  918. }
  919. this.isDragging = true;
  920. }
  921. // 更新滑動條的值,但不改變實際播放位置
  922. this.sliderValue = value;
  923. console.log('拖動中,滑動條值:', value);
  924. },
  925. // 滑動條拖動結束的處理 (@change 事件)
  926. onSliderChange(value) {
  927. console.log('滑動條變化,跳轉到位置:', value, '是否為拖動:', this.isDragging);
  928. // 如果不是拖動狀態(即單點),需要先暫停播放
  929. if (!this.isDragging && this.isPlaying) {
  930. this.pauseAudio();
  931. console.log('單點滑動條,暫停播放');
  932. }
  933. // 重置拖動狀態
  934. this.isDragging = false;
  935. this.sliderValue = value;
  936. // 跳轉到指定位置,但不自動恢復播放
  937. this.seekToTime(value, false);
  938. console.log('滑動條操作完成,保持暫停狀態,需要手動點擊播放');
  939. },
  940. // 跳轉到指定時間
  941. seekToTime(targetTime, shouldResume = false) {
  942. if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
  943. console.log('沒有音頻數據,無法跳轉');
  944. return;
  945. }
  946. // 確保目標時間在有效範圍內
  947. targetTime = Math.max(0, Math.min(targetTime, this.totalTime));
  948. console.log('跳轉到時間:', targetTime, '秒', '總時長:', this.totalTime, '是否恢復播放:', shouldResume);
  949. let accumulatedTime = 0;
  950. let targetAudioIndex = -1;
  951. let targetAudioTime = 0;
  952. // 找到目標時間對應的音頻片段
  953. for (let i = 0; i < this.currentPageAudios.length; i++) {
  954. const audioDuration = this.currentPageAudios[i].duration || 0;
  955. console.log(`音頻片段 ${i}: 時長=${audioDuration}, 累計時間=${accumulatedTime}, 範圍=[${accumulatedTime}, ${accumulatedTime + audioDuration}]`);
  956. if (targetTime >= accumulatedTime && targetTime <= accumulatedTime + audioDuration) {
  957. targetAudioIndex = i;
  958. targetAudioTime = targetTime - accumulatedTime;
  959. break;
  960. }
  961. accumulatedTime += audioDuration;
  962. }
  963. // 如果沒有找到合適的音頻片段,使用最後一個
  964. if (targetAudioIndex === -1 && this.currentPageAudios.length > 0) {
  965. targetAudioIndex = this.currentPageAudios.length - 1;
  966. targetAudioTime = this.currentPageAudios[targetAudioIndex].duration || 0;
  967. console.log('使用最後一個音頻片段作為目標');
  968. }
  969. console.log('目標音頻索引:', targetAudioIndex, '目標音頻時間:', targetAudioTime);
  970. if (targetAudioIndex === -1) {
  971. console.error('無法找到目標音頻片段');
  972. return;
  973. }
  974. // 如果需要切換到不同的音頻片段
  975. if (targetAudioIndex !== this.currentAudioIndex) {
  976. console.log(`切換音頻片段: ${this.currentAudioIndex} -> ${targetAudioIndex}`);
  977. this.currentAudioIndex = targetAudioIndex;
  978. this.createAudioInstance();
  979. // 等待音頻實例創建完成後再跳轉
  980. this.waitForAudioReady(() => {
  981. if (this.currentAudio) {
  982. this.currentAudio.seek(targetAudioTime);
  983. this.currentTime = targetTime;
  984. console.log('切換音頻並跳轉到:', targetAudioTime, '秒');
  985. // 如果拖動前正在播放,則恢復播放
  986. if (shouldResume) {
  987. this.currentAudio.play();
  988. this.isPlaying = true;
  989. console.log('恢復播放狀態');
  990. }
  991. }
  992. });
  993. } else {
  994. // 在當前音頻片段內跳轉
  995. if (this.currentAudio) {
  996. this.currentAudio.seek(targetAudioTime);
  997. this.currentTime = targetTime;
  998. console.log('在當前音頻內跳轉到:', targetAudioTime, '秒');
  999. // 如果拖動前正在播放,則恢復播放
  1000. if (shouldResume) {
  1001. this.currentAudio.play();
  1002. this.isPlaying = true;
  1003. console.log('恢復播放狀態');
  1004. }
  1005. }
  1006. }
  1007. },
  1008. // 等待音頻實例準備就緒
  1009. waitForAudioReady(callback, maxAttempts = 10, currentAttempt = 0) {
  1010. if (currentAttempt >= maxAttempts) {
  1011. console.error('音頻實例準備超時');
  1012. return;
  1013. }
  1014. if (this.currentAudio && this.currentAudio.src) {
  1015. // 音頻實例已準備好
  1016. setTimeout(callback, 50); // 稍微延遲確保完全準備好
  1017. } else {
  1018. // 繼續等待
  1019. setTimeout(() => {
  1020. this.waitForAudioReady(callback, maxAttempts, currentAttempt + 1);
  1021. }, 100);
  1022. }
  1023. },
  1024. // 初始檢測播放速度支持(不依賴音頻實例)
  1025. checkInitialPlaybackRateSupport() {
  1026. try {
  1027. const systemInfo = uni.getSystemInfoSync();
  1028. console.log('初始檢測 - 系統信息:', systemInfo);
  1029. // 檢查基礎庫版本 - playbackRate需要2.11.0及以上
  1030. const SDKVersion = systemInfo.SDKVersion || '0.0.0';
  1031. const versionArray = SDKVersion.split('.').map(v => parseInt(v));
  1032. const isVersionSupported = versionArray[0] > 2 ||
  1033. (versionArray[0] === 2 && versionArray[1] > 11) ||
  1034. (versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
  1035. if (!isVersionSupported) {
  1036. this.playbackRateSupported = false;
  1037. console.log(`初始檢測 - 基礎庫版本過低 (${SDKVersion}),需要2.11.0及以上才支持播放速度控制`);
  1038. return;
  1039. }
  1040. // Android 6以下版本不支持
  1041. if (systemInfo.platform === 'android') {
  1042. const androidVersion = systemInfo.system.match(/Android (\d+)/);
  1043. if (androidVersion && parseInt(androidVersion[1]) < 6) {
  1044. this.playbackRateSupported = false;
  1045. console.log('初始檢測 - Android版本過低,需要Android 6及以上才支持播放速度控制');
  1046. return;
  1047. }
  1048. }
  1049. // 檢查微信原生API是否可用
  1050. if (typeof wx === 'undefined' || !wx.createInnerAudioContext) {
  1051. console.log('初始檢測 - 微信原生API不可用,可能影響playbackRate支持');
  1052. } else {
  1053. console.log('初始檢測 - 微信原生API可用');
  1054. }
  1055. // 如果通過基本檢測,暫時設為支持,等音頻實例創建後再詳細檢測
  1056. this.playbackRateSupported = true;
  1057. console.log('初始檢測 - 基本條件滿足,等待音頻實例檢測');
  1058. } catch (error) {
  1059. console.error('初始檢測播放速度支持時出錯:', error);
  1060. this.playbackRateSupported = false;
  1061. }
  1062. },
  1063. // 檢查播放速度控制支持
  1064. checkPlaybackRateSupport(audio) {
  1065. try {
  1066. // 檢查基礎庫版本和平台支持
  1067. const systemInfo = uni.getSystemInfoSync();
  1068. console.log('系統信息:', systemInfo);
  1069. console.log('平台:', systemInfo.platform);
  1070. console.log('基礎庫版本:', systemInfo.SDKVersion);
  1071. console.log('系統版本:', systemInfo.system);
  1072. // 根據uni-app文檔,微信小程序需要基礎庫2.11.0+才支持playbackRate
  1073. const SDKVersion = systemInfo.SDKVersion || '0.0.0';
  1074. const versionArray = SDKVersion.split('.').map(v => parseInt(v));
  1075. const isVersionSupported = versionArray[0] > 2 ||
  1076. (versionArray[0] === 2 && versionArray[1] > 11) ||
  1077. (versionArray[0] === 2 && versionArray[1] === 11 && versionArray[2] >= 0);
  1078. console.log('基礎庫版本檢查:', {
  1079. version: SDKVersion,
  1080. parsed: versionArray,
  1081. supported: isVersionSupported
  1082. });
  1083. if (!isVersionSupported) {
  1084. this.playbackRateSupported = false;
  1085. console.log(`❌ 基礎庫版本不支持 (${SDKVersion}),微信小程序需要2.11.0+才支持playbackRate`);
  1086. return;
  1087. }
  1088. // Android平台需要6.0+版本支持
  1089. if (systemInfo.platform === 'android') {
  1090. const androidVersion = systemInfo.system.match(/Android (\d+)/);
  1091. console.log('Android版本檢查:', androidVersion);
  1092. if (androidVersion && parseInt(androidVersion[1]) < 6) {
  1093. this.playbackRateSupported = false;
  1094. console.log(`❌ Android版本不支持 (${androidVersion[1]}),需要Android 6+才支持playbackRate`);
  1095. return;
  1096. }
  1097. }
  1098. // 檢查音頻實例是否支持playbackRate
  1099. console.log('🔍 音頻實例檢查:');
  1100. console.log('- playbackRate初始值:', audio.playbackRate);
  1101. console.log('- playbackRate類型:', typeof audio.playbackRate);
  1102. // 嘗試設置並檢測是否真正支持
  1103. const testRate = 1.25;
  1104. const originalRate = audio.playbackRate || 1.0;
  1105. try {
  1106. audio.playbackRate = testRate;
  1107. console.log('- 設置測試速度:', testRate);
  1108. console.log('- 設置後的值:', audio.playbackRate);
  1109. // 檢查設置是否生效
  1110. if (Math.abs(audio.playbackRate - testRate) < 0.01) {
  1111. this.playbackRateSupported = true;
  1112. console.log('✅ playbackRate功能正常');
  1113. } else {
  1114. this.playbackRateSupported = false;
  1115. console.log('❌ playbackRate設置無效,可能不被支持');
  1116. }
  1117. } catch (error) {
  1118. this.playbackRateSupported = false;
  1119. console.log('❌ playbackRate設置出錯:', error);
  1120. }
  1121. } catch (error) {
  1122. console.error('檢查播放速度支持時出錯:', error);
  1123. this.playbackRateSupported = false;
  1124. }
  1125. },
  1126. formatTime(seconds) {
  1127. const mins = Math.floor(seconds / 60);
  1128. const secs = Math.floor(seconds % 60);
  1129. return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  1130. },
  1131. // 清理音频缓存
  1132. clearAudioCache() {
  1133. this.audioCache = {};
  1134. console.log('音频缓存已清理');
  1135. },
  1136. // 限制缓存大小,保留最近访问的页面
  1137. limitCacheSize(maxSize = 10) {
  1138. const cacheKeys = Object.keys(this.audioCache);
  1139. if (cacheKeys.length > maxSize) {
  1140. // 删除最旧的缓存项
  1141. const keysToDelete = cacheKeys.slice(0, cacheKeys.length - maxSize);
  1142. keysToDelete.forEach(key => {
  1143. delete this.audioCache[key];
  1144. });
  1145. console.log('缓存大小已限制,删除了', keysToDelete.length, '个缓存项');
  1146. }
  1147. },
  1148. // 自動加載第一頁音頻並播放
  1149. async autoLoadAndPlayFirstPage() {
  1150. try {
  1151. console.log('開始自動加載第一頁音頻');
  1152. // 確保當前是第一頁且是文字頁面
  1153. if (this.currentPage === 1 && this.isTextPage) {
  1154. console.log('當前是第一頁文字頁面,開始加載音頻');
  1155. // 加載音頻
  1156. await this.getCurrentPageAudio();
  1157. // 檢查是否成功加載音頻
  1158. if (this.currentPageAudios && this.currentPageAudios.length > 0) {
  1159. console.log('音頻加載成功,getCurrentPageAudio已經自動播放第一個音頻');
  1160. // getCurrentPageAudio方法已經處理了第一個音頻的播放,這裡不需要再次調用playAudio
  1161. } else {
  1162. console.log('第一頁沒有音頻數據');
  1163. }
  1164. } else {
  1165. console.log('當前頁面不是第一頁文字頁面,跳過自動播放');
  1166. }
  1167. } catch (error) {
  1168. console.error('自動加載和播放音頻失敗:', error);
  1169. }
  1170. },
  1171. // 清理音频资源
  1172. destroyAudio() {
  1173. if (this.currentAudio) {
  1174. this.currentAudio.destroy();
  1175. this.currentAudio = null;
  1176. }
  1177. this.isPlaying = false;
  1178. this.clearAudioCache();
  1179. },
  1180. // 暂停音频(页面隐藏时调用)
  1181. pauseOnHide() {
  1182. this.pauseAudio();
  1183. },
  1184. // 开始预加载音频(由父组件调用)
  1185. async startPreloadAudio() {
  1186. if (this.isPreloading) {
  1187. console.log('已在预加载中,跳过');
  1188. return;
  1189. }
  1190. try {
  1191. console.log('开始预加载音频数据');
  1192. this.isPreloading = true;
  1193. this.preloadProgress = 0;
  1194. // 获取需要预加载的页面列表(当前页面后的几页)
  1195. const preloadPages = this.getPreloadPageList();
  1196. if (preloadPages.length === 0) {
  1197. console.log('没有需要预加载的页面');
  1198. this.isPreloading = false;
  1199. return;
  1200. }
  1201. console.log('需要预加载的页面:', preloadPages);
  1202. // 逐个预加载页面音频
  1203. for (let i = 0; i < preloadPages.length; i++) {
  1204. const pageInfo = preloadPages[i];
  1205. try {
  1206. console.log(`开始预加载第${pageInfo.pageIndex + 1}页音频`);
  1207. await this.preloadPageAudio(pageInfo.pageIndex, pageInfo.pageData);
  1208. // 更新预加载进度
  1209. this.preloadProgress = Math.round(((i + 1) / preloadPages.length) * 100);
  1210. console.log(`预加载进度: ${this.preloadProgress}%`);
  1211. // 延迟一下,避免请求过于频繁
  1212. await new Promise(resolve => setTimeout(resolve, 600));
  1213. } catch (error) {
  1214. console.error(`预加载第${pageInfo.pageIndex + 1}页音频失败:`, error);
  1215. // 继续预加载其他页面
  1216. }
  1217. }
  1218. console.log('音频预加载完成');
  1219. } catch (error) {
  1220. console.error('预加载音频失败:', error);
  1221. } finally {
  1222. this.isPreloading = false;
  1223. this.preloadProgress = 100;
  1224. }
  1225. },
  1226. // 获取需要预加载的页面列表
  1227. getPreloadPageList() {
  1228. const preloadPages = [];
  1229. const maxPreloadPages = 3; // 优化:最多预加载3页,减少服务器压力
  1230. // 从当前页面的下一页开始预加载
  1231. for (let i = this.currentPage; i < Math.min(this.currentPage + maxPreloadPages, this.bookPages.length); i++) {
  1232. const pageData = this.bookPages[i];
  1233. // 检查页面是否有文本内容且未缓存
  1234. if (pageData && pageData.length > 0) {
  1235. const hasTextContent = pageData.some(item => item.type === 'text' && item.content);
  1236. const cacheKey = `${this.courseId}_${i + 1}`;
  1237. const isAlreadyCached = this.audioCache[cacheKey];
  1238. if (hasTextContent && !isAlreadyCached) {
  1239. preloadPages.push({
  1240. pageIndex: i,
  1241. pageData: pageData
  1242. });
  1243. }
  1244. }
  1245. }
  1246. return preloadPages;
  1247. },
  1248. // 预加载单个页面的音频
  1249. async preloadPageAudio(pageIndex, pageData) {
  1250. const cacheKey = `${this.courseId}_${pageIndex + 1}`;
  1251. // 检查是否已经缓存
  1252. if (this.audioCache[cacheKey]) {
  1253. console.log(`${pageIndex + 1}页音频已缓存,跳过`);
  1254. return;
  1255. }
  1256. // 收集页面中的文本内容
  1257. const textItems = pageData.filter(item => item.type === 'text' && item.content);
  1258. if (textItems.length === 0) {
  1259. console.log(`${pageIndex + 1}页没有文本内容,跳过`);
  1260. return;
  1261. }
  1262. console.log(`${pageIndex + 1}页有${textItems.length}个文本段落需要预加载`);
  1263. const audioArray = [];
  1264. let totalDuration = 0;
  1265. // 逐个处理文本项,支持长文本分割
  1266. for (let i = 0; i < textItems.length; i++) {
  1267. const item = textItems[i];
  1268. try {
  1269. console.log(`${pageIndex + 1}页处理第 ${i + 1}/${textItems.length} 个文本项,长度: ${item.content.length}`);
  1270. // 使用分批次请求音频
  1271. const batchResult = await this.requestAudioInBatches(item.content, this.voiceId);
  1272. if (batchResult.audioSegments.length > 0) {
  1273. // 将所有音频段添加到音频数组
  1274. for (const segment of batchResult.audioSegments) {
  1275. if (!segment.error) {
  1276. audioArray.push({
  1277. url: segment.url,
  1278. text: segment.text,
  1279. duration: segment.duration,
  1280. startIndex: segment.startIndex,
  1281. endIndex: segment.endIndex,
  1282. segmentIndex: segment.segmentIndex,
  1283. originalTextIndex: i, // 标记属于哪个原始文本项
  1284. isSegmented: batchResult.audioSegments.length > 1 // 标记是否为分段音频
  1285. });
  1286. totalDuration += segment.duration;
  1287. }
  1288. }
  1289. console.log(`${pageIndex + 1}页第${i + 1}个文本项预加载完成,获得 ${batchResult.audioSegments.filter(s => !s.error).length} 个音频段`);
  1290. } else {
  1291. console.error(`${pageIndex + 1}页第${i + 1}个文本项音频预加载全部失败`);
  1292. }
  1293. } catch (error) {
  1294. console.error(`${pageIndex + 1}页第${i + 1}个文本项处理异常:`, error);
  1295. }
  1296. // 每个文本项处理之间间隔600ms,避免请求过于频繁
  1297. if (i < textItems.length - 1) {
  1298. await new Promise(resolve => setTimeout(resolve, 600));
  1299. }
  1300. }
  1301. // 保存到缓存
  1302. if (audioArray.length > 0) {
  1303. this.audioCache[cacheKey] = {
  1304. audios: audioArray,
  1305. totalDuration: totalDuration
  1306. };
  1307. console.log(`${pageIndex + 1}页音频预加载完成,共${audioArray.length}个音频,总时长: ${totalDuration}`);
  1308. // 限制缓存大小
  1309. this.limitCacheSize(10);
  1310. }
  1311. },
  1312. // 检查指定页面是否有音频缓存
  1313. checkAudioCache(pageNumber) {
  1314. const cacheKey = `${this.courseId}_${pageNumber}`;
  1315. const cachedData = this.audioCache[cacheKey];
  1316. if (cachedData && cachedData.audios && cachedData.audios.length > 0) {
  1317. console.log(`${pageNumber}页音频已缓存,共${cachedData.audios.length}个音频`);
  1318. return true;
  1319. }
  1320. console.log(`${pageNumber}页音频未缓存`);
  1321. return false;
  1322. },
  1323. // 自动播放已缓存的音频
  1324. async autoPlayCachedAudio() {
  1325. try {
  1326. const cacheKey = `${this.courseId}_${this.currentPage}`;
  1327. const cachedData = this.audioCache[cacheKey];
  1328. if (!cachedData || !cachedData.audios || cachedData.audios.length === 0) {
  1329. console.log('当前页面没有缓存的音频');
  1330. return;
  1331. }
  1332. console.log(`开始自动播放第${this.currentPage}页的缓存音频`);
  1333. // 停止当前播放的音频
  1334. this.pauseAudio();
  1335. // 设置当前页面的音频数据
  1336. this.currentPageAudios = cachedData.audios;
  1337. this.totalDuration = cachedData.totalDuration;
  1338. // 重置播放状态
  1339. this.currentAudioIndex = 0;
  1340. this.currentTime = 0;
  1341. this.isPlaying = false;
  1342. // 延迟一下再开始播放,确保UI更新完成
  1343. setTimeout(() => {
  1344. this.playAudio();
  1345. }, 300);
  1346. } catch (error) {
  1347. console.error('自动播放缓存音频失败:', error);
  1348. }
  1349. }
  1350. },
  1351. mounted() {
  1352. // 初始檢測播放速度支持
  1353. this.checkInitialPlaybackRateSupport();
  1354. // 监听音色切换事件
  1355. uni.$on('selectVoice', (voiceId) => {
  1356. console.log('音色切換:', this.voiceId, '->', voiceId);
  1357. // 音色切換時清除所有音頻緩存,因為不同音色的音頻文件不同
  1358. this.clearAudioCache();
  1359. // 停止當前播放的音頻
  1360. if (this.currentAudio) {
  1361. this.currentAudio.destroy();
  1362. this.currentAudio = null;
  1363. }
  1364. // 重置音頻狀態
  1365. this.currentPageAudios = [];
  1366. this.totalTime = 0;
  1367. this.hasAudioData = false;
  1368. this.isPlaying = false;
  1369. this.currentTime = 0;
  1370. this.currentAudioIndex = 0;
  1371. this.currentHighlightIndex = -1;
  1372. this.sliderValue = 0;
  1373. this.isDragging = false;
  1374. // 通知父组件音频状态变化
  1375. this.$emit('audio-state-change', {
  1376. hasAudioData: this.hasAudioData,
  1377. isLoading: this.isAudioLoading,
  1378. currentHighlightIndex: this.currentHighlightIndex
  1379. });
  1380. // 重新請求當前頁面的音頻數據
  1381. if (this.isTextPage) {
  1382. console.log('音色切換後重新獲取音頻數據');
  1383. this.handleGetAudio();
  1384. }
  1385. });
  1386. },
  1387. // 自动播放预加载的音频
  1388. async autoPlayPreloadedAudio() {
  1389. try {
  1390. // 检查是否有音频数据
  1391. if (!this.hasAudioData || this.currentPageAudios.length === 0) {
  1392. console.log('没有可播放的音频数据');
  1393. return;
  1394. }
  1395. // 检查第一个音频是否有效
  1396. const firstAudio = this.currentPageAudios[0];
  1397. if (!firstAudio || !firstAudio.url) {
  1398. console.log('第一个音频无效');
  1399. return;
  1400. }
  1401. console.log('开始自动播放预加载音频');
  1402. // 重置播放状态
  1403. this.currentAudioIndex = 0;
  1404. this.currentTime = 0;
  1405. this.sliderValue = 0;
  1406. this.currentHighlightIndex = 0;
  1407. // 创建音频实例
  1408. this.createAudioInstance();
  1409. // 稍等一下再播放,确保音频准备就绪
  1410. setTimeout(() => {
  1411. if (this.currentAudio && !this.isPlaying) {
  1412. this.currentAudio.play();
  1413. console.log('预加载音频自动播放成功');
  1414. }
  1415. }, 200);
  1416. } catch (error) {
  1417. console.error('自动播放预加载音频失败:', error);
  1418. }
  1419. },
  1420. beforeDestroy() {
  1421. // 清理事件监听
  1422. uni.$off('selectVoice');
  1423. // 清理音频资源
  1424. this.destroyAudio();
  1425. }
  1426. }
  1427. </script>
  1428. <style lang="scss" scoped>
  1429. /* 音频控制栏样式 */
  1430. .audio-controls-wrapper {
  1431. position: relative;
  1432. z-index: 10;
  1433. }
  1434. .audio-controls {
  1435. background: #fff;
  1436. padding: 20rpx 40rpx;
  1437. border-bottom: 1rpx solid #eee;
  1438. transition: transform 0.3s ease;
  1439. position: relative;
  1440. z-index: 10;
  1441. &.audio-hidden {
  1442. transform: translateY(100%);
  1443. }
  1444. }
  1445. .audio-time {
  1446. display: flex;
  1447. align-items: center;
  1448. margin-bottom: 20rpx;
  1449. }
  1450. .time-text {
  1451. font-size: 28rpx;
  1452. color: #999;
  1453. min-width: 80rpx;
  1454. }
  1455. .progress-container {
  1456. flex: 1;
  1457. margin: 0 20rpx;
  1458. }
  1459. .audio-controls-row {
  1460. display: flex;
  1461. align-items: center;
  1462. justify-content: space-between;
  1463. }
  1464. .control-btn {
  1465. display: flex;
  1466. align-items: center;
  1467. padding: 10rpx;
  1468. gap: 8rpx;
  1469. }
  1470. .control-btn.disabled {
  1471. pointer-events: none;
  1472. opacity: 0.6;
  1473. }
  1474. .control-text {
  1475. font-size: 28rpx;
  1476. color: #4A4A4A;
  1477. }
  1478. .play-btn {
  1479. display: flex;
  1480. align-items: center;
  1481. justify-content: center;
  1482. padding: 10rpx;
  1483. }
  1484. /* 音频加载状态样式 */
  1485. .audio-loading-container {
  1486. background: #fff;
  1487. padding: 40rpx;
  1488. border-bottom: 1rpx solid #eee;
  1489. display: flex;
  1490. flex-direction: column;
  1491. align-items: center;
  1492. justify-content: center;
  1493. gap: 20rpx;
  1494. position: relative;
  1495. z-index: 10;
  1496. }
  1497. /* 加载指示器样式 */
  1498. .loading-indicator {
  1499. display: flex;
  1500. align-items: center;
  1501. justify-content: center;
  1502. gap: 10rpx;
  1503. padding: 10rpx 20rpx;
  1504. background: rgba(6, 218, 220, 0.1);
  1505. border-radius: 20rpx;
  1506. margin-bottom: 10rpx;
  1507. }
  1508. .loading-indicator-text {
  1509. font-size: 24rpx;
  1510. color: #06DADC;
  1511. }
  1512. .loading-text {
  1513. font-size: 28rpx;
  1514. color: #999;
  1515. }
  1516. /* 获取音频按钮样式 */
  1517. .audio-get-button-container {
  1518. background: rgba(255, 255, 255, 0.95);
  1519. backdrop-filter: blur(10px);
  1520. padding: 30rpx;
  1521. border-radius: 20rpx;
  1522. border: 2rpx solid #E5E5E5;
  1523. transition: all 0.3s ease;
  1524. position: relative;
  1525. z-index: 10;
  1526. }
  1527. .get-audio-btn {
  1528. display: flex;
  1529. align-items: center;
  1530. justify-content: center;
  1531. gap: 16rpx;
  1532. padding: 20rpx 40rpx;
  1533. background: linear-gradient(135deg, #06DADC 0%, #04B8BA 100%);
  1534. border-radius: 50rpx;
  1535. box-shadow: 0 8rpx 20rpx rgba(6, 218, 220, 0.3);
  1536. transition: all 0.3s ease;
  1537. }
  1538. .get-audio-btn:active {
  1539. transform: scale(0.95);
  1540. box-shadow: 0 4rpx 10rpx rgba(6, 218, 220, 0.2);
  1541. }
  1542. /* 音频预加载提示样式 */
  1543. .audio-preloaded-container {
  1544. display: flex;
  1545. justify-content: center;
  1546. align-items: center;
  1547. padding: 20rpx;
  1548. transition: all 0.3s ease;
  1549. position: relative;
  1550. z-index: 10;
  1551. }
  1552. .preloaded-tip {
  1553. display: flex;
  1554. align-items: center;
  1555. justify-content: center;
  1556. gap: 16rpx;
  1557. padding: 20rpx 40rpx;
  1558. background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  1559. border-radius: 50rpx;
  1560. box-shadow: 0 8rpx 20rpx rgba(82, 196, 26, 0.3);
  1561. transition: all 0.3s ease;
  1562. }
  1563. .preloaded-text {
  1564. color: #ffffff;
  1565. font-size: 28rpx;
  1566. font-weight: 500;
  1567. }
  1568. .get-audio-text {
  1569. font-size: 32rpx;
  1570. color: #FFFFFF;
  1571. font-weight: 500;
  1572. }
  1573. </style>