Browse Source

refactor: 移除调试日志并优化音频控制逻辑

移除多个组件中的调试console.log语句,优化AudioControls组件的音频播放逻辑:
1. 实现HTML5 Audio包装器以支持跨平台倍速播放
2. 改进音频匹配策略,增加首字符匹配作为后备方案
3. 优化错误处理,减少不必要的用户提示
4. 增强音频加载状态管理,添加自动重试机制
hfll
hflllll 2 weeks ago
parent
commit
ae006e956d
6 changed files with 396 additions and 109 deletions
  1. +261
    -46
      subPages/home/AudioControls.vue
  2. +128
    -56
      subPages/home/book.vue
  3. +2
    -2
      subPages/home/music.vue
  4. +2
    -2
      subPages/home/plan.vue
  5. +2
    -2
      subPages/home/search.vue
  6. +1
    -1
      subPages/home/submit.vue

+ 261
- 46
subPages/home/AudioControls.vue View File

@ -178,14 +178,14 @@ export default {
// ID
if (cachedData.voiceId && cachedData.voiceId !== this.localVoiceId) {
console.warn('缓存音色不匹配:', cachedData.voiceId, '!=', this.localVoiceId);
// console.warn(':', cachedData.voiceId, '!=', this.localVoiceId);
return false;
}
// URL
const firstAudio = cachedData.audios[0];
if (!firstAudio || !firstAudio.url) {
console.warn('缓存音频数据无效');
// console.warn('');
return false;
}
@ -207,7 +207,7 @@ export default {
//
if (!hasCache) {
console.log('当前页面可能正在预加载中,页面:', this.currentPage, '缓存状态:', hasCache);
// console.log(':', this.currentPage, ':', hasCache);
return true;
}
}
@ -219,7 +219,7 @@ export default {
currentPage: {
handler(newPage, oldPage) {
if (newPage !== oldPage) {
console.log('页面切换:', oldPage, '->', newPage);
// console.log(':', oldPage, '->', newPage);
//
this.isPageChanging = true;
@ -249,7 +249,7 @@ export default {
voiceId: {
handler(newVoiceId, oldVoiceId) {
if (newVoiceId !== oldVoiceId) {
console.log('🎵 音色ID变化:', oldVoiceId, '->', newVoiceId);
// console.log('🎵 ID:', oldVoiceId, '->', newVoiceId);
// ID
this.localVoiceId = newVoiceId;
}
@ -258,6 +258,129 @@ export default {
}
},
methods: {
// HTML5 Audiouni-app
createHTML5Audio() {
const audio = new Audio();
// uni-app
const wrappedAudio = {
// HTML5 Audio
_nativeAudio: audio,
//
get src() { return audio.src; },
set src(value) { audio.src = value; },
get duration() { return audio.duration || 0; },
get currentTime() { return audio.currentTime || 0; },
get paused() { return audio.paused; },
//
get playbackRate() { return audio.playbackRate; },
set playbackRate(value) {
try {
audio.playbackRate = value;
// console.log(`🎵 HTML5 Audio: ${value}x`);
} catch (error) {
console.error('❌ HTML5 Audio倍速设置失败:', error);
}
},
//
play() {
return audio.play().catch(error => {
console.error('HTML5 Audio播放失败:', error);
});
},
pause() {
audio.pause();
},
stop() {
audio.pause();
audio.currentTime = 0;
},
seek(time) {
audio.currentTime = time;
},
destroy() {
audio.pause();
audio.src = '';
audio.load();
},
//
onCanplay(callback) {
audio.addEventListener('canplay', callback);
},
onPlay(callback) {
audio.addEventListener('play', callback);
},
onPause(callback) {
audio.addEventListener('pause', callback);
},
onEnded(callback) {
audio.addEventListener('ended', callback);
},
onTimeUpdate(callback) {
audio.addEventListener('timeupdate', callback);
},
onError(callback) {
//
const wrappedCallback = (error) => {
// src
if (audio.src && audio.src.trim() !== '' && !audio.paused) {
callback(error);
} else {
console.log('🔇 HTML5 Audio错误(已忽略):', {
hasSrc: !!audio.src,
paused: audio.paused,
errorType: error.type || 'unknown'
});
}
};
audio.addEventListener('error', wrappedCallback);
},
//
offCanplay(callback) {
audio.removeEventListener('canplay', callback);
},
offPlay(callback) {
audio.removeEventListener('play', callback);
},
offPause(callback) {
audio.removeEventListener('pause', callback);
},
offEnded(callback) {
audio.removeEventListener('ended', callback);
},
offTimeUpdate(callback) {
audio.removeEventListener('timeupdate', callback);
},
offError(callback) {
audio.removeEventListener('error', callback);
}
};
console.log('🎧 创建HTML5 Audio包装实例,支持倍速播放');
return wrappedAudio;
},
//
checkAndLoadPreloadedAudio() {
//
@ -1402,7 +1525,59 @@ export default {
return true; //
} else {
console.error('❌ 未找到匹配的音频段落:', textContent);
console.log('💡 尝试使用备用方案:实时生成音频');
console.log('💡 尝试最后的匹配策略:首字符匹配');
// 线
if (normalizedTarget.length > 5) {
const firstChars = normalizedTarget.substring(0, Math.min(10, normalizedTarget.length));
console.log('🔍 尝试首字符匹配:', firstChars);
audioIndex = this.currentPageAudios.findIndex(audio => {
if (!audio.text) return false;
const normalizedAudio = this.normalizeText(audio.text);
return normalizedAudio.startsWith(firstChars) || firstChars.startsWith(normalizedAudio.substring(0, Math.min(10, normalizedAudio.length)));
});
if (audioIndex !== -1) {
console.log('✅ 首字符匹配成功,索引:', audioIndex);
//
if (this.currentAudio) {
this.currentAudio.pause();
this.currentAudio.destroy();
this.currentAudio = null;
}
//
this.currentAudioIndex = audioIndex;
//
this.isPlaying = false;
this.currentTime = 0;
this.sliderValue = 0;
//
this.currentHighlightIndex = audioIndex;
this.emitHighlightChange(audioIndex);
//
this.createAudioInstance();
//
setTimeout(() => {
if (this.currentAudio) {
this.currentAudio.play();
console.log('🎵 开始播放首字符匹配的音频段落');
} else {
console.error('❌ 音频实例创建失败');
}
}, 100);
return true;
}
}
console.log('💡 所有匹配策略都失败,尝试使用备用方案:实时生成音频');
// 使 textToVoice API
return this.playTextWithTTS(textContent);
@ -1423,19 +1598,19 @@ export default {
// 使APIplaybackRate
let audio;
if (typeof wx !== 'undefined' && wx.createInnerAudioContext) {
console.log('使用微信原生音頻API');
audio = wx.createInnerAudioContext();
} else {
// H5使HTML5 Audio API
if (typeof window !== 'undefined' && window.Audio) {
console.log('使用原生HTML5 Audio API以支持倍速');
// if (typeof wx !== 'undefined' && wx.createInnerAudioContext) {
// console.log('使API');
// audio = wx.createInnerAudioContext();
// } else {
// // H5使HTML5 Audio API
// if (typeof window !== 'undefined' && window.Audio) {
// console.log('使HTML5 Audio API');
audio = this.createHTML5Audio();
} else {
console.log('使用uni-app音頻API');
audio = uni.createInnerAudioContext();
}
}
// } else {
// console.log('使uni-appAPI');
// audio = uni.createInnerAudioContext();
// }
// }
const audioUrl = this.currentPageAudios[this.currentAudioIndex].url;
audio.src = audioUrl;
@ -1495,12 +1670,22 @@ export default {
});
audio.onError((error) => {
console.error('音频播放错误:', error);
this.isPlaying = false;
uni.showToast({
title: '音频播放失败',
icon: 'none'
});
//
if (audio.src && audio.src.trim() !== '' && this.isPlaying) {
console.error('音频播放错误:', error);
this.isPlaying = false;
uni.showToast({
title: '音频播放失败',
icon: 'none'
});
} else {
//
console.log('🔇 音频错误(已忽略):', {
hasSrc: !!audio.src,
isPlaying: this.isPlaying,
errorType: error.type || 'unknown'
});
}
});
this.currentAudio = audio;
@ -1961,31 +2146,61 @@ export default {
音频src: audio ? audio.src : '无'
});
// playbackRate
if (audio && typeof audio.playbackRate !== 'undefined') {
console.log('✅ 音频实例支持playbackRate属性');
//
let isHTML5Audio = false;
let supportsPlaybackRate = false;
if (audio) {
// HTML5 Audio
if (audio._nativeAudio && audio._nativeAudio instanceof Audio) {
isHTML5Audio = true;
supportsPlaybackRate = true;
console.log('✅ 检测到HTML5 Audio包装实例,完全支持倍速播放');
}
// HTML5 Audio
else if (audio instanceof Audio) {
isHTML5Audio = true;
supportsPlaybackRate = true;
console.log('✅ 检测到原生HTML5 Audio实例,完全支持倍速播放');
}
// uni-appplaybackRate
else if (typeof audio.playbackRate !== 'undefined') {
supportsPlaybackRate = true;
console.log('✅ 音频实例支持playbackRate属性');
} else {
console.log('⚠️ 音频实例不支持playbackRate属性');
}
//
try {
const currentSpeed = this.playSpeed || 1.0;
audio.playbackRate = currentSpeed;
console.log(`🔧 设置播放速度为 ${currentSpeed}x`);
//
setTimeout(() => {
const actualRate = audio.playbackRate;
console.log('🔍 播放速度验证:', {
期望值: currentSpeed,
实际值: actualRate,
设置成功: Math.abs(actualRate - currentSpeed) < 0.1
});
}, 50);
} catch (error) {
console.log('⚠️ 设置播放速度时出现错误,但继续保持倍速功能启用:', error.message);
// console.log('🔍 :', {
// HTML5Audio: isHTML5Audio,
// : supportsPlaybackRate,
// : audio.constructor?.name || 'unknown',
// playbackRate: typeof audio.playbackRate
// });
//
if (supportsPlaybackRate) {
try {
const currentSpeed = this.playSpeed || 1.0;
audio.playbackRate = currentSpeed;
// console.log(`🔧 ${currentSpeed}x`);
//
// setTimeout(() => {
// const actualRate = audio.playbackRate;
// console.log('🔍 :', {
// : currentSpeed,
// : actualRate,
// : Math.abs(actualRate - currentSpeed) < 0.1
// });
// }, 50);
} catch (error) {
console.log('⚠️ 设置播放速度时出现错误:', error.message);
}
}
} else {
console.log('⚠️ 音频实例不支持playbackRate属性,但保持倍速功能启用');
console.log('⚠️ 音频实例不存在');
}
//


+ 128
- 56
subPages/home/book.vue View File

@ -364,36 +364,36 @@ export default {
//
handleTextClick(textContent, item, pageIndex) {
console.log('🎯 ===== 文本点击事件开始 =====');
console.log('📝 点击文本:', textContent);
console.log('📄 textContent类型:', typeof textContent);
console.log('❓ textContent是否为undefined:', textContent === undefined);
console.log('📦 完整item对象:', item);
console.log('📝 item.content:', item ? item.content : 'item为空');
console.log('📖 当前页面索引:', this.currentPage);
console.log('👆 点击的页面索引:', pageIndex);
console.log('📊 当前页面类型:', this.currentPageType);
console.log('📄 是否为文本页面:', this.isTextPage);
console.log('📋 当前页面数据:', this.bookPages[this.currentPage - 1]);
console.log('📏 页面数据长度:', this.bookPages[this.currentPage - 1] ? this.bookPages[this.currentPage - 1].length : '页面不存在');
// console.log('🎯 ===== =====');
// console.log('📝 :', textContent);
// console.log('📄 textContent:', typeof textContent);
// console.log(' textContentundefined:', textContent === undefined);
// console.log('📦 item:', item);
// console.log('📝 item.content:', item ? item.content : 'item');
// console.log('📖 :', this.currentPage);
// console.log('👆 :', pageIndex);
// console.log('📊 :', this.currentPageType);
// console.log('📄 :', this.isTextPage);
// console.log('📋 :', this.bookPages[this.currentPage - 1]);
// console.log('📏 :', this.bookPages[this.currentPage - 1] ? this.bookPages[this.currentPage - 1].length : '');
//
console.log('🎵 ===== 音频状态检查 =====');
console.log(' isWordAudioPlaying:', this.isWordAudioPlaying);
console.log(' currentWordAudio存在:', !!this.currentWordAudio);
console.log(' currentWordMeaning存在:', !!this.currentWordMeaning);
// console.log('🎵 ===== =====');
// console.log(' isWordAudioPlaying:', this.isWordAudioPlaying);
// console.log(' currentWordAudio:', !!this.currentWordAudio);
// console.log(' currentWordMeaning:', !!this.currentWordMeaning);
if (this.isWordAudioPlaying) {
console.log('⚠️ 检测到单词音频正在播放状态,这可能会阻止句子音频播放');
console.log('🔄 尝试重置音频播放状态...');
// console.log(' ');
// console.log('🔄 ...');
this.isWordAudioPlaying = false;
console.log('✅ 音频播放状态已重置');
// console.log(' ');
}
//
if (pageIndex !== undefined && pageIndex !== this.currentPage - 1) {
console.warn('⚠️ 点击的不是当前页面,忽略点击事件');
console.log(` 期望页面: ${this.currentPage - 1}, 点击页面: ${pageIndex}`);
// console.log(` : ${this.currentPage - 1}, : ${pageIndex}`);
return;
}
@ -410,16 +410,16 @@ export default {
// textContentundefineditem
if (!textContent && item && item.content) {
textContent = item.content;
console.log('🔄 从item中获取到content:', textContent);
// console.log('🔄 itemcontent:', textContent);
}
// textContent
if (!textContent || typeof textContent !== 'string' || textContent.trim() === '') {
console.error('❌ handleTextClick: 无效的文本内容', textContent);
console.log(' textContent:', textContent);
console.log(' 类型:', typeof textContent);
console.log(' 是否为空字符串:', textContent === '');
console.log(' trim后是否为空:', textContent && textContent.trim() === '');
// console.log(' textContent:', textContent);
// console.log(' :', typeof textContent);
// console.log(' :', textContent === '');
// console.log(' trim:', textContent && textContent.trim() === '');
uni.showToast({
title: '文本内容无效',
icon: 'none'
@ -427,13 +427,13 @@ export default {
return;
}
console.log('✅ 文本内容验证通过:', textContent);
console.log(' 文本长度:', textContent.length);
console.log(' 文本预览:', textContent.substring(0, 50) + (textContent.length > 50 ? '...' : ''));
// console.log(' :', textContent);
// console.log(' :', textContent.length);
// console.log(' :', textContent.substring(0, 50) + (textContent.length > 50 ? '...' : ''));
//
console.log('🔍 检查音频控制组件引用...');
console.log(' customTabbar存在:', !!this.$refs.customTabbar);
// console.log('🔍 ...');
// console.log(' customTabbar:', !!this.$refs.customTabbar);
if (!this.$refs.customTabbar) {
console.error('❌ customTabbar引用不存在');
@ -444,7 +444,7 @@ export default {
return;
}
console.log(' audioControls存在:', !!this.$refs.customTabbar.$refs.audioControls);
// console.log(' audioControls:', !!this.$refs.customTabbar.$refs.audioControls);
if (!this.$refs.customTabbar.$refs.audioControls) {
console.error('❌ audioControls引用不存在');
@ -460,6 +460,15 @@ export default {
console.log('🔍 检查页面类型支持...');
console.log(' isTextPage:', this.isTextPage);
console.log(' currentPageType:', this.currentPageType);
console.log(' 当前页面索引:', this.currentPage);
console.log(' 页面类型数组:', this.pageTypes);
// 线
if (this.currentPageType === '1') {
console.log('📝 当前是划线重点页面,点击的文本:', textContent);
console.log('📝 文本长度:', textContent.length);
console.log('📝 文本前50字符:', textContent.substring(0, 50));
}
if (!this.isTextPage && this.currentPageType !== '1') {
console.warn('⚠️ 当前页面不是文本页面或卡片页面');
@ -475,31 +484,94 @@ export default {
//
const audioControls = this.$refs.customTabbar.$refs.audioControls;
console.log('🎵 音频控制组件状态:');
console.log(' currentPageAudios存在:', !!audioControls.currentPageAudios);
console.log(' currentPageAudios长度:', audioControls.currentPageAudios ? audioControls.currentPageAudios.length : 0);
console.log(' isAudioLoading:', audioControls.isAudioLoading);
console.log(' currentAudioIndex:', audioControls.currentAudioIndex);
console.log(' isPlaying:', audioControls.isPlaying);
//
if (audioControls.isAudioLoading) {
console.log('⏳ 音频正在加载中,等待加载完成后再播放');
uni.showToast({
title: '音频正在加载中,请稍后再试',
icon: 'loading',
duration: 1500
});
//
const checkAndPlay = () => {
if (!audioControls.isAudioLoading && audioControls.currentPageAudios.length > 0) {
console.log('✅ 音频加载完成,开始播放指定音频');
const success = audioControls.playSpecificAudio(textContent);
if (!success) {
console.error('❌ 音频加载完成后播放失败');
}
} else if (!audioControls.isAudioLoading) {
console.error('❌ 音频加载完成但没有音频数据');
uni.showToast({
title: '当前页面没有音频内容',
icon: 'none'
});
} else {
//
setTimeout(checkAndPlay, 500);
}
};
//
setTimeout(checkAndPlay, 1000);
return;
}
//
if (!audioControls.currentPageAudios || audioControls.currentPageAudios.length === 0) {
console.warn('⚠️ 当前页面没有音频数据,尝试重新加载');
uni.showToast({
title: '正在重新加载音频...',
icon: 'loading'
});
//
audioControls.getCurrentPageAudio();
//
const retryPlay = () => {
if (!audioControls.isAudioLoading && audioControls.currentPageAudios.length > 0) {
console.log('✅ 音频重新加载完成,开始播放');
const success = audioControls.playSpecificAudio(textContent);
if (!success) {
console.error('❌ 音频重新加载后播放失败');
}
} else if (!audioControls.isAudioLoading) {
console.error('❌ 音频重新加载失败');
uni.showToast({
title: '音频加载失败,请检查网络连接',
icon: 'none'
});
} else {
//
setTimeout(retryPlay, 500);
}
};
setTimeout(retryPlay, 1500);
return;
}
// AudioControls
console.log('🚀 调用 playSpecificAudio...');
console.log('🚀 调用 playSpecificAudio,音频数据长度:', audioControls.currentPageAudios.length);
const success = audioControls.playSpecificAudio(textContent);
console.log('🎵 playSpecificAudio 返回结果:', success);
// console.log('🎵 playSpecificAudio :', success);
if (success) {
console.log('✅ 成功播放指定音频段落');
// console.log(' ');
} else {
console.error('❌ 播放指定音频段落失败');
console.log('💡 失败可能原因:');
console.log(' 1. 文本内容与音频数据不匹配');
console.log(' 2. 音频数据尚未加载完成');
console.log(' 3. 音频文件路径错误或文件损坏');
console.log(' 4. 网络连接问题');
// console.log('💡 :');
// console.log(' 1. ');
// console.log(' 2. ');
// console.log(' 3. ');
// console.log(' 4. ');
}
console.log('🎯 ===== 文本点击事件结束 =====');
// console.log('🎯 ===== =====');
},
onHighlightChange(highlightData) {
@ -513,13 +585,13 @@ export default {
//
if (highlightData.isSegmented) {
console.log('分段音频高亮:', {
highlightIndex: highlightData.highlightIndex,
segmentIndex: highlightData.segmentIndex,
startIndex: highlightData.startIndex,
endIndex: highlightData.endIndex,
currentText: highlightData.currentText
});
// console.log(':', {
// highlightIndex: highlightData.highlightIndex,
// segmentIndex: highlightData.segmentIndex,
// startIndex: highlightData.startIndex,
// endIndex: highlightData.endIndex,
// currentText: highlightData.currentText
// });
}
} else {
//
@ -532,10 +604,10 @@ export default {
async getVoiceList() {
const voiceRes = await this.$api.music.list()
if(voiceRes.code === 200){
console.log('音色列表API返回:', voiceRes.result);
console.log('第一个音色数据:', voiceRes.result[0]);
// console.log('API:', voiceRes.result);
// console.log(':', voiceRes.result[0]);
this.voiceId = Number(voiceRes.result[0].voiceType)
console.log('获取默认音色ID:', this.voiceId, '类型:', typeof this.voiceId);
// console.log('ID:', this.voiceId, ':', typeof this.voiceId);
}
},
toggleNavbar() {


+ 2
- 2
subPages/home/music.vue View File

@ -65,7 +65,7 @@ export default {
uni.navigateBack()
},
selectVoice() {
console.log('选择音色:', this.selectedVoiceId)
// console.log(':', this.selectedVoiceId)
uni.$emit('selectVoice', this.selectedVoiceId)
uni.navigateBack()
},
@ -82,7 +82,7 @@ export default {
},
onLoad(options) {
this.selectedVoiceId = Number(options.voiceId)
console.log( 'options.voiceId', options.voiceId );
// console.log( 'options.voiceId', options.voiceId );
this.getVoice()
}


+ 2
- 2
subPages/home/plan.vue View File

@ -68,7 +68,7 @@ export default {
},
methods: {
handleSignUp() {
console.log('点击报名')
// console.log('')
//
uni.navigateTo({
url: '/subPages/home/submit?id=' + this.id
@ -86,7 +86,7 @@ export default {
this.type = askRes.result.type
}
} catch (error) {
console.log('error', error)
console.error('获取链接详情失败:', error)
}
},


+ 2
- 2
subPages/home/search.vue View File

@ -113,7 +113,7 @@ export default {
return params
},
handleSearch() {
console.log('搜索:', this.searchKeyword)
// console.log(':', this.searchKeyword)
this.list = []
this.initPage()
this.getList(true)
@ -122,7 +122,7 @@ export default {
switchTab(index) {
this.currentTab = index
console.log('切换分类:', this.categoryTabs[index])
// console.log(':', this.categoryTabs[index])
this.list = []
this.initPage()
this.getList(true)


+ 1
- 1
subPages/home/submit.vue View File

@ -110,7 +110,7 @@ export default {
},
methods: {
async handleSubmit() {
console.log('提交表单', this.formData)
// console.log('', this.formData)
//
if (!this.formData.name) {
uni.showToast({


Loading…
Cancel
Save