Browse Source

perf(audio): 优化音频预加载和播放逻辑

- 减少预加载延迟时间从800ms到0ms,提高预加载效率
- 音频延迟时间从1500ms减少到800ms,提高响应速度
- 添加跳过导语音频功能,优先播放非导语音频
- 优化音频请求间隔时间,从300ms减少到150ms
main
前端-胡立永 1 day ago
parent
commit
05b99da79e
2 changed files with 93 additions and 39 deletions
  1. +89
    -33
      subPages/home/AudioControls.vue
  2. +4
    -6
      subPages/home/book.vue

+ 89
- 33
subPages/home/AudioControls.vue View File

@ -272,6 +272,26 @@ export default {
} }
}, },
methods: { methods: {
//
findFirstNonLeadAudio() {
if (!this.currentPageAudios || this.currentPageAudios.length === 0) {
return -1;
}
//
for (let i = 0; i < this.currentPageAudios.length; i++) {
const audioData = this.currentPageAudios[i];
if (audioData && !audioData.isLead) {
console.log(`🎵 findFirstNonLeadAudio: 找到第一个非导语音频,索引=${i}, isLead=${audioData.isLead}`);
return i;
}
}
//
console.log('🎵 findFirstNonLeadAudio: 所有音频都是导语,返回第一个音频索引=0');
return 0;
},
// //
checkAndLoadPreloadedAudio() { checkAndLoadPreloadedAudio() {
// //
@ -317,22 +337,29 @@ export default {
// //
this.$nextTick(() => { this.$nextTick(() => {
if (this.currentPageAudios.length > 0 && !this.isVoiceChanging) { if (this.currentPageAudios.length > 0 && !this.isVoiceChanging) {
const firstAudioData = this.currentPageAudios[0];
console.log(`🎵 自动播放缓存音频: ${firstAudioData.url}`);
audioManager.playAudio(firstAudioData.url, 'sentence', { playbackRate: this.playSpeed });
this.isPlaying = true;
//
const highlightIndex = firstAudioData.originalTextIndex !== undefined ? firstAudioData.originalTextIndex : 0;
this.currentHighlightIndex = highlightIndex;
//
this.emitHighlightChange(highlightIndex, firstAudioData);
//
this.emitScrollToText(highlightIndex, firstAudioData);
console.log(`🎵 页面切换自动播放: 高亮索引=${highlightIndex}, 页面=${this.currentPage}`);
//
const firstNonLeadIndex = this.findFirstNonLeadAudio();
if (firstNonLeadIndex >= 0 && firstNonLeadIndex < this.currentPageAudios.length) {
//
this.currentAudioIndex = firstNonLeadIndex;
const firstAudioData = this.currentPageAudios[firstNonLeadIndex];
console.log(`🎵 自动播放缓存音频(跳过导语): 索引=${firstNonLeadIndex}, isLead=${firstAudioData.isLead}, url=${firstAudioData.url}`);
audioManager.playAudio(firstAudioData.url, 'sentence', { playbackRate: this.playSpeed });
this.isPlaying = true;
//
const highlightIndex = firstAudioData.originalTextIndex !== undefined ? firstAudioData.originalTextIndex : firstNonLeadIndex;
this.currentHighlightIndex = highlightIndex;
//
this.emitHighlightChange(highlightIndex, firstAudioData);
//
this.emitScrollToText(highlightIndex, firstAudioData);
console.log(`🎵 页面切换自动播放(跳过导语): 高亮索引=${highlightIndex}, 页面=${this.currentPage}`);
}
} }
}); });
} else { } else {
@ -431,8 +458,6 @@ export default {
let totalDuration = 0; let totalDuration = 0;
const requestId = this.currentRequestId; // ID const requestId = this.currentRequestId; // ID
for (let i = 0; i < segments.length; i++) { for (let i = 0; i < segments.length; i++) {
// //
if (this.shouldCancelRequest || this.currentRequestId !== requestId) { if (this.shouldCancelRequest || this.currentRequestId !== requestId) {
@ -518,9 +543,6 @@ export default {
// 🎯 ID // 🎯 ID
if (!this.localVoiceId || this.localVoiceId === '' || this.localVoiceId === null || this.localVoiceId === undefined) { if (!this.localVoiceId || this.localVoiceId === '' || this.localVoiceId === null || this.localVoiceId === undefined) {
// //
this.isAudioLoading = false; this.isAudioLoading = false;
this.audioLoadFailed = true; this.audioLoadFailed = true;
@ -732,12 +754,20 @@ export default {
currentHighlightIndex: this.currentHighlightIndex currentHighlightIndex: this.currentHighlightIndex
}); });
// 使audioManager
const firstAudioData = this.currentPageAudios[0];
// 使audioManager
if (autoPlay || !this.isVoiceChanging) { if (autoPlay || !this.isVoiceChanging) {
audioManager.playAudio(firstAudioData.url, 'sentence', { playbackRate: this.playSpeed });
this.isPlaying = true;
this.updateHighlightIndex();
//
const firstNonLeadIndex = this.findFirstNonLeadAudio();
if (firstNonLeadIndex >= 0 && firstNonLeadIndex < this.currentPageAudios.length) {
//
this.currentAudioIndex = firstNonLeadIndex;
const firstAudioData = this.currentPageAudios[firstNonLeadIndex];
console.log(`🎵 getCurrentPageAudio 自动播放(跳过导语): 索引=${firstNonLeadIndex}, isLead=${firstAudioData.isLead}`);
audioManager.playAudio(firstAudioData.url, 'sentence', { playbackRate: this.playSpeed });
this.isPlaying = true;
this.updateHighlightIndex();
}
} }
} }
@ -1098,14 +1128,40 @@ export default {
return; return;
} }
//
if (this.currentAudioIndex < 0 || this.currentAudioIndex >= this.currentPageAudios.length) { if (this.currentAudioIndex < 0 || this.currentAudioIndex >= this.currentPageAudios.length) {
console.error('🎵 playAudio: 音频索引无效', this.currentAudioIndex);
return;
console.log('🎵 playAudio: 音频索引无效,重置为第一个非导语音频');
this.currentAudioIndex = this.findFirstNonLeadAudio();
if (this.currentAudioIndex < 0) {
console.error('🎵 playAudio: 找不到有效的音频');
return;
}
} }
let currentAudioData = this.currentPageAudios[this.currentAudioIndex]; let currentAudioData = this.currentPageAudios[this.currentAudioIndex];
//
if (currentAudioData && currentAudioData.isLead) {
console.log(`🎵 playAudio: 当前音频是导语(索引=${this.currentAudioIndex}),查找下一个非导语音频`);
//
let nextNonLeadIndex = -1;
for (let i = this.currentAudioIndex; i < this.currentPageAudios.length; i++) {
const audioData = this.currentPageAudios[i];
if (audioData && !audioData.isLead) {
nextNonLeadIndex = i;
break;
}
}
if (nextNonLeadIndex >= 0) {
this.currentAudioIndex = nextNonLeadIndex;
currentAudioData = this.currentPageAudios[this.currentAudioIndex];
console.log(`🎵 playAudio: 跳转到非导语音频,新索引=${this.currentAudioIndex}, isLead=${currentAudioData.isLead}`);
} else {
console.warn('🎵 playAudio: 没有找到非导语音频,播放当前音频');
}
}
if (!currentAudioData || !currentAudioData.url) { if (!currentAudioData || !currentAudioData.url) {
console.error('🎵 playAudio: 音频数据无效', currentAudioData); console.error('🎵 playAudio: 音频数据无效', currentAudioData);
@ -2518,7 +2574,7 @@ export default {
// //
if (i < allTextPages.length - 1) { if (i < allTextPages.length - 1) {
await new Promise(resolve => setTimeout(resolve, 200));
await new Promise(resolve => setTimeout(resolve, 100));
} }
} catch (error) { } catch (error) {
console.error(`预加载第 ${pageInfo.pageIndex} 页音频失败:`, error); console.error(`预加载第 ${pageInfo.pageIndex} 页音频失败:`, error);
@ -2572,7 +2628,7 @@ export default {
// //
await new Promise(resolve => setTimeout(resolve, 300));
await new Promise(resolve => setTimeout(resolve, 150));
} catch (error) { } catch (error) {
console.error(`预加载第${pageInfo.pageIndex + 1}页音频失败:`, error); console.error(`预加载第${pageInfo.pageIndex + 1}页音频失败:`, error);
@ -2693,9 +2749,9 @@ export default {
console.error(`${pageIndex + 1}页第${i + 1}个文本项处理异常:`, error); console.error(`${pageIndex + 1}页第${i + 1}个文本项处理异常:`, error);
} }
// 300ms
// 150ms
if (i < textItems.length - 1) { if (i < textItems.length - 1) {
await new Promise(resolve => setTimeout(resolve, 300));
await new Promise(resolve => setTimeout(resolve, 150));
} }
} }


+ 4
- 6
subPages/home/book.vue View File

@ -1941,12 +1941,10 @@ export default {
for (let i = 1; i <= preloadCount; i++) { for (let i = 1; i <= preloadCount; i++) {
if (i < this.courseIdList.length && this.bookPages[i].length === 0) { if (i < this.courseIdList.length && this.bookPages[i].length === 0) {
try { try {
await this.preloadSinglePage(this.courseIdList[i], i); await this.preloadSinglePage(this.courseIdList[i], i);
// 800ms
// 400ms
if (i < preloadCount) { if (i < preloadCount) {
await new Promise(resolve => setTimeout(resolve, 800));
await new Promise(resolve => setTimeout(resolve, 0));
} }
} catch (error) { } catch (error) {
console.error(`预加载第${i + 1}页失败:`, error); console.error(`预加载第${i + 1}页失败:`, error);
@ -1957,12 +1955,12 @@ export default {
// 1.5AudioControls
// 800msAudioControls
setTimeout(() => { setTimeout(() => {
if (this.$refs.customTabbar && this.$refs.customTabbar.$refs.audioControls) { if (this.$refs.customTabbar && this.$refs.customTabbar.$refs.audioControls) {
this.$refs.customTabbar.$refs.audioControls.startPreloadAudio(); this.$refs.customTabbar.$refs.audioControls.startPreloadAudio();
} }
}, 1500);
}, 800);
} catch (error) { } catch (error) {
console.error('预加载页面内容失败:', error); console.error('预加载页面内容失败:', error);


Loading…
Cancel
Save