diff --git a/main/xiaozhi-server/test/test_page.html b/main/xiaozhi-server/test/test_page.html index 63f9f90e..2735fb5a 100644 --- a/main/xiaozhi-server/test/test_page.html +++ b/main/xiaozhi-server/test/test_page.html @@ -452,6 +452,16 @@ let audioBuffers = []; // 用于存储接收到的所有音频数据 let totalAudioSize = 0; // 跟踪累积的音频大小 + let audioBufferQueue = []; // 存储接收到的音频包 + let isAudioBuffering = false; // 是否正在缓冲音频 + let isAudioPlaying = false; // 是否正在播放音频 + const BUFFER_THRESHOLD = 3; // 缓冲包数量阈值，至少累积3个包再开始播放 + const MIN_AUDIO_DURATION = 0.1; // 最小音频长度(秒)，小于这个长度的音频会被合并 + let streamingContext = null; // 音频流上下文 + const SAMPLE_RATE = 16000; // 采样率 + const CHANNELS = 1; // 声道数 + const FRAME_SIZE = 960; // 帧大小 + // DOM元素 const connectButton = document.getElementById('connectButton'); const serverUrlInput = document.getElementById('serverUrl'); @@ -526,221 +536,360 @@ conversationDiv.scrollTop = conversationDiv.scrollHeight; } - // 播放Opus音频数据 - function playOpusData(opusBuffers) { - if (!opusBuffers || opusBuffers.length === 0) { - log('无效的Opus数据，无法播放', 'warning'); - return; - } - if (isPlaying) { - // 已经在播放，加入队列 - audioQueue.push(opusBuffers); - log(`音频添加到队列，当前队列长度: ${audioQueue.length}`, 'debug'); - return; - } - - isPlaying = true; - - try { - // 确保音频上下文存在 - if (!audioContext) { - audioContext = new (window.AudioContext || window.webkitAudioContext)({ - sampleRate: 16000 - }); - log('创建音频上下文，采样率: 16000Hz', 'debug'); + // 开始音频缓冲过程 + function startAudioBuffering() { + if (isAudioBuffering || isAudioPlaying) return; + + isAudioBuffering = true; + log("开始音频缓冲...", 'info'); + + // 先尝试初始化解码器，以便在播放时已准备好 + initOpusDecoder().catch(error => { + log(`预初始化Opus解码器失败: ${error.message}`, 'warning'); + // 继续缓冲，我们会在播放时再次尝试初始化 + }); + + // 设置超时，如果在一定时间内没有收集到足够的音频包，就开始播放 + setTimeout(() => { + if (isAudioBuffering && audioBufferQueue.length > 0) { + log(`缓冲超时，当前缓冲包数: ${audioBufferQueue.length}，开始播放`, 'info'); + playBufferedAudio(); } - - // 确保解码器已初始化 - if (!opusDecoder) { - try { - // 检查ModuleInstance是否存在（本地库导出的全局变量） - if (typeof window.ModuleInstance === 'undefined') { - if (typeof Module !== 'undefined') { - // 尝试使用全局Module - window.ModuleInstance = Module; - log('使用全局Module作为ModuleInstance', 'info'); - } else { - throw new Error('Opus库未加载，ModuleInstance和Module对象都不存在'); - } - } - - // 初始化Opus解码器 - 16kHz采样率，单声道 - opusDecoder = { - channels: 1, - rate: 16000, - frameSize: 960, // 60ms @ 16kHz = 60 * 16 = 960 samples - frameDuration: 60, // 60ms帧时长 - module: window.ModuleInstance, // 保存模块实例的引用 - - // 使用ModuleInstance提供的函数来解码 - decode_float: function (opusData) { - try { - const mod = this.module; // 简写引用 - - // 打印输入数据的大小 - log(`正在解码Opus数据，大小: ${opusData.length}字节`, 'debug'); - - // 为输入数据分配内存 - const inputPtr = mod._malloc(opusData.length); - mod.HEAPU8.set(opusData, inputPtr); - - // 为输出PCM数据分配内存 (每个样本为float) - const pcmSamples = this.frameSize; - const pcmPtr = mod._malloc(pcmSamples * 4); // 4字节/float - - // 创建解码器实例 - const decoderSize = mod._opus_decoder_get_size(this.channels); - log(`Opus解码器大小: ${decoderSize}字节`, 'debug'); - - const decoderPtr = mod._malloc(decoderSize); - const err = mod._opus_decoder_init(decoderPtr, this.rate, this.channels); - - if (err < 0) { - throw new Error(`Opus解码器初始化失败: ${err}`); - } - - // 解码音频帧 - const samplesDecoded = mod._opus_decode_float( - decoderPtr, - inputPtr, - opusData.length, - pcmPtr, - this.frameSize, - 0 // 不使用FEC - ); - - if (samplesDecoded < 0) { - throw new Error(`Opus解码失败，错误码: ${samplesDecoded}`); - } - - log(`解码成功，获得${samplesDecoded}个PCM样本`, 'debug'); - - // 从内存中复制PCM数据 - const pcmData = new Float32Array(samplesDecoded); - for (let i = 0; i < samplesDecoded; i++) { - pcmData[i] = mod.HEAPF32[pcmPtr / 4 + i]; - } - - // 释放内存 - mod._free(inputPtr); - mod._free(pcmPtr); - mod._free(decoderPtr); - - return pcmData; - } catch (err) { - log(`解码过程中出错: ${err.message}`, 'error'); - return new Float32Array(0); - } - } - }; - - log('Opus解码器初始化成功', 'success'); - } catch (err) { - log(`Opus解码器初始化失败: ${err.message}，尝试使用简单播放`, 'error'); - // 回退到简单播放 - simpleFallbackPlay(opusBuffers); - isPlaying = false; - return; - } - } - - // 解码所有Opus帧 - let pcmData = []; - let successCount = 0; - - for (let i = 0; i < opusBuffers.length; i++) { - try { - const opusBuffer = opusBuffers[i]; - // 确保这是Uint8Array - const opusArray = opusBuffer instanceof Uint8Array ? - opusBuffer : new Uint8Array(opusBuffer); - - // 解码Opus帧为PCM数据 - const decoded = opusDecoder.decode_float(opusArray); - if (decoded && decoded.length > 0) { - pcmData.push(decoded); - successCount++; - } - } catch (error) { - log(`Opus帧 #${i + 1} 解码错误: ${error.message}`, 'error'); - } - } - - log(`解码完成，成功: ${successCount}/${opusBuffers.length} 帧`, 'debug'); - - if (pcmData.length === 0) { - log('没有成功解码的帧，尝试使用简单播放', 'warning'); - simpleFallbackPlay(opusBuffers); - isPlaying = false; + }, 300); // 300ms超时 + + // 监控缓冲进度 + const bufferCheckInterval = setInterval(() => { + if (!isAudioBuffering) { + clearInterval(bufferCheckInterval); return; } - - // 连接所有PCM数据 - const totalSamples = pcmData.reduce((acc, arr) => acc + arr.length, 0); - log(`总共解码出 ${totalSamples} 个PCM样本`, 'debug'); - - const combinedPCM = new Float32Array(totalSamples); - - let offset = 0; - for (const buffer of pcmData) { - combinedPCM.set(buffer, offset); - offset += buffer.length; + + // 当累积了足够的音频包，开始播放 + if (audioBufferQueue.length >= BUFFER_THRESHOLD) { + clearInterval(bufferCheckInterval); + log(`已缓冲 ${audioBufferQueue.length} 个音频包，开始播放`, 'info'); + playBufferedAudio(); } - - // 使用Web Audio API播放PCM数据 - const audioBuffer = audioContext.createBuffer(1, combinedPCM.length, 16000); - audioBuffer.getChannelData(0).set(combinedPCM); - - const source = audioContext.createBufferSource(); - source.buffer = audioBuffer; - source.connect(audioContext.destination); - - source.onended = () => { - isPlaying = false; - log('音频播放完成', 'debug'); - - // 播放队列中的下一个 - if (audioQueue.length > 0) { - const nextBuffers = audioQueue.shift(); - playOpusData(nextBuffers); - } - }; - - source.start(); - log(`开始播放PCM音频，时长: ${(combinedPCM.length / 16000).toFixed(2)}秒`, 'debug'); - - } catch (error) { - log(`播放Opus音频错误: ${error.message}，尝试使用简单播放`, 'error'); - simpleFallbackPlay(opusBuffers); - isPlaying = false; - } + }, 50); } - // 简单播放回退方案 - function simpleFallbackPlay(opusBuffers) { - try { - log('使用简单播放回退方案', 'warning'); - - // 创建一个简单的"滴"声作为反馈 - if (audioContext) { - const oscillator = audioContext.createOscillator(); - oscillator.type = 'sine'; - oscillator.frequency.setValueAtTime(440, audioContext.currentTime); // A4音 - - const gainNode = audioContext.createGain(); - gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); // 设置音量为0.1 - - oscillator.connect(gainNode); - gainNode.connect(audioContext.destination); - - oscillator.start(); - oscillator.stop(audioContext.currentTime + 0.2); // 播放0.2秒 - - log('播放提示音作为音频播放失败的反馈', 'info'); + // 播放已缓冲的音频 + function playBufferedAudio() { + if (isAudioPlaying || audioBufferQueue.length === 0) return; + + isAudioPlaying = true; + isAudioBuffering = false; + + // 确保Opus解码器已初始化 + const initDecoderAndPlay = async () => { + try { + // 确保音频上下文存在 + if (!audioContext) { + audioContext = new (window.AudioContext || window.webkitAudioContext)({ + sampleRate: SAMPLE_RATE + }); + log('创建音频上下文，采样率: ' + SAMPLE_RATE + 'Hz', 'debug'); + } + + // 确保解码器已初始化 + if (!opusDecoder) { + log('初始化Opus解码器...', 'info'); + try { + opusDecoder = await initOpusDecoder(); + if (!opusDecoder) { + throw new Error('解码器初始化失败'); + } + log('Opus解码器初始化成功', 'success'); + } catch (error) { + log('Opus解码器初始化失败: ' + error.message, 'error'); + isAudioPlaying = false; + return; + } + } + + // 创建流式播放上下文 + if (!streamingContext) { + streamingContext = { + queue: [], // 已解码的PCM队列 + playing: false, // 是否正在播放 + endOfStream: false, // 是否收到结束信号 + source: null, // 当前音频源 + totalSamples: 0, // 累积的总样本数 + lastPlayTime: 0, // 上次播放的时间戳 + + // 将Opus数据解码为PCM + decodeOpusFrames: async function(opusFrames) { + if (!opusDecoder) { + log('Opus解码器未初始化，无法解码', 'error'); + return; + } + + let decodedSamples = []; + + for (const frame of opusFrames) { + try { + // 使用Opus解码器解码 + const frameData = opusDecoder.decode(frame); + if (frameData && frameData.length > 0) { + // 转换为Float32 + const floatData = convertInt16ToFloat32(frameData); + decodedSamples.push(...floatData); + } + } catch (error) { + log("Opus解码失败: " + error.message, 'error'); + } + } + + if (decodedSamples.length > 0) { + // 添加到解码队列 + this.queue.push(...decodedSamples); + this.totalSamples += decodedSamples.length; + + // 如果累积了至少0.2秒的音频，开始播放 + const minSamples = SAMPLE_RATE * MIN_AUDIO_DURATION; + if (!this.playing && this.queue.length >= minSamples) { + this.startPlaying(); + } + } else { + log('没有成功解码的样本', 'warning'); + } + }, + + // 开始播放音频 + startPlaying: function() { + if (this.playing || this.queue.length === 0) return; + + this.playing = true; + + // 创建新的音频缓冲区 + const minPlaySamples = Math.min(this.queue.length, SAMPLE_RATE); // 最多播放1秒 + const currentSamples = this.queue.splice(0, minPlaySamples); + + const audioBuffer = audioContext.createBuffer(CHANNELS, currentSamples.length, SAMPLE_RATE); + audioBuffer.copyToChannel(new Float32Array(currentSamples), 0); + + // 创建音频源 + this.source = audioContext.createBufferSource(); + this.source.buffer = audioBuffer; + + // 创建增益节点用于平滑过渡 + const gainNode = audioContext.createGain(); + + // 应用淡入淡出效果避免爆音 + const fadeDuration = 0.02; // 20毫秒 + gainNode.gain.setValueAtTime(0, audioContext.currentTime); + gainNode.gain.linearRampToValueAtTime(1, audioContext.currentTime + fadeDuration); + + const duration = audioBuffer.duration; + if (duration > fadeDuration * 2) { + gainNode.gain.setValueAtTime(1, audioContext.currentTime + duration - fadeDuration); + gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + duration); + } + + // 连接节点并开始播放 + this.source.connect(gainNode); + gainNode.connect(audioContext.destination); + + this.lastPlayTime = audioContext.currentTime; + log(`开始播放 ${currentSamples.length} 个样本，约 ${(currentSamples.length / SAMPLE_RATE).toFixed(2)} 秒`, 'info'); + + // 播放结束后的处理 + this.source.onended = () => { + this.source = null; + this.playing = false; + + // 如果队列中还有数据或者缓冲区有新数据，继续播放 + if (this.queue.length > 0) { + setTimeout(() => this.startPlaying(), 10); + } else if (audioBufferQueue.length > 0) { + // 缓冲区有新数据，进行解码 + const frames = [...audioBufferQueue]; + audioBufferQueue = []; + this.decodeOpusFrames(frames); + } else if (this.endOfStream) { + // 流已结束且没有更多数据 + log("音频播放完成", 'info'); + isAudioPlaying = false; + streamingContext = null; + } else { + // 等待更多数据 + setTimeout(() => { + // 如果仍然没有新数据，但有更多的包到达 + if (this.queue.length === 0 && audioBufferQueue.length > 0) { + const frames = [...audioBufferQueue]; + audioBufferQueue = []; + this.decodeOpusFrames(frames); + } else if (this.queue.length === 0 && audioBufferQueue.length === 0) { + // 真的没有更多数据了 + log("音频播放完成 (超时)", 'info'); + isAudioPlaying = false; + streamingContext = null; + } + }, 500); // 500ms超时 + } + }; + + this.source.start(); + } + }; + } + + // 开始处理缓冲的数据 + const frames = [...audioBufferQueue]; + audioBufferQueue = []; // 清空缓冲队列 + + // 解码并播放 + await streamingContext.decodeOpusFrames(frames); + + } catch (error) { + log(`播放已缓冲的音频出错: ${error.message}`, 'error'); + isAudioPlaying = false; + streamingContext = null; } + }; + + // 执行初始化和播放 + initDecoderAndPlay(); + } + + // 将Int16音频数据转换为Float32音频数据 + function convertInt16ToFloat32(int16Data) { + const float32Data = new Float32Array(int16Data.length); + for (let i = 0; i < int16Data.length; i++) { + // 将[-32768,32767]范围转换为[-1,1] + float32Data[i] = int16Data[i] / (int16Data[i] < 0 ? 0x8000 : 0x7FFF); + } + return float32Data; + } + + // 初始化Opus解码器 - 确保完全初始化完成后才返回 + async function initOpusDecoder() { + if (opusDecoder) return opusDecoder; // 已经初始化 + + try { + // 检查ModuleInstance是否存在 + if (typeof window.ModuleInstance === 'undefined') { + if (typeof Module !== 'undefined') { + // 使用全局Module作为ModuleInstance + window.ModuleInstance = Module; + log('使用全局Module作为ModuleInstance', 'info'); + } else { + throw new Error('Opus库未加载，ModuleInstance和Module对象都不存在'); + } + } + + const mod = window.ModuleInstance; + + // 创建解码器对象 + opusDecoder = { + channels: CHANNELS, + rate: SAMPLE_RATE, + frameSize: FRAME_SIZE, + module: mod, + decoderPtr: null, // 初始为null + + // 初始化解码器 + init: function() { + if (this.decoderPtr) return true; // 已经初始化 + + // 获取解码器大小 + const decoderSize = mod._opus_decoder_get_size(this.channels); + log(`Opus解码器大小: ${decoderSize}字节`, 'debug'); + + // 分配内存 + this.decoderPtr = mod._malloc(decoderSize); + if (!this.decoderPtr) { + throw new Error("无法分配解码器内存"); + } + + // 初始化解码器 + const err = mod._opus_decoder_init( + this.decoderPtr, + this.rate, + this.channels + ); + + if (err < 0) { + this.destroy(); // 清理资源 + throw new Error(`Opus解码器初始化失败: ${err}`); + } + + log("Opus解码器初始化成功", 'success'); + return true; + }, + + // 解码方法 + decode: function(opusData) { + if (!this.decoderPtr) { + if (!this.init()) { + throw new Error("解码器未初始化且无法初始化"); + } + } + + try { + const mod = this.module; + + // 为Opus数据分配内存 + const opusPtr = mod._malloc(opusData.length); + mod.HEAPU8.set(opusData, opusPtr); + + // 为PCM输出分配内存 + const pcmPtr = mod._malloc(this.frameSize * 2); // Int16 = 2字节 + + // 解码 + const decodedSamples = mod._opus_decode( + this.decoderPtr, + opusPtr, + opusData.length, + pcmPtr, + this.frameSize, + 0 // 不使用FEC + ); + + if (decodedSamples < 0) { + mod._free(opusPtr); + mod._free(pcmPtr); + throw new Error(`Opus解码失败: ${decodedSamples}`); + } + + // 复制解码后的数据 + const decodedData = new Int16Array(decodedSamples); + for (let i = 0; i < decodedSamples; i++) { + decodedData[i] = mod.HEAP16[(pcmPtr >> 1) + i]; + } + + // 释放内存 + mod._free(opusPtr); + mod._free(pcmPtr); + + return decodedData; + } catch (error) { + log(`Opus解码错误: ${error.message}`, 'error'); + return new Int16Array(0); + } + }, + + // 销毁方法 + destroy: function() { + if (this.decoderPtr) { + this.module._free(this.decoderPtr); + this.decoderPtr = null; + } + } + }; + + // 初始化解码器 + if (!opusDecoder.init()) { + throw new Error("Opus解码器初始化失败"); + } + + return opusDecoder; + } catch (error) { - log(`简单播放回退方案也失败: ${error.message}`, 'error'); + log(`Opus解码器初始化失败: ${error.message}`, 'error'); + opusDecoder = null; // 重置为null，以便下次重试 + throw error; } } @@ -1481,6 +1630,14 @@ // 初始化Opus编码器 initOpusEncoder(); + + // 预加载Opus解码器 + log('预加载Opus解码器...', 'info'); + initOpusDecoder().then(() => { + log('Opus解码器预加载成功', 'success'); + }).catch(error => { + log(`Opus解码器预加载失败: ${error.message}，将在需要时重试`, 'warning'); + }); } // PCM录音处理器代码 - 会被注入到AudioWorklet中 @@ -1647,7 +1804,6 @@ let audioProcessor = null; let audioProcessorType = null; let audioSource = null; - let pcmBuffers = []; // 处理PCM缓冲数据 let pcmDataBuffer = new Int16Array(); @@ -1895,7 +2051,6 @@ } } - // 处理二进制消息 async function handleBinaryMessage(data) { try { let arrayBuffer; @@ -1917,10 +2072,25 @@ const opusData = new Uint8Array(arrayBuffer); if (opusData.length > 0) { - // 播放Opus音频 - playOpusData([opusData]); + // 将数据添加到缓冲队列 + audioBufferQueue.push(opusData); + + // 如果收到的是第一个音频包，开始缓冲过程 + if (audioBufferQueue.length === 1 && !isAudioBuffering && !isAudioPlaying) { + startAudioBuffering(); + } } else { - log('收到空音频数据帧', 'warning'); + log('收到空音频数据帧，可能是结束标志', 'warning'); + + // 如果缓冲队列中有数据且没有在播放，立即开始播放 + if (audioBufferQueue.length > 0 && !isAudioPlaying) { + playBufferedAudio(); + } + + // 如果正在播放，发送结束信号 + if (isAudioPlaying && streamingContext) { + streamingContext.endOfStream = true; + } } } catch (error) { log(`处理二进制消息出错: ${error.message}`, 'error');