sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bug修复

Browse Source
This commit is contained in:
francis_fh
2026-01-23 13:10:40 +08:00
parent 7bfc765a73
commit ebb6bc6e33
2 changed files with 276 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
hook/useTTSPlayer.js
View File

@@ -15,14 +15,15 @@ export function useTTSPlayer(httpUrl) {
const isComplete = ref(false)
// #ifdef H5
const audioContext = typeof window !== 'undefined' && (window.AudioContext || window.webkitAudioContext)
? new(window.AudioContext || window.webkitAudioContext)()
: null
// H5环境，使用 AudioContext
// 初始化时不立即创建，而是在需要时创建，确保在用户交互后创建
let audioContext = null
// #endif
// #ifdef MP-WEIXIN
const audioContext = null // 微信小程序不支持 AudioContext
let innerAudioContext = null // 微信小程序音频上下文
let backgroundAudioManager = null // 微信小程序背景音频管理器
// #endif
let currentAudioBuffer = null
@@ -31,42 +32,104 @@ export function useTTSPlayer(httpUrl) {
// 初始化微信小程序音频上下文
// #ifdef MP-WEIXIN
const initInnerAudioContext = () => {
if (!innerAudioContext) {
innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = false
innerAudioContext.onPlay(() => {
console.log('🎵 微信小程序音频播放开始')
const initAudioManager = () => {
try {
console.log('📱 微信小程序：创建背景音频管理器')
backgroundAudioManager = uni.getBackgroundAudioManager()
// 设置默认配置
backgroundAudioManager.title = 'AI语音播报'
backgroundAudioManager.singer = 'KS AI'
backgroundAudioManager.coverImgUrl = '/static/icon/logo.png'
backgroundAudioManager.volume = 1.0
backgroundAudioManager.onPlay(() => {
console.log('🎵 微信小程序背景音频播放开始')
isSpeaking.value = true
isPaused.value = false
})
innerAudioContext.onPause(() => {
console.log('⏸️ 微信小程序音频播放暂停')
backgroundAudioManager.onPause(() => {
console.log('⏸️ 微信小程序背景音频播放暂停')
isPaused.value = true
})
innerAudioContext.onStop(() => {
console.log('⏹️ 微信小程序音频播放停止')
backgroundAudioManager.onStop(() => {
console.log('⏹️ 微信小程序背景音频播放停止')
isSpeaking.value = false
isComplete.value = true
})
innerAudioContext.onEnded(() => {
console.log('🎵 微信小程序音频播放结束')
backgroundAudioManager.onEnded(() => {
console.log('🎵 微信小程序背景音频播放结束')
isSpeaking.value = false
isComplete.value = true
})
innerAudioContext.onError((res) => {
console.error('❌ 微信小程序音频播放错误:', res.errMsg)
backgroundAudioManager.onError((res) => {
console.error('❌ 微信小程序背景音频播放错误:', res.errMsg, '错误码:', res.errCode)
isSpeaking.value = false
isComplete.value = false
})
backgroundAudioManager.onCanplay(() => {
console.log('🎵 微信小程序背景音频可以播放了')
})
backgroundAudioManager.onWaiting(() => {
console.log('⏳ 微信小程序背景音频加载中...')
})
console.log('✅ 微信小程序背景音频管理器初始化成功')
return true
} catch (e) {
console.error('❌ 微信小程序背景音频管理器初始化失败:', e)
// 降级使用InnerAudioContext
console.log('🔄 微信小程序：背景音频不可用，降级使用InnerAudioContext')
if (!innerAudioContext) {
innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = false
innerAudioContext.obeyMuteSwitch = false
innerAudioContext.onPlay(() => {
console.log('🎵 微信小程序InnerAudioContext播放开始')
isSpeaking.value = true
isPaused.value = false
})
innerAudioContext.onPause(() => {
console.log('⏸️ 微信小程序InnerAudioContext播放暂停')
isPaused.value = true
})
innerAudioContext.onStop(() => {
console.log('⏹️ 微信小程序InnerAudioContext播放停止')
isSpeaking.value = false
isComplete.value = true
})
innerAudioContext.onEnded(() => {
console.log('🎵 微信小程序InnerAudioContext播放结束')
isSpeaking.value = false
isComplete.value = true
})
innerAudioContext.onError((res) => {
console.error('❌ 微信小程序InnerAudioContext错误:', res.errMsg, '错误码:', res.errCode)
isSpeaking.value = false
isComplete.value = false
})
innerAudioContext.onCanplay(() => {
console.log('🎵 微信小程序音频可以播放了')
// 只有在需要播放且未播放状态下才调用play
console.log('🎵 微信小程序InnerAudioContext可以播放了')
if (isSpeaking.value && !isPaused.value) {
innerAudioContext.play()
}
})
}
return false
}
}
// #endif
@@ -84,20 +147,97 @@ export function useTTSPlayer(httpUrl) {
console.log('🔗 Final GET URL:', url);
// #ifdef MP-WEIXIN
// 微信小程序环境，使用微信音频API
initInnerAudioContext()
console.log('🎵 微信小程序：设置音频 src 为:', url);
// 微信小程序环境，使用背景音频管理器
const isBackgroundAudioAvailable = initAudioManager()
// 重置音频状态
isSpeaking.value = true
isPaused.value = false
isComplete.value = false
// 设置src，等待onCanplay事件触发后再播放
if (isBackgroundAudioAvailable && backgroundAudioManager) {
console.log('🎵 微信小程序：使用背景音频管理器播放，URL:', url);
// 设置背景音频参数
backgroundAudioManager.title = 'AI语音播报'
backgroundAudioManager.singer = 'KS AI'
backgroundAudioManager.coverImgUrl = '/static/icon/logo.png'
// 直接设置src并播放
backgroundAudioManager.src = url
console.log('🎵 微信小程序背景音频开始播放');
} else {
// 降级方案：使用InnerAudioContext
console.log('🔄 微信小程序：背景音频不可用，降级使用InnerAudioContext');
// 如果已有音频上下文，先销毁再重新创建
if (innerAudioContext) {
innerAudioContext.destroy()
innerAudioContext = null
}
innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = false
innerAudioContext.obeyMuteSwitch = false
innerAudioContext.volume = 1.0
innerAudioContext.onPlay(() => {
console.log('🎵 微信小程序InnerAudioContext播放开始')
isSpeaking.value = true
isPaused.value = false
})
innerAudioContext.onPause(() => {
console.log('⏸️ 微信小程序InnerAudioContext播放暂停')
isPaused.value = true
})
innerAudioContext.onStop(() => {
console.log('⏹️ 微信小程序InnerAudioContext播放停止')
isSpeaking.value = false
isComplete.value = true
})
innerAudioContext.onEnded(() => {
console.log('🎵 微信小程序InnerAudioContext播放结束')
isSpeaking.value = false
isComplete.value = true
})
innerAudioContext.onError((res) => {
console.error('❌ 微信小程序InnerAudioContext错误:', res.errMsg, '错误码:', res.errCode)
isSpeaking.value = false
isComplete.value = false
})
innerAudioContext.onCanplay(() => {
console.log('🎵 微信小程序InnerAudioContext可以播放了')
if (isSpeaking.value && !isPaused.value) {
innerAudioContext.play()
}
})
innerAudioContext.src = url
console.log('🎵 微信小程序InnerAudioContext开始播放');
}
// #endif
// #ifdef H5
// H5环境，使用 AudioContext
if (audioContext) {
try {
// 确保AudioContext已创建
if (!audioContext) {
console.log('🎵 H5: 创建新的AudioContext');
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
// 检查并恢复AudioContext状态（浏览器安全策略要求用户交互后才能播放音频）
if (audioContext.state === 'suspended') {
console.log('🎵 H5: 恢复挂起的AudioContext');
await audioContext.resume();
console.log('✅ H5: AudioContext已恢复，状态:', audioContext.state);
}
// 发送GET请求获取语音数据
const response = await fetch(url)
if (!response.ok) {
@@ -106,20 +246,52 @@ export function useTTSPlayer(httpUrl) {
// 获取二进制数据
const arrayBuffer = await response.arrayBuffer()
console.log('✅ Received audio data, size:', arrayBuffer.byteLength + ' bytes');
console.log('✅ H5: Received audio data, size:', arrayBuffer.byteLength + ' bytes');
try {
// 直接使用 audioContext.decodeAudioData 解码，不依赖外部库
const decoded = await audioContext.decodeAudioData(arrayBuffer)
console.log('✅ Audio decoded, sampleRate:', decoded.sampleRate, 'channels:', decoded.numberOfChannels);
console.log('✅ H5: Audio decoded, sampleRate:', decoded.sampleRate, 'channels:', decoded.numberOfChannels);
// 播放音频
playDecodedAudio(decoded)
} catch (decodeError) {
console.error('❌ AudioContext decodeAudioData failed:', decodeError);
console.error('❌ H5: AudioContext decodeAudioData failed:', decodeError);
// 降级处理：创建一个简单的音频缓冲区
createFallbackAudio(arrayBuffer)
}
} catch (h5Error) {
console.error('❌ H5: Audio playback failed:', h5Error);
// 尝试使用HTML5 Audio元素作为最终降级方案
try {
console.log('🔄 H5: 尝试使用HTML5 Audio元素播放');
const audio = new Audio(url);
audio.play();
console.log('✅ H5: HTML5 Audio元素开始播放');
// 设置音频状态
isSpeaking.value = true;
isPaused.value = false;
isComplete.value = false;
// 监听播放结束
audio.onended = () => {
console.log('🎵 H5: HTML5 Audio播放结束');
isSpeaking.value = false;
isComplete.value = true;
};
// 监听播放错误
audio.onerror = (error) => {
console.error('❌ H5: HTML5 Audio播放错误:', error);
isSpeaking.value = false;
isComplete.value = false;
};
} catch (audioError) {
console.error('❌ H5: HTML5 Audio播放也失败了:', audioError);
isSpeaking.value = false;
isComplete.value = false;
}
}
// #endif
@@ -177,11 +349,29 @@ export function useTTSPlayer(httpUrl) {
// #endif
const pause = () => {
console.log('⏸️ TTS pause called');
// #ifdef MP-WEIXIN
if (innerAudioContext && isSpeaking.value && !isPaused.value) {
console.log('⏸️ 微信小程序音频暂停');
innerAudioContext.pause()
// 优先使用背景音频管理器
if (backgroundAudioManager) {
try {
backgroundAudioManager.pause()
console.log('⏸️ 微信小程序背景音频暂停');
return
} catch (e) {
console.error('❌ 微信小程序背景音频暂停失败:', e);
}
}
// 降级使用InnerAudioContext
if (innerAudioContext && isSpeaking.value && !isPaused.value) {
try {
innerAudioContext.pause()
console.log('⏸️ 微信小程序InnerAudioContext暂停');
return
} catch (e) {
console.error('❌ 微信小程序InnerAudioContext暂停失败:', e);
}
}
// #endif
@@ -191,24 +381,40 @@ export function useTTSPlayer(httpUrl) {
return;
}
console.log('⏸️ TTS pause called');
if (audioContext.state === 'running') {
audioContext.suspend()
isPaused.value = true
// 保存当前播放位置
playTimeOffset = audioContext.currentTime
console.log('✅ Audio paused successfully');
console.log('✅ H5 Audio paused successfully');
}
// #endif
}
const resume = () => {
console.log('▶️ TTS resume called');
// #ifdef MP-WEIXIN
if (innerAudioContext && isSpeaking.value && isPaused.value) {
console.log('▶️ 微信小程序音频恢复播放');
innerAudioContext.play()
// 优先使用背景音频管理器
if (backgroundAudioManager) {
try {
backgroundAudioManager.play()
console.log('▶️ 微信小程序背景音频恢复播放');
return
} catch (e) {
console.error('❌ 微信小程序背景音频恢复失败:', e);
}
}
// 降级使用InnerAudioContext
if (innerAudioContext && isSpeaking.value && isPaused.value) {
try {
innerAudioContext.play()
console.log('▶️ 微信小程序InnerAudioContext恢复播放');
return
} catch (e) {
console.error('❌ 微信小程序InnerAudioContext恢复失败:', e);
}
}
// #endif
@@ -218,12 +424,10 @@ export function useTTSPlayer(httpUrl) {
return;
}
console.log('▶️ TTS resume called');
if (audioContext.state === 'suspended') {
audioContext.resume()
isPaused.value = false
console.log('✅ Audio resumed successfully');
console.log('✅ H5 Audio resumed successfully');
}
// #endif
}
@@ -236,12 +440,25 @@ export function useTTSPlayer(httpUrl) {
console.log('⏹️ TTS stop called');
// #ifdef MP-WEIXIN
// 优先使用背景音频管理器
if (backgroundAudioManager) {
try {
backgroundAudioManager.stop()
console.log('✅ 微信小程序背景音频停止');
} catch (e) {
console.error('❌ 微信小程序背景音频停止失败:', e);
}
}
// 降级使用InnerAudioContext
if (innerAudioContext) {
try {
innerAudioContext.stop()
console.log('✅ 微信小程序音频停止');
console.log('✅ 微信小程序InnerAudioContext停止');
innerAudioContext.destroy()
innerAudioContext = null
} catch (e) {
console.error('❌ 微信小程序音频停止错误:', e);
console.error('❌ 微信小程序InnerAudioContext停止错误:', e);
}
}
// #endif
@@ -252,7 +469,7 @@ export function useTTSPlayer(httpUrl) {
currentSource.stop()
currentSource.disconnect()
} catch (e) {
console.error('❌ Error stopping audio source:', e);
console.error('❌ Error stopping H5 audio source:', e);
}
currentSource = null
}
@@ -261,7 +478,7 @@ export function useTTSPlayer(httpUrl) {
try {
audioContext.suspend()
} catch (e) {
console.error('❌ Error suspending audio context:', e);
console.error('❌ Error suspending H5 audio context:', e);
}
}
// #endif

22
pages/chat/components/ai-paging.vue
View File

@@ -135,14 +135,14 @@
</view>
<view v-if="isTyping" class="self">
<view class="message msg-loading">
<div class="loading-content">
<span class="ai-loading">
<span></span>
<span></span>
<span></span>
</span>
<view class="loading-content">
<view class="ai-loading">
<view></view>
<view></view>
<view></view>
</view>
<text class="loading-text">AI正在思考中...</text>
</div>
</view>
</view>
</view>
</view>
@@ -1299,7 +1299,7 @@ image-margin-top = 40rpx
}
/* 三个点的样式 - 使用标准CSS语法，不使用嵌套 */
.ai-loading span {
.ai-loading view {
display: inline-block;
width: 12rpx;
height: 12rpx;
@@ -1311,15 +1311,15 @@ image-margin-top = 40rpx
}
/* 为每个点设置不同的动画延迟 */
.ai-loading span:nth-child(1) {
.ai-loading view:nth-child(1) {
animation-delay: -0.32s;
}
.ai-loading span:nth-child(2) {
.ai-loading view:nth-child(2) {
animation-delay: -0.16s;
}
.ai-loading span:nth-child(3) {
.ai-loading view:nth-child(3) {
animation-delay: 0s;
}
</style>