语音射别修复

2026-01-23 22:01:38 +08:00
parent ebb6bc6e33
commit c4c6cea579
3 changed files with 219 additions and 15 deletions
--- a/hook/useRealtimeRecorder.js
+++ b/hook/useRealtimeRecorder.js
@@ -20,6 +20,7 @@ export function useAudioRecorder() {

    const recognizedText = ref('')
    const lastFinalText = ref('')
+    const isRecognizing = ref(false) // 识别状态，暴露给外部

    let audioStream = null
    let audioContext = null
@@ -132,11 +133,15 @@ export function useAudioRecorder() {
                    }
                    case 'TranscriptionCompleted': {
                        lastFinalText.value = ''
+                        isRecognizing.value = false // 识别完成，重置状态
                        // console.log('识别全部完成')
+                        cleanup()
                        break
                    }
                    case 'TaskFailed': {
                        console.error('识别失败:', msg?.header?.status_text)
+                        isRecognizing.value = false // 识别失败，重置状态
+                        cleanup()
                        break
                    }
                    default:
@@ -151,7 +156,104 @@ export function useAudioRecorder() {
        if (isRecording.value) return
        
        // #ifdef MP-WEIXIN
-        $api.msg('小程序暂不支持语音识别功能');
+        try {
+            recognizedText.value = ''
+            lastFinalText.value = ''
+            // 开始录音时不设置isRecognizing为true，只有在停止录音后才保持isRecognizing为true
+            
+            const recorderManager = uni.getRecorderManager()
+            
+            // 监听录音完成事件
+            recorderManager.onStop(async (res) => {
+                console.log('小程序录音完成:', res)
+                try {
+                    // 停止录音后设置isRecognizing为true，显示loading
+                    isRecognizing.value = true
+                    
+                    // 打印请求配置，便于调试
+                    console.log('准备上传语音识别请求配置:', {
+                        url: config.vioceBaseURl,
+                        name: 'file',
+                        method: 'POST',
+                        fileType: 'audio',
+                        filePath: res.tempFilePath
+                    })
+                    
+                    // 上传录音文件到服务器进行语音识别
+                    const uploadResult = await uni.uploadFile({
+                        url: config.vioceBaseURl,
+                        filePath: res.tempFilePath,
+                        name: 'file',
+                        fileType: 'audio',
+                        method: 'POST' // 显式设置为POST请求
+                    })
+                    
+                    console.log('语音识别上传结果:', uploadResult)
+                    
+                    if (uploadResult.statusCode === 200) {
+                        try {
+                            const result = JSON.parse(uploadResult.data)
+                            console.log('语音识别结果:', result)
+                            if (result.code === 200 && result.data) {
+                                recognizedText.value = result.data
+                                console.log('语音识别成功，识别结果:', recognizedText.value)
+                                // 语音识别成功后，自动发送消息
+                                // 这里需要触发一个事件，让父组件知道识别成功
+                                // 或者直接调用发送消息的方法
+                                isRecognizing.value = false // 识别成功，重置状态
+                            } else {
+                                console.error('语音识别返回错误:', result.message || '未知错误')
+                                $api.msg('语音识别失败，请重试')
+                                isRecognizing.value = false // 识别失败，重置状态
+                            }
+                        } catch (parseErr) {
+                            console.error('语音识别结果解析失败:', parseErr)
+                            $api.msg('语音识别失败，请重试')
+                            isRecognizing.value = false // 解析失败，重置状态
+                        }
+                    } else {
+                        console.error('语音识别请求失败，状态码:', uploadResult.statusCode)
+                        $api.msg('语音识别失败，请重试')
+                        isRecognizing.value = false // 请求失败，重置状态
+                    }
+                } catch (err) {
+                    console.error('语音识别上传失败:', err)
+                    $api.msg('语音识别失败，请重试')
+                    isRecognizing.value = false // 上传失败，重置状态
+                }
+            })
+            
+            // 监听录音错误事件
+            recorderManager.onError((err) => {
+                console.error('小程序录音错误:', err)
+                $api.msg('录音失败，请重试');
+                cleanup()
+            })
+            
+            // 微信小程序录音API
+            await recorderManager.start({
+                duration: 60000, // 最长录音60秒
+                sampleRate: 16000,
+                numberOfChannels: 1,
+                encodeBitRate: 96000,
+                format: 'mp3'
+            })
+            
+            isRecording.value = true
+            recordingDuration.value = 0
+            durationTimer = setInterval(() => recordingDuration.value++, 1000)
+            
+            // 监听录音事件（可选）
+            recorderManager.onFrameRecorded((res) => {
+                // 更新音量显示
+                volumeLevel.value = res.volume || 0
+                audioDataForDisplay.value = Array(16).fill(volumeLevel.value)
+            })
+        } catch (err) {
+            console.error('小程序录音启动失败:', err)
+            $api.msg('录音启动失败，请重试');
+            cleanup()
+        }
        return;
        // #endif
        
@@ -164,6 +266,7 @@ export function useAudioRecorder() {
            
            recognizedText.value = ''
            lastFinalText.value = ''
+            // 开始录音时不设置isRecognizing为true，只有在停止录音后才保持isRecognizing为true
            await connectWebSocket()

            audioStream = await navigator.mediaDevices.getUserMedia({
@@ -201,6 +304,7 @@ export function useAudioRecorder() {
            durationTimer = setInterval(() => recordingDuration.value++, 1000)
        } catch (err) {
            console.error('启动失败:', err)
+            isRecognizing.value = false // 启动失败，重置状态
            cleanup()
        }
        // #endif
@@ -210,6 +314,12 @@ export function useAudioRecorder() {
        if (!isRecording.value || isStopping.value) return
        isStopping.value = true

+        // #ifdef MP-WEIXIN
+        uni.getRecorderManager().stop()
+        // 小程序中录音停止后会触发onStop事件，在onStop事件中处理识别结果和状态重置
+        // #endif
+        
+        // #ifdef H5
        if (websocket?.readyState === WebSocket.OPEN) {
            websocket.send(JSON.stringify({
                header: {
@@ -218,18 +328,39 @@ export function useAudioRecorder() {
                    message_id: generateUUID()
                }
            }))
-            websocket.close()
+            // H5中不立即调用cleanup，等待识别完成
        }
+        // #endif

-        cleanup()
+        // 只清理录音相关资源，不重置识别状态
+        clearInterval(durationTimer)
+        audioStream?.getTracks().forEach(track => track.stop())
+        audioContext?.close()
+        audioStream = null
+        audioContext = null
+        audioInput = null
+        scriptProcessor = null
+        
+        isRecording.value = false
+        isSocketConnected.value = false
        isStopping.value = false
    }

    const cancelRecording = () => {
        if (!isRecording.value || isStopping.value) return
        isStopping.value = true
+        
+        // #ifdef MP-WEIXIN
+        uni.getRecorderManager().stop()
+        // #endif
+        
+        // #ifdef H5
        websocket?.close()
+        // #endif
+        
+        // 取消录音时重置所有状态
        cleanup()
+        isRecognizing.value = false
        isStopping.value = false
    }

@@ -249,16 +380,22 @@ export function useAudioRecorder() {

        isRecording.value = false
        isSocketConnected.value = false
+        isRecognizing.value = false // 停止录音，重置识别状态
    }

    onUnmounted(() => {
        if (isRecording.value) stopRecording()
    })

+    const reset = () => {
+        cleanup()
+    }
+
    return {
        isRecording,
        isStopping,
        isSocketConnected,
+        isRecognizing,
        recordingDuration,
        audioDataForDisplay,
        volumeLevel,
@@ -266,6 +403,7 @@ export function useAudioRecorder() {
        lastFinalText,
        startRecording,
        stopRecording,
-        cancelRecording
+        cancelRecording,
+        reset
    }
 }
--- a/pages/chat/components/WaveDisplay.vue
+++ b/pages/chat/components/WaveDisplay.vue
@@ -65,6 +65,26 @@ const centerIndex = ref(0);
 // 动画帧ID
 let animationId = null;

+// 为小程序环境提供requestAnimationFrame兼容
+const requestAnimationFramePolyfill = (callback) => {
+    // #ifdef MP-WEIXIN
+    return setTimeout(callback, 16); // 约60fps
+    // #endif
+    // #ifdef H5
+    return requestAnimationFrame(callback);
+    // #endif
+};
+
+// 为小程序环境提供cancelAnimationFrame兼容
+const cancelAnimationFramePolyfill = (id) => {
+    // #ifdef MP-WEIXIN
+    clearTimeout(id);
+    // #endif
+    // #ifdef H5
+    cancelAnimationFrame(id);
+    // #endif
+};
+
 // 格式化显示时间
 const formattedTime = computed(() => {
    const mins = Math.floor(props.recordingTime / 60)
@@ -125,7 +145,7 @@ const updateWaveform = () => {
        }
    }

-    animationId = requestAnimationFrame(updateWaveform);
+    animationId = requestAnimationFramePolyfill(updateWaveform);
 };

 // 更新单个波形条
@@ -157,14 +177,14 @@ const updateWaveBar = (index, value) => {
 // 开始动画
 const startAnimation = () => {
    if (!animationId) {
-        animationId = requestAnimationFrame(updateWaveform);
+        animationId = requestAnimationFramePolyfill(updateWaveform);
    }
 };

 // 停止动画
 const stopAnimation = () => {
    if (animationId) {
-        cancelAnimationFrame(animationId);
+        cancelAnimationFramePolyfill(animationId);
        animationId = null;
    }
 };
--- a/pages/chat/components/ai-paging.vue
+++ b/pages/chat/components/ai-paging.vue
@@ -133,6 +133,20 @@
                <view class="chat-item self" v-if="isRecording">
                    <view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
                </view>
+                <!-- 语音正在识别提示 -->
+                <!-- <view>{{isRecognizing}}</view> -->
+                <view class="chat-item self" v-if="isRecognizing">
+                    <view class="message msg-loading">
+                        <view class="loading-content">
+                            <view class="ai-loading">
+                                <view></view>
+                                <view></view>
+                                <view></view>
+                            </view>
+                            <text class="loading-text">正在识别语音...</text>
+                        </view>
+                    </view>
+                </view>
                <view v-if="isTyping" class="self">
                    <view class="message msg-loading">
                        <view class="loading-content">
@@ -175,9 +189,6 @@
                    @touchmove="handleTouchMove"
                    @touchend="handleTouchEnd"
                    @touchcancel="handleTouchCancel"
-                    :catchtouchstart="true"
-                    :catchtouchmove="true"
-                    :catchtouchend="true"
                    v-show="isVoice"
                    type="default"
                >
@@ -294,11 +305,11 @@ import FileIcon from './fileIcon.vue';
 import FileText from './fileText.vue';
 import { useAudioRecorder } from '@/hook/useRealtimeRecorder.js';
 import { useTTSPlayer } from '@/hook/useTTSPlayer.js';
+import successIcon from '@/static/icon/success.png';
 // 全局
 const { $api, navTo, throttle, config } = inject('globalFunction');
 const emit = defineEmits(['onConfirm']);
 const { messages, isTyping, textInput, chatSessionID } = storeToRefs(useChatGroupDBStore());
-import successIcon from '@/static/icon/success.png';
 // hook
 const {
    isRecording,
@@ -309,8 +320,32 @@ const {
    volumeLevel,
    recognizedText,
    lastFinalText,
+    recordingDuration,
+    isRecognizing,
+    reset
 } = useAudioRecorder();

+// 监听语音识别结果变化，自动发送消息
+watch(
+    () => recognizedText.value,
+    (newVal) => {
+        if (newVal && newVal.trim()) {
+            console.log('监听到语音识别结果变化，自动发送消息:', newVal);
+            sendMessage(newVal);
+        }
+    }
+);
+
+// 监听isRecognizing状态，显示提示
+watch(
+    () => isRecognizing.value,
+    (newVal) => {
+        if (newVal) {
+            $api.msg('正在识别语音...');
+        }
+    }
+);
+
 const { speak, pause, resume, isSpeaking, isPaused, cancelAudio } = useTTSPlayer(config.speechSynthesis);

 // 获取组件实例（用于小程序 SelectorQuery）
@@ -362,6 +397,7 @@ onMounted(async () => {
    changeQueries();
    scrollToBottom();
    isAudioPermission.value = await requestMicPermission();
+    reset(); // 重置语音识别状态
 });

 const requestMicPermission = async () => {
@@ -684,17 +720,22 @@ const handleTouchEnd = () => {
    if (status.value === 'cancel') {
        console.log('取消发送');
        cancelRecording();
+        status.value = 'idle';
    } else {
        stopRecording();
        if (isAudioPermission.value) {
-            if (recognizedText.value) {
-                sendMessage(recognizedText.value);
-            } else {
+            // 主要根据录音时长判断，而不是完全依赖识别结果
+            // 由于setInterval是异步的，这里需要考虑计时延迟
+            const actualDuration = recordingDuration.value > 0 ? recordingDuration.value : (isRecording.value ? 0.5 : 0);
+            if (actualDuration < 1) {
                $api.msg('说话时长太短');
-            }
-        }
-    }
                status.value = 'idle';
+            } else {
+                // 状态管理由useAudioRecorder hook内部处理
+                status.value = 'idle';
+            }
+        }
+    }
 };

 const handleTouchCancel = () => {
@@ -1118,6 +1159,11 @@ image-margin-top = 40rpx
    -moz-user-select:none;
    -ms-user-select:none;
    touch-action: none; /* 禁用默认滚动 */
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 160rpx; /* 为底部导航栏留出空间 */
+    z-index: 9999; /* 确保高于其他元素 */
    .record-tip
        font-weight: 400;
        color: #909090;