import { ref, onUnmounted } from 'vue'; function mergeText(prevText, newText) { if (newText.startsWith(prevText)) { return newText; // 直接替换,避免重复拼接 } return prevText + newText; // 兼容意外情况 } export function useAudioRecorder(wsUrl) { // 状态变量 const isRecording = ref(false); const isStopping = ref(false); const isSocketConnected = ref(false); const recordingDuration = ref(0); const audioDataForDisplay = ref(new Array(16).fill(0.01)); const volumeLevel = ref(0); // 音频相关 const audioContext = ref(null); const mediaStream = ref(null); const workletNode = ref(null); const analyser = ref(null); // 网络相关 const socket = ref(null); // 配置常量 const SAMPLE_RATE = 16000; const SILENCE_THRESHOLD = 0.02; // 静音阈值 (0-1) const SILENCE_DURATION = 100; // 静音持续时间(ms)后切片 const MIN_SOUND_DURATION = 200; // 最小有效声音持续时间(ms) // 音频处理变量 const lastSoundTime = ref(0); const audioChunks = ref([]); const currentChunkStartTime = ref(0); const silenceStartTime = ref(0); // 语音识别结果 const recognizedText = ref(''); const lastFinalText = ref(''); // 保存最终确认的文本 // AudioWorklet处理器代码 const workletProcessorCode = ` class AudioProcessor extends AudioWorkletProcessor { constructor(options) { super(); this.silenceThreshold = options.processorOptions.silenceThreshold; this.sampleRate = options.processorOptions.sampleRate; this.samplesPerChunk = Math.floor(this.sampleRate * 0.05); // 50ms的块 this.buffer = new Int16Array(this.samplesPerChunk); this.index = 0; this.lastUpdate = 0; } calculateVolume(inputs) { const input = inputs[0]; if (!input || input.length === 0) return 0; let sum = 0; const inputChannel = input[0]; for (let i = 0; i < inputChannel.length; i++) { sum += inputChannel[i] * inputChannel[i]; } return Math.sqrt(sum / inputChannel.length); } process(inputs) { const now = currentTime; const volume = this.calculateVolume(inputs); // 每50ms发送一次分析数据 if (now - this.lastUpdate > 0.05) { this.lastUpdate = now; // 简单的频率分析 (模拟16个频段) const simulatedFreqData = []; for (let i = 0; i < 16; i++) { simulatedFreqData.push( Math.min(1, volume * 10 + (Math.random() * 0.2 - 0.1)) ); } this.port.postMessage({ type: 'analysis', volume: volume, frequencyData: simulatedFreqData, isSilent: volume < this.silenceThreshold, timestamp: now }); } // 原始音频处理 const input = inputs[0]; if (input && input.length > 0) { const inputChannel = input[0]; for (let i = 0; i < inputChannel.length; i++) { this.buffer[this.index++] = Math.max(-32768, Math.min(32767, inputChannel[i] * 32767)); if (this.index >= this.samplesPerChunk) { this.port.postMessage({ type: 'audio', audioData: this.buffer.buffer, timestamp: now }, [this.buffer.buffer]); this.buffer = new Int16Array(this.samplesPerChunk); this.index = 0; } } } return true; } } registerProcessor('audio-processor', AudioProcessor); `; // 初始化WebSocket连接 const initSocket = (wsUrl) => { return new Promise((resolve, reject) => { socket.value = new WebSocket(wsUrl); socket.value.onopen = () => { console.log('open') isSocketConnected.value = true; resolve(); }; socket.value.onerror = (error) => { reject(error); }; socket.value.onclose = () => { isSocketConnected.value = false; }; socket.value.onmessage = handleMessage; }); }; const handleMessage = (values) => { try { const data = JSON.parse(event.data); if (data.text) { const { asrEnd, text } = data if (asrEnd === 'true') { recognizedText.value += data.text; } else { lastFinalText.value = ''; } } } catch (error) { console.error('解析识别结果失败:', error); } } // 处理音频切片 const processAudioChunk = (isSilent) => { const now = Date.now(); if (!isSilent) { // 检测到声音 lastSoundTime.value = now; if (silenceStartTime.value > 0) { // 从静音恢复到有声音 silenceStartTime.value = 0; } } else { // 静音状态 if (silenceStartTime.value === 0) { silenceStartTime.value = now; } // 检查是否达到静音切片条件 if (now - silenceStartTime.value >= SILENCE_DURATION && now - currentChunkStartTime.value >= MIN_SOUND_DURATION) { sendCurrentChunk(); } } }; // 发送当前音频块 const sendCurrentChunk = () => { if (audioChunks.value.length === 0 || !socket.value || socket.value.readyState !== WebSocket.OPEN) { return; } try { // 合并所有块 const totalBytes = audioChunks.value.reduce((total, chunk) => total + chunk.byteLength, 0); const combined = new Int16Array(totalBytes / 2); let offset = 0; audioChunks.value.forEach(chunk => { const samples = new Int16Array(chunk); combined.set(samples, offset); offset += samples.length; }); // 发送合并后的数据 socket.value.send(combined.buffer); audioChunks.value = []; // 记录新块的开始时间 currentChunkStartTime.value = Date.now(); silenceStartTime.value = 0; } catch (error) { console.error('发送音频数据时出错:', error); } }; // 开始录音 const startRecording = async () => { if (isRecording.value) return; try { // 重置状态 recognizedText.value = ''; lastFinalText.value = ''; // 重置状态 recordingDuration.value = 0; audioChunks.value = []; lastSoundTime.value = 0; currentChunkStartTime.value = Date.now(); silenceStartTime.value = 0; // 初始化WebSocket await initSocket(wsUrl); // 获取音频流 mediaStream.value = await navigator.mediaDevices.getUserMedia({ audio: { sampleRate: SAMPLE_RATE, channelCount: 1, echoCancellation: true, noiseSuppression: true, autoGainControl: false }, video: false }); // 创建音频上下文 audioContext.value = new(window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE }); // 注册AudioWorklet const blob = new Blob([workletProcessorCode], { type: 'application/javascript' }); const workletUrl = URL.createObjectURL(blob); await audioContext.value.audioWorklet.addModule(workletUrl); URL.revokeObjectURL(workletUrl); // 创建AudioWorkletNode workletNode.value = new AudioWorkletNode(audioContext.value, 'audio-processor', { processorOptions: { silenceThreshold: SILENCE_THRESHOLD, sampleRate: SAMPLE_RATE } }); // 处理音频数据 workletNode.value.port.onmessage = (e) => { if (e.data.type === 'audio') { audioChunks.value.push(e.data.audioData); } else if (e.data.type === 'analysis') { audioDataForDisplay.value = e.data.frequencyData; volumeLevel.value = e.data.volume; processAudioChunk(e.data.isSilent); } }; // 连接音频节点 const source = audioContext.value.createMediaStreamSource(mediaStream.value); source.connect(workletNode.value); workletNode.value.connect(audioContext.value.destination); isRecording.value = true; } catch (error) { console.error('启动录音失败:', error); cleanup(); throw error; } }; // 停止录音 const stopRecording = async () => { if (!isRecording.value || isStopping.value) return; isStopping.value = true; try { // 发送最后一个音频块(无论是否静音) sendCurrentChunk(); // 发送结束标记 if (socket.value?.readyState === WebSocket.OPEN) { socket.value.send(JSON.stringify({ action: 'end', duration: recordingDuration.value })); await new Promise(resolve => { if (socket.value.bufferedAmount === 0) { resolve(); } else { const timer = setInterval(() => { if (socket.value.bufferedAmount === 0) { clearInterval(timer); resolve(); } }, 50); } }); socket.value.close(); } cleanup(); } catch (error) { console.error('停止录音时出错:', error); throw error; } finally { isStopping.value = false; } }; // 清理资源 const cleanup = () => { if (mediaStream.value) { mediaStream.value.getTracks().forEach(track => track.stop()); mediaStream.value = null; } if (workletNode.value) { workletNode.value.disconnect(); workletNode.value = null; } if (audioContext.value && audioContext.value.state !== 'closed') { audioContext.value.close(); audioContext.value = null; } audioChunks.value = []; isRecording.value = false; isSocketConnected.value = false; }; /// 取消录音 const cancelRecording = async () => { if (!isRecording.value || isStopping.value) return; isStopping.value = true; try { if (socket.value?.readyState === WebSocket.OPEN) { console.log('发送结束标记...'); socket.value.send(JSON.stringify({ action: 'cancel' })); socket.value.close(); } cleanup() } catch (error) { console.error('取消录音时出错:', error); throw error; } finally { isStopping.value = false; } }; onUnmounted(() => { if (isRecording.value) { stopRecording(); } }); return { isRecording, isStopping, isSocketConnected, recordingDuration, audioDataForDisplay, volumeLevel, startRecording, stopRecording, recognizedText, lastFinalText, cancelRecording }; }