diff --git a/dsLightRag/static/YunXiao/xueban.js b/dsLightRag/static/YunXiao/xueban.js index 0f903dc6..b9d37b36 100644 --- a/dsLightRag/static/YunXiao/xueban.js +++ b/dsLightRag/static/YunXiao/xueban.js @@ -204,26 +204,28 @@ const WebSocketManager = { console.error('原始消息内容:', event.data); } } else { + // 修改WebSocketManager.handleMessage方法(约第210-225行) // 二进制音频数据 console.log('收到音频数据,大小:', event.data.size); console.log('音频数据类型:', event.data.type); - // 保存到原始音频块数组(保持原有逻辑) + // 保存到原始音频块数组 AudioState.playback.audioChunks.push(event.data); // 添加到音频队列(用于流式播放) AudioState.playback.audioQueue.push(event.data); console.log('当前音频队列长度:', AudioState.playback.audioQueue.length); - // 显示播放界面 - 这是新增的代码 - UIController.toggleElement('audioPlayer', true); + // 显示播放界面 + UIController.toggleElement('resultContainer', true); - // 如果尚未开始流式播放,则开始播放 + // 关键修复:立即开始处理音频队列,实现流式播放 if (!AudioState.playback.isStreamPlaying) { - console.log('开始流式播放音频'); AudioState.playback.isStreamPlaying = true; AudioPlayer.processAudioQueue(); } + + return; } }, @@ -323,8 +325,26 @@ const AudioPlayer = { } }, + // 播放/暂停切换 + // 修改AudioPlayer.togglePlay方法 // 播放/暂停切换 togglePlay() { + // 首先检查是否在流式播放 + if (AudioState.playback.isStreamPlaying && AudioState.playback.streamAudioElement) { + // 流式播放模式 + if (AudioState.playback.streamAudioElement.paused) { + // 如果当前是暂停状态,播放 + AudioState.playback.streamAudioElement.play(); + UIController.updatePlayButton(true); + } else { + // 如果当前正在播放,暂停 + AudioState.playback.streamAudioElement.pause(); + UIController.updatePlayButton(false); + } + return; + } + + // 常规播放模式 if (!AudioState.playback.audioElement) return; if (AudioState.playback.isPlaying) { @@ -333,7 +353,6 @@ const AudioPlayer = { this.play(); } }, - // 播放 play() { if (!AudioState.playback.audioElement) return; @@ -373,6 +392,7 @@ const AudioPlayer = { UIController.updateTimeDisplay(currentTime, duration); }, + // 在AudioPlayer.initStreamPlayer方法中添加暂停事件监听 // 初始化流式播放器 initStreamPlayer() { // 创建新的音频元素用于流式播放 @@ -382,13 +402,26 @@ const AudioPlayer = { // 监听音频结束事件 AudioState.playback.streamAudioElement.addEventListener('ended', () => { // 当前音频播放完毕,处理队列中的下一个音频 + UIController.updatePlayButton(false); // 更新按钮状态 this.processAudioQueue(); }); + // 监听暂停事件 + AudioState.playback.streamAudioElement.addEventListener('pause', () => { + // 当音频暂停时,更新按钮状态 + UIController.updatePlayButton(false); + }); + + // 监听播放事件 + AudioState.playback.streamAudioElement.addEventListener('play', () => { + // 当音频开始播放时,更新按钮状态 + UIController.updatePlayButton(true); + }); + // 监听错误事件 AudioState.playback.streamAudioElement.addEventListener('error', (e) => { console.error('流式播放音频错误:', e); - // 即使出错,也继续处理队列中的下一个音频 + UIController.updatePlayButton(false); // 更新按钮状态 this.processAudioQueue(); }); } @@ -411,19 +444,20 @@ const AudioPlayer = { // 从队列中取出第一个音频块 const audioBlob = AudioState.playback.audioQueue.shift(); console.log('从队列取出音频块,剩余队列长度:', AudioState.playback.audioQueue.length); - - // 创建音频URL + + // 创建音频URL并设置为源 const audioUrl = URL.createObjectURL(audioBlob); - - // 设置音频源并播放 AudioState.playback.streamAudioElement.src = audioUrl; + + // 修改AudioPlayer.processAudioQueue方法中的播放部分 AudioState.playback.streamAudioElement.play() .then(() => { console.log('开始播放音频块'); + // 关键修复:更新播放按钮状态为播放中 + UIController.updatePlayButton(true); }) .catch(error => { console.error('播放音频块失败:', error); - // 播放失败,继续处理下一个 this.processAudioQueue(); }) .finally(() => {