bug修复

hook/useTTSPlayer.js

@@ -15,14 +15,15 @@ export function useTTSPlayer(httpUrl) {
     const isComplete = ref(false)
 
     // #ifdef H5
-    const audioContext = typeof window !== 'undefined' && (window.AudioContext || window.webkitAudioContext) 
+    // H5环境，使用 AudioContext
-        ? new(window.AudioContext || window.webkitAudioContext)() 
+    // 初始化时不立即创建，而是在需要时创建，确保在用户交互后创建
-        : null
+    let audioContext = null
     // #endif
     
     // #ifdef MP-WEIXIN
     const audioContext = null // 微信小程序不支持 AudioContext
     let innerAudioContext = null // 微信小程序音频上下文
+    let backgroundAudioManager = null // 微信小程序背景音频管理器
     // #endif
     
     let currentAudioBuffer = null
@@ -31,41 +32,103 @@ export function useTTSPlayer(httpUrl) {
 
     // 初始化微信小程序音频上下文
     // #ifdef MP-WEIXIN
-    const initInnerAudioContext = () => {
+    const initAudioManager = () => {
-        if (!innerAudioContext) {
+        try {
-            innerAudioContext = uni.createInnerAudioContext()
+            console.log('📱 微信小程序：创建背景音频管理器')
-            innerAudioContext.autoplay = false
+            backgroundAudioManager = uni.getBackgroundAudioManager()
-            innerAudioContext.onPlay(() => {
+            
-                console.log('🎵 微信小程序音频播放开始')
+            // 设置默认配置
+            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
             })
-            innerAudioContext.onCanplay(() => {
+            
-                console.log('🎵 微信小程序音频可以播放了')
+            backgroundAudioManager.onCanplay(() => {
-                // 只有在需要播放且未播放状态下才调用play
+                console.log('🎵 微信小程序背景音频可以播放了')
-                if (isSpeaking.value && !isPaused.value) {
-                    innerAudioContext.play()
-                }
             })
+            
+            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('🎵 微信小程序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()
+            const isBackgroundAudioAvailable = initAudioManager()
-            console.log('🎵 微信小程序：设置音频 src 为:', url);
+            
             // 重置音频状态
             isSpeaking.value = true
             isPaused.value = false
             isComplete.value = false
-            // 设置src，等待onCanplay事件触发后再播放
+            
-            innerAudioContext.src = url
+            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 (backgroundAudioManager) {
+            try {
+                backgroundAudioManager.pause()
+                console.log('⏸️ 微信小程序背景音频暂停');
+                return
+            } catch (e) {
+                console.error('❌ 微信小程序背景音频暂停失败:', e);
+            }
+        }
+        
+        // 降级使用InnerAudioContext
         if (innerAudioContext && isSpeaking.value && !isPaused.value) {
-            console.log('⏸️ 微信小程序音频暂停');
+            try {
-            innerAudioContext.pause()
+                innerAudioContext.pause()
-            return
+                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 (backgroundAudioManager) {
+            try {
+                backgroundAudioManager.play()
+                console.log('▶️ 微信小程序背景音频恢复播放');
+                return
+            } catch (e) {
+                console.error('❌ 微信小程序背景音频恢复失败:', e);
+            }
+        }
+        
+        // 降级使用InnerAudioContext
         if (innerAudioContext && isSpeaking.value && isPaused.value) {
-            console.log('▶️ 微信小程序音频恢复播放');
+            try {
-            innerAudioContext.play()
+                innerAudioContext.play()
-            return
+                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

pages/chat/components/ai-paging.vue

@@ -135,14 +135,14 @@
                 </view>
                 <view v-if="isTyping" class="self">
                     <view class="message msg-loading">
-                        <div class="loading-content">
+                        <view class="loading-content">
-                            <span class="ai-loading">
+                            <view class="ai-loading">
-                                <span></span>
+                                <view></view>
-                                <span></span>
+                                <view></view>
-                                <span></span>
+                                <view></view>
-                            </span>
+                            </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>