From 21b36468205774b16f6ca9da385217e7fbc85f2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B0=E5=B2=A9?= <tybb88x@gmail.com>
Date: Fri, 5 Dec 2025 17:37:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91ai=E8=81=8A=E5=A4=A9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   8 +-
 src/pages.json                                |   1 +
 .../sparring/components/talk-microphone.vue   | 358 +++++++++++++
 .../sparring/components/talk-speaker.vue      |  99 ++++
 src/pages/sparring/js/StreamPlayer.js         |   1 -
 src/pages/sparring/js/useMicrophone.js        | 149 ++++++
 src/pages/sparring/js/useSpeaker.js           | 129 +++++
 src/pages/sparring/js/useWebSocket.js         | 118 +++++
 src/pages/sparring/talk.vue                   | 407 ++++++---------
 src/pages/sparring/talk4.vue                  | 492 ++++++++++++++++++
 src/pages/sparring/tip.vue                    |   3 +
 src/pagesB.json                               |   1 +
 .../yao-RecordFrame/yao-RecordFrame.vue       |   1 +
 13 files changed, 1511 insertions(+), 256 deletions(-)
 create mode 100644 src/pages/sparring/components/talk-microphone.vue
 create mode 100644 src/pages/sparring/components/talk-speaker.vue
 create mode 100644 src/pages/sparring/js/useMicrophone.js
 create mode 100644 src/pages/sparring/js/useSpeaker.js
 create mode 100644 src/pages/sparring/js/useWebSocket.js
 create mode 100644 src/pages/sparring/talk4.vue

diff --git a/.env.development b/.env.development
index cf4545bf..f235ef78 100644
--- a/.env.development
+++ b/.env.development
@@ -5,19 +5,17 @@ ENV = 'development'
 
 # VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
 
-#VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
-
-
+VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
 
 # VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
 # VITE_APP_BASE_API_Url = 'http://192.168.247.200'
 # VITE_APP_BASE_API_Url = 'http://aitscdn.jlbank.com.cn:7001'
 # VITE_APP_BASE_API_Url = 'http://192.168.108.129'
 # dev
-# VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
+#VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
 # sit
 
-VITE_APP_BASE_API_Url = 'http://25.18.122.91:9786'
+#VITE_APP_BASE_API_Url = 'http://25.18.122.91:9786'
 
 # UAT
 # VITE_APP_BASE_API_Url = 'http://25.18.122.78:9786'
diff --git a/src/pages.json b/src/pages.json
index 62ee516d..68ecbebe 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -516,6 +516,7 @@
             "path": "pages/sparring/talk",
             "style": {
                 "navigationBarTitleText": "AI陪练通话",
+                "disableSwipeBack": true,
                 "app-plus": {
                     "titleNView": false
                 }
diff --git a/src/pages/sparring/components/talk-microphone.vue b/src/pages/sparring/components/talk-microphone.vue
new file mode 100644
index 00000000..735be302
--- /dev/null
+++ b/src/pages/sparring/components/talk-microphone.vue
@@ -0,0 +1,358 @@
+<template>
+	<view :options="options" :change:options="record.startRecord" :status="status" :change:status="record.onStop">
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				options: null,
+				status: null,
+				onFrameRecorded: ()=>{},
+				onDecibels: ()=>{},
+			}
+		},
+		methods: {
+			start(option) {
+				this.options = option;
+				this.status = 'start';
+				if (option.onFrameRecorded && typeof option.onFrameRecorded === 'function') {
+					this.onFrameRecorded = option.onFrameRecorded
+				}
+				if (option.onDecibels && typeof option.onDecibels === 'function') {
+					this.onDecibels = option.onDecibels
+				}
+			},
+			stop() {
+				this.status = 'stop';
+				this.options = null;
+			},
+			frameRecorded({
+				isLastFrame,
+				frameBuffer
+			}) {
+				// console.log('1111',typeof this.onFrameRecorded);
+				this.onFrameRecorded({
+					isLastFrame,
+					frameBuffer: this.base64ToUint8Array(frameBuffer)
+				})
+				// this.$emit('onFrameRecorded', {
+				// 	isLastFrame,
+				// 	frameBuffer: this.base64ToUint8Array(frameBuffer)
+				// })
+			},
+			decibels(value) {
+				this.onDecibels(value)
+				
+				// this.$emit('currentDecibels', value);
+			},
+			base64ToUint8Array(base64) {
+				const binaryString = atob(base64.split(',')[1] || base64);
+				const len = binaryString.length;
+				const bytes = new Uint8Array(len);
+
+				for (let i = 0; i < len; i++) {
+					bytes[i] = binaryString.charCodeAt(i);
+				}
+
+				return bytes;
+			},
+			toShowToast() {
+				uni.showToast({
+					title: '发生错误,请检查是否有麦克风权限',
+					icon: 'none'
+				});
+				this.stop();
+			},
+			recordedChunks(base64) {
+				this.$emit('onStop', base64)
+
+			},
+
+		}
+	}
+</script>
+
+<script module="record" lang="renderjs">
+	// 保存需要关闭的引用
+	let mediaStream;
+	let audioContext;
+	let processor;
+	// 全局变量存储录音数据
+	let recordedChunks = [];
+	let decibelHistory = []; // 存储分贝历史数据用于可视化
+
+	// 分贝计算相关配置
+	const DB_CONFIG = {
+		minDecibels: -80, // 最小可测分贝
+		maxDecibels: -30, // 最大可测分贝
+		smoothingTimeConstant: 0.8 // 平滑系数，使分贝变化更平缓
+	};
+
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			async startRecord(options) {
+				if (options == null) return;
+
+				if (audioContext) return;
+
+				try {
+					// 配置参数
+					var a, i = options.sampleRate,
+						s = options.frameSize;
+					if (options.gain < 1.0) {
+						options.gain = 1.0;
+					}
+					if (options.gain > 20.0) {
+						options.gain = 20.0;
+					}
+
+					audioContext = new AudioContext();
+
+					// 加载并初始化AudioWorklet
+					await audioContext.audioWorklet.addModule('static/dist/processor.worklet.js');
+
+					//const mediaStream = new MediaStream();
+					mediaStream = await navigator.mediaDevices.getUserMedia({
+						audio: {
+							sampleRate: options.sampleRate,
+							channelCount: 1
+						}
+					});
+
+					const source = audioContext.createMediaStreamSource(mediaStream);
+					processor = new AudioWorkletNode(audioContext, 'processor-worklet');
+
+					// 初始化处理器
+					processor.port.postMessage({
+						type: 'init',
+						data: {
+							frameSize: options.frameSize, // 样本数 (1280字节 / 2字节每样本)
+							fromSampleRate: 48000, // 输入采样率
+							toSampleRate: options.sampleRate, // 输出采样率 (1/3)
+							arrayBufferType: 'short16',
+							gain: options.gain
+						}
+					});
+
+					// 接收40ms间隔的音频数据
+					processor.port.onmessage = (t) => {
+
+						var r = t.data,
+							o = r.frameBuffer,
+							n = r.isLastFrame;
+
+						// 计算当前帧的分贝值
+						if (o && o.byteLength > 0) {
+							const decibels = this.calculateDecibels(o);
+							this.onDecibelsCalculated(decibels); // 触发分贝回调
+
+							// 存储历史数据，限制长度
+							decibelHistory.push(decibels);
+							if (decibelHistory.length > 100) {
+								decibelHistory.shift();
+							}
+						}
+
+						if (null == o ? void 0 : o.byteLength)
+							for (var a = 0; a < o.byteLength;) {
+								const frameData = {
+									isLastFrame: n && a + s >= o.byteLength,
+									frameBuffer: t.data.frameBuffer.slice(a, a + s)
+								};
+								this.onFrameRecorded(frameData);
+
+								// 存储录音数据（仅在非暂停状态）
+								recordedChunks.push(frameData.frameBuffer);
+
+								a += s;
+							}
+						else this.onFrameRecorded(t.data);
+
+					};
+
+					source.connect(processor);
+					processor.connect(audioContext.destination);
+				} catch (err) {
+					this.$ownerInstance.callMethod('toShowToast');
+
+				}
+
+
+			},
+			onFrameRecorded({
+				isLastFrame,
+				frameBuffer
+			}) {
+				this.$ownerInstance.callMethod('frameRecorded', {
+					isLastFrame,
+					frameBuffer: this.toBase64(frameBuffer)
+				});
+			},
+			calculateDecibels(frameBuffer) {
+				try {
+					// 将帧数据转换为16位整数数组
+					const samples = new Int16Array(frameBuffer);
+
+					// 计算均方根(RMS)
+					let sum = 0;
+					for (let i = 0; i < samples.length; i++) {
+						const value = samples[i] / 32768; // 归一化到[-1, 1]范围
+						sum += value * value; // 平方和
+					}
+
+					const rms = Math.sqrt(sum / samples.length);
+
+					// 防止log(0)错误
+					if (rms < 0.00001) {
+						return DB_CONFIG.minDecibels;
+					}
+
+					// 转换为分贝 (20 * log10(rms))
+					let db = 20 * Math.log10(rms);
+
+					// 应用平滑处理
+					if (decibelHistory.length > 0) {
+						const lastDb = decibelHistory[decibelHistory.length - 1];
+						db = lastDb * DB_CONFIG.smoothingTimeConstant + db * (1 - DB_CONFIG.smoothingTimeConstant);
+					}
+
+					// 限制分贝范围
+					return Math.max(DB_CONFIG.minDecibels, Math.min(DB_CONFIG.maxDecibels, db));
+				} catch (e) {
+					console.error('计算分贝时出错:', e);
+					return DB_CONFIG.minDecibels;
+				}
+			},
+			onDecibelsCalculated(decibels) {
+				//console.log(`当前分贝: ${decibels.toFixed(1)} dB`);
+				this.$ownerInstance.callMethod('decibels', decibels.toFixed(1));
+				// 可以在这里添加分贝可视化逻辑
+				// 例如更新UI显示当前音量
+			},
+			toBase64(buffer) {
+				let binary = "";
+				const bytes = new Uint8Array(buffer);
+				const len = bytes.byteLength;
+				for (let i = 0; i < len; i++) {
+					binary += String.fromCharCode(bytes[i]);
+				}
+				return window.btoa(binary);
+			},
+			async onRecordedChunks(chunks) {
+
+				var mergedBuffer = this.mergeAudioBuffers(chunks);
+				// 2. 将合并的二进制流转换为WAV格式（需要添加WAV文件头）
+				const wavBlob = this.createWavBlob(mergedBuffer, 1, 16000); // 单声道，44100Hz
+				// 3. 将WAV转为Base64（可选，若需传输）
+				const base64 = await this.blobToBase64(wavBlob);
+				this.$ownerInstance.callMethod('recordedChunks', base64)
+			},
+			onStop(value) {
+				if (value !== 'stop') return;
+
+
+				this.onFrameRecorded({
+					isLastFrame: true,
+					frameBuffer: ''
+				});
+
+				this.onRecordedChunks(recordedChunks);
+
+				recordedChunks = [];
+
+				if (mediaStream) {
+					// 停止所有媒体轨道
+					mediaStream.getTracks().forEach(track => track.stop());
+					mediaStream = null;
+				}
+
+				if (processor) {
+					// 断开音频节点连接
+					processor.disconnect();
+					processor = null;
+				}
+
+				if (audioContext) {
+					// 关闭音频上下文
+					audioContext.close().then(() => {
+						audioContext = null;
+					});
+				}
+			},
+			//合并所有buffer
+			mergeAudioBuffers(buffers) {
+				let totalLength = buffers.reduce((acc, buf) => acc + buf.byteLength, 0);
+				const result = new Uint8Array(totalLength);
+				let offset = 0;
+				buffers.forEach(buffer => {
+					result.set(new Uint8Array(buffer), offset);
+					offset += buffer.byteLength;
+				});
+				// 验证合并后的长度是否正确
+				if (offset !== totalLength) console.error("合并后的长度不符！");
+				return result.buffer;
+			},
+			// 新增WAV封装函数（基于前序回答的createWavBlob）
+			createWavBlob(pcmData, numChannels, sampleRate) {
+				const bytesPerSample = 2; // 16-bit PCM
+				const blockAlign = numChannels * bytesPerSample;
+				const byteRate = sampleRate * blockAlign;
+				const bufferLength = pcmData.byteLength;
+				const totalLength = 44 + bufferLength; // WAV头(44字节) + 音频数据
+
+				const buffer = new ArrayBuffer(totalLength);
+				const view = new DataView(buffer);
+
+				// 写入WAV文件头（RIFF、fmt、data区块）
+				this.writeString(view, 0, 'RIFF');
+				view.setUint32(4, totalLength - 8, true);
+				this.writeString(view, 8, 'WAVE');
+				this.writeString(view, 12, 'fmt ');
+				view.setUint32(16, 16, true); // fmt区块大小
+				view.setUint16(20, 1, true); // PCM格式
+				view.setUint16(22, numChannels, true);
+				view.setUint32(24, sampleRate, true);
+				view.setUint32(28, byteRate, true);
+				view.setUint16(32, blockAlign, true);
+				view.setUint16(34, 16, true); // 16位采样
+				this.writeString(view, 36, 'data');
+				view.setUint32(40, bufferLength, true);
+
+				// 写入音频数据（假设pcmData是Uint8Array，需转换为16位PCM）
+				const pcm16 = new Int16Array(pcmData);
+				for (let i = 0; i < pcm16.length; i++) {
+					view.setInt16(44 + i * 2, pcm16[i], true);
+				}
+
+				return new Blob([buffer], {
+					type: 'audio/wav'
+				});
+			},
+			// 辅助函数：Blob转Base64
+			blobToBase64(blob) {
+				return new Promise((resolve, reject) => {
+					const reader = new FileReader();
+					reader.onloadend = () => resolve(reader.result);
+					reader.onerror = reject;
+					reader.readAsDataURL(blob);
+				});
+			},
+			// 辅助函数：字符串写入DataView
+			writeString(view, offset, string) {
+				for (let i = 0; i < string.length; i++) {
+					view.setUint8(offset + i, string.charCodeAt(i));
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/sparring/components/talk-speaker.vue b/src/pages/sparring/components/talk-speaker.vue
new file mode 100644
index 00000000..ed364e38
--- /dev/null
+++ b/src/pages/sparring/components/talk-speaker.vue
@@ -0,0 +1,99 @@
+<template>
+	<view
+		ref="renderJSModule"
+		:pcmChunk="currentPCMChunk"
+		:change:pcmChunk="renderJS.appendPCMChunk"
+		:isStop="isStop"
+		:change:isStop="renderJS.stop"
+		:audioOutput="audioOutput"
+		:change:audioOutput="renderJS.switchAudioOutput"
+		type="renderjs"
+		module="renderJS"
+	></view>
+</template>
+
+<script setup>
+	import { ref, onUnmounted, watch, onMounted } from 'vue';
+	const isStop = ref(false);
+	const currentPCMChunk = ref(false);
+	const audioOutput = ref('');
+	// 响应式状态
+	const isPlaying = ref(false); // 是否正在播放
+	const volume = ref(); // 播放音量（0~1）
+	const playPCM = (pcmData) => {
+		if (!pcmData || pcmData.byteLength === 0) return;
+		currentPCMChunk.value = pcmData;
+	};
+	const close = () => {
+		isStop.value = false;
+	};
+	const changeStreamPlaying = () => {
+		console.log('播放结束');
+	};
+	const switchOutput = (type) => {
+		if (['speaker', 'earpiece'].includes(type)) {
+			audioOutput.value = type;
+		}
+	};
+
+	defineExpose({ playPCM, close, switchOutput });
+</script>
+
+<script module="renderJS" lang="renderjs">
+	import { StreamPlayer } from "../js/StreamPlayer";
+	let player = null;
+
+	export default {
+	  mounted() {
+	    const _this = this;
+		player = new StreamPlayer({
+		  inputSampleRate: 44100, // 后端PCM采样率（如8000/24000）
+		  numChannels: 1,         // 声道数（单声道/双声道）
+		  bitDepth: 16,           // 位深（16/32bit）
+		  littleEndian: true,     // 端序（和后端一致）
+		  pcmType: 'int',         // 类型（int/float）
+		  callback: _this.callback
+		});
+		this.switchAudioOutput('speaker');
+	  },
+	  methods: {
+		  appendPCMChunk(numArray) {
+				// console.log('接收到', numArray.length);
+				if (!numArray || numArray.length === 0) return;
+				  // 数字数组转回ArrayBuffer
+				  const uint8 = new Uint8Array(numArray);
+				  const arrayBuffer = uint8.buffer;
+				  player.appendChunk(arrayBuffer);
+		  },
+		  // 切换扬声器/听筒核心方法
+		switchAudioOutput(type) {
+			// plus.audio.setAudioRoute(type === 'speaker' ? 'speaker' : 'earpiece');
+
+		},
+	    // 停止播放（销毁播放器）
+	    stop() {
+	      if (player) {
+	        player.destroy();
+	        player = null;
+	        // 重新初始化（方便后续再次播放）
+	        const _this = this;
+	        player = new StreamPlayer({
+	          inputSampleRate: 16000,
+	          numChannels: 1,
+	          bitDepth: 16,
+	          littleEndian: true,
+	          pcmType: 'int',
+	          callback: _this.callback
+	        });
+	      }
+	    },
+	    // 播放结束回调（通知主线程）
+	    callback(e) {
+	      if (e === 'ended') {
+	        this.$ownerInstance.callMethod('changeStreamPlaying', { type: false });
+	      }
+	    }
+	  }
+	};
+</script>
+<style></style>
diff --git a/src/pages/sparring/js/StreamPlayer.js b/src/pages/sparring/js/StreamPlayer.js
index f0340d68..0e1c7bce 100644
--- a/src/pages/sparring/js/StreamPlayer.js
+++ b/src/pages/sparring/js/StreamPlayer.js
@@ -30,7 +30,6 @@ export class StreamPlayer {
 	}
 
 	appendChunk(audioData) {
-		console.log('this.audioQueue', this.audioQueue.length);
 		this.audioQueue.push(audioData);
 		this._processQueue();
 	}
diff --git a/src/pages/sparring/js/useMicrophone.js b/src/pages/sparring/js/useMicrophone.js
new file mode 100644
index 00000000..af6863c2
--- /dev/null
+++ b/src/pages/sparring/js/useMicrophone.js
@@ -0,0 +1,149 @@
+import {
+	ref,
+	onUnmounted,
+	watch
+} from 'vue';
+	import {
+		ProtocolCodec,
+		MessageType,
+		SerializationType,
+		CompressionType,
+		ControlCommand,
+		ProtocolConst
+	} from './ProtocolCodec';
+/**
+ * 麦克风操作Hook（封装开始/停止录音、状态管理）
+ * @param {Object} options - 录音配置项
+ * @param {number} options.duration - 最大录音时长（秒，默认60）
+ * @param {string} options.format - 录音格式（mp3/wav/pcm，默认mp3）
+ * @param {number} options.sampleRate - 采样率（默认16000）
+ * @param {number} options.bitRate - 码率（默认16000）
+ * @param {Function} options.onData - 实时音频数据回调（仅H5/PCM格式生效）
+ * @param {Function} options.onStop - 结束回调
+ * @param {Function} options.onError - 错误回调
+ * @returns {Object} 录音控制方法+状态
+ */
+export default function useMicrophone(options = {}) {
+	console.log('options', options);
+	const send = options.send
+	const recordFrame = ref(null)
+	const renderJSModule = ref(null)
+	
+	// 默认配置
+	const defaultOptions = {
+		duration: 60,
+		format: 'mp3',
+		sampleRate: 16000,
+		bitRate: 16000,
+		onData: () => {},
+		onStop: () => {},
+		onError: (err) => console.error('录音错误：', err)
+	};
+	const finalOptions = {
+		...defaultOptions,
+		...options
+	};
+
+	// 响应式状态
+	const isRecording = ref(false); // 是否正在录音
+	const recordTime = ref(0); // 录音时长（秒）
+	const recordResult = ref(null); // 录音结果（临时文件路径/Blob）
+	const recorderManager = ref(null); // 录音管理器实例（uniapp/小程序）
+	const audioContext = ref(null); // AudioContext（H5）
+	const mediaRecorder = ref(null); // MediaRecorder（H5）
+	const timer = ref(null); // 录音时长定时器
+
+	// 平台判断
+	const platform = uni.getSystemInfoSync().platform;
+
+	// ==================== 核心方法：开始录音 ====================
+	const startRecording = async () => {
+		// 防止重复点击
+		if (isRecording.value) return;
+
+		// 重置状态
+		recordTime.value = 0;
+		recordResult.value = null;
+		console.log('开始', recordFrame.value);
+		recordFrame.value.start({
+			sampleRate: 16000,
+			frameSize: 1024,
+			gain: 1.0,
+			onFrameRecorded: ({ isLastFrame, frameBuffer }) => {
+				// console.log('录音返回', frameBuffer);
+				const data = ProtocolCodec.pack(MessageType.AUDIO_DATA, frameBuffer)
+				// console.log('录音返回', data);
+				send(data)
+				// try {
+				// 	ws.value.send({
+				// 		data: ProtocolCodec.pack(MessageType.AUDIO_DATA, frameBuffer)
+				// 	});
+				// } catch (e) {}
+			},
+			onDecibels: (decibels) => {
+				// this.currentDecibels = decibels;
+			}
+		});
+		// this.isRecording = true;
+		// this.status = '录音中...';
+		// isRecording.value = true;
+
+	};
+
+	// ==================== 核心方法：停止录音 ====================
+	const stopRecord = () => {
+		// if (!isRecording.value) return;
+
+		// try {
+		//   if (isH5) {
+		//     mediaRecorder.value?.stop();
+		//   } else if (isMiniProgram || platform === 'app-plus') {
+		//     recorderManager.value?.stop();
+		//   }
+		//   isRecording.value = false;
+		//   clearInterval(timer.value);
+		// } catch (err) {
+		//   finalOptions.onError(`停止录音失败：${err.message}`);
+		// }
+	};
+
+	// ==================== 资源清理 ====================
+	const cleanup = () => {
+		// stopRecord();
+		// // H5端额外清理
+		// if (isH5) {
+		//   if (mediaRecorder.value) mediaRecorder.value = null;
+		//   if (audioContext.value) audioContext.value.close();
+		//   // 释放Blob URL
+		//   if (recordResult.value?.url) {
+		//     URL.revokeObjectURL(recordResult.value.url);
+		//   }
+		// }
+		// // 小程序/APP端清理
+		// if (recorderManager.value) recorderManager.value = null;
+	};
+
+	// 组件卸载时自动清理
+	// onUnmounted(() => {
+	//   cleanup();
+	// });
+
+	// 监听最大时长，自动停止
+	// watch(
+	//   () => recordTime.value,
+	//   (val) => {
+	//     if (val >= finalOptions.duration) {
+	//       stopRecord();
+	//     }
+	//   }
+	// );
+
+	// 返回控制方法+状态
+	return {
+		
+		isRecording,
+		renderJSModule,
+		startRecording,
+		recordFrame
+	};
+};
\ No newline at end of file
diff --git a/src/pages/sparring/js/useSpeaker.js b/src/pages/sparring/js/useSpeaker.js
new file mode 100644
index 00000000..568ca088
--- /dev/null
+++ b/src/pages/sparring/js/useSpeaker.js
@@ -0,0 +1,129 @@
+import {
+	ref,
+	onUnmounted,
+	watch
+} from 'vue';
+
+/**
+ * 扬声器管理Hook（音频输出）
+ * @param {Object} options - 播放配置
+ * @param {number} options.sampleRate - 播放采样率（默认16000，需与音频源一致）
+ * @param {number} options.volume - 初始音量（0~1，默认1）
+ * @param {boolean} options.autoPlay - 是否自动播放（默认false，需用户交互触发）
+ * @param {Function} options.onPlay - 播放开始回调
+ * @param {Function} options.onError - 播放错误回调
+ * @returns {Object} 播放控制方法+状态
+ */
+export const useSpeaker = (options = {}) => {
+	// 默认配置
+	const defaultOptions = {
+		sampleRate: 16000,
+		volume: 1.0,
+		autoPlay: false,
+		onPlay: () => {},
+		onError: (err) => console.error('扬声器播放错误：', err)
+	};
+	const finalOptions = {
+		...defaultOptions,
+		...options
+	};
+
+	// 响应式状态
+	const isPlaying = ref(false); // 是否正在播放
+	const volume = ref(finalOptions.volume); // 播放音量（0~1）
+	const audioContext = ref(null); // 音频播放上下文（H5）
+	const audioBufferSource = ref(null); // 音频缓冲源（播放PCM流）
+	const audioElement = ref(null); // 音频元素（播放文件/URL）
+	const playQueue = ref([]); // 音频数据播放队列（适配实时流）
+
+	// 平台判断
+	const isH5 = uni.getSystemInfoSync().platform === 'h5';
+
+	// ==================== 初始化播放上下文 ====================
+	const initAudioContext = () => {
+
+	};
+
+	// ==================== 核心方法：播放PCM音频流（实时） ====================
+	/**
+	 * 播放PCM音频数据（适配WebSocket传输的实时流）
+	 * @param {ArrayBuffer} pcmData - PCM音频数据（16位单声道）
+	 */
+	const playPCM = (pcmData) => {
+
+
+
+	};
+
+	// ==================== 控制方法：暂停/停止/调节音量 ====================
+	const pausePlay = () => {
+		if (!isPlaying.value) return;
+
+		if (isH5) {
+			if (audioBufferSource.value) {
+				audioBufferSource.value.stop();
+				audioBufferSource.value = null;
+			}
+			audioElement.value?.pause();
+		} else {
+			uni.createInnerAudioContext().pause();
+		}
+		isPlaying.value = false;
+	};
+
+	const stopPlay = () => {
+		pausePlay();
+		playQueue.value = []; // 清空播放队列
+		if (audioContext.value) {
+			audioContext.value.close().then(() => {
+				audioContext.value = null;
+			});
+		}
+		audioElement.value = null;
+	};
+
+	const setVolume = (val) => {
+		if (val < 0) val = 0;
+		if (val > 1) val = 1;
+		volume.value = val;
+
+		if (isH5) {
+			audioContext.value?.destination.setVolume(val);
+			audioElement.value.volume = val;
+		} else {
+			uni.createInnerAudioContext().volume = val;
+		}
+	};
+
+	// ==================== 资源清理 ====================
+	const cleanup = () => {
+		stopPlay();
+		isPlaying.value = false;
+		volume.value = finalOptions.volume;
+		playQueue.value = [];
+	};
+
+	// 组件卸载时自动清理
+	onUnmounted(() => {
+		cleanup();
+	});
+
+	// 监听音量变化，同步更新
+	watch(volume, (newVal) => {
+		setVolume(newVal);
+	});
+
+	// 返回控制方法+状态
+	return {
+		// 响应式状态
+		isPlaying, // 是否正在播放
+		volume, // 当前音量（0~1）
+		// 核心方法
+		playPCM, // 播放实时PCM音频流（适配WebSocket）
+		playAudio, // 播放音频文件/URL
+		pausePlay, // 暂停播放
+		stopPlay, // 停止播放
+		setVolume, // 调节音量（0~1）
+		cleanup // 手动清理资源
+	};
+};
\ No newline at end of file
diff --git a/src/pages/sparring/js/useWebSocket.js b/src/pages/sparring/js/useWebSocket.js
new file mode 100644
index 00000000..c5d5d02d
--- /dev/null
+++ b/src/pages/sparring/js/useWebSocket.js
@@ -0,0 +1,118 @@
+import {
+	getToken
+} from '@/common/common'
+import {
+	get_base_url
+} from '@/api/request.js'
+import {
+	ref,
+	onUnmounted,
+	computed,
+	getCurrentInstance
+} from 'vue';
+import {
+	ProtocolCodec,
+	MessageType,
+	SerializationType,
+	CompressionType,
+	ControlCommand,
+	ProtocolConst
+} from './ProtocolCodec';
+const DEFAULT_AUTH_PARAMS = {
+	user_id: '1001', // 默认用户ID（可从缓存/全局状态取）
+	token: '', // 优先从缓存获取，避免硬编码
+	name: '测试用户',
+	device_id: uni.getSystemInfoSync().deviceId || '', // 设备ID（补充）
+	timestamp: Date.now() // 时间戳（防篡改）
+};
+// const wsUrl = 'ws://127.0.0.1:8000/ws/audio'
+const url = '/trapractice/voiceCallSocket/voiceCall'
+const _baseUrl = get_base_url(url).split('http').join('ws')
+export default function useWebSocket(aaas = null, options = {}) {
+	const isRecording = ref(false) //是否接通
+	const ws = ref(null)
+	const initConnection = (authParams = {}, onStartRecord, sssssss) => {
+		const wsUrl = _baseUrl + url + '?summary=' + getToken()
+		console.log('wsUrl', wsUrl);
+		const finalAuthParams = {
+			...DEFAULT_AUTH_PARAMS,
+			...authParams,
+		};
+		ws.value = uni.connectSocket({
+			url: wsUrl,
+			fail: () => {
+				console.log('fail');
+			},
+			success: () => {
+				console.log('web');
+			},
+			fail: () => {
+				console.log('fail');
+			}
+		});
+		ws.value.onOpen((res) => {
+			ws.value.send({
+				data: ProtocolCodec.pack(MessageType.IDENTITY, finalAuthParams)
+			});
+		});
+		ws.value.onMessage((res) => {
+			const {
+				msgType,
+				body
+			} = ProtocolCodec.unpack(res.data);
+			switch (msgType) {
+				case MessageType.IDENTITY:
+					console.log('身份校验', body);
+					onStartRecord(body)
+					break;
+				case MessageType.AUDIO_DATA:
+					const buffer = body;
+					if (buffer.byteLength < 2) break;
+					const uint8 = new Uint8Array(buffer);
+					const numArray = Array.from(uint8);
+					// currentPCMChunk.value = numArray;
+					sssssss(numArray)
+					// console.log('音频消息', body);
+					break;
+				case MessageType.ERROR:
+
+					// this.handleErrorMessage(body);
+					break;
+				default:
+					console.log('其他消息', body);
+					break;
+			}
+		});
+	}
+	const send = (data) => {
+		ws.value.send({
+			data
+		});
+	}
+	const close = () => {
+		ws.value.close({
+			code: 1000,
+			reason: '用户挂断',
+			success: () => {
+				console.log('挂断success');
+			},
+			fail: () => {
+				console.log('挂断fail');
+			},
+			complete: () => {
+				console.log('挂断complete');
+			}
+
+		});
+	}
+
+
+
+	return {
+		ws,
+		close,
+		initConnection,
+		send,
+		isRecording
+	};
+}
\ No newline at end of file
diff --git a/src/pages/sparring/talk.vue b/src/pages/sparring/talk.vue
index 7947f860..fcbeecb2 100644
--- a/src/pages/sparring/talk.vue
+++ b/src/pages/sparring/talk.vue
@@ -1,8 +1,8 @@
 <template>
 	<view>
 		<cached-avatar class="show-box-avatar"></cached-avatar>
-		<nav-bar :is_seat="true"></nav-bar>
 		<view class="show-box">
+			<nav-bar :is_seat="true"></nav-bar>
 			<view class="switch-div">
 				<view class="switch-text">场景提示</view>
 				<switch class="switch" :checked="!sceneDescShow" @click="switchChange" />
@@ -10,29 +10,35 @@
 			<view class="fl1-div-1"></view>
 			<view class="role-info">
 				<cached-avatar class="role-avatar"></cached-avatar>
-				<view class="role-name">{{ userInfo.userName }}</view>
-				<view class="title-time">{{ timeShow }}</view>
+				<view class="role-name">{{ dataInfo.userName }}</view>
+				<view class="title-time" v-if="isRecording">{{ formattedTime }}</view>
+				<view class="title-tip" v-if="!isRecording">正在接通中</view>
 			</view>
 			<view class="fl1"></view>
 			<view class="body-scene" :class="{ show: sceneDescShow }">
-				{{ sceneDesc }}
+				{{ dataInfo.sceneDesc }}
 			</view>
-
 			<view class="close-btn" @click="closeTalking"></view>
 		</view>
-		<yao-RecordFrame
-			ref="recordFrame"
-			@onFrameRecorded="frameRecorded"
-			@currentDecibels="onCurrentDecibels"
-			@onStop="stopIt"
-		></yao-RecordFrame>
+		<talk-microphone ref="talkMicrophoneRef"></talk-microphone>
+		<talk-speaker ref="talkSpeakerRef"></talk-speaker>
 	</view>
 </template>
-<script>
+<script setup>
 	import { getUserInfo } from '@/common/common';
-	import talkCom from './talkCom.nvue';
 	import { queryTraPartnerCharacterInfoById, partnerChatReportTrigger } from '@/api/sparring.js';
 	import common from '@/common/common';
+	import talkMicrophone from './components/talk-microphone.vue';
+	import talkSpeaker from './components/talk-speaker.vue';
+	import useWebSocket from './js/useWebSocket';
+	import useMicrophone from './js/useMicrophone';
+	const talkMicrophoneRef = ref(null);
+	const talkSpeakerRef = ref(null);
+
+	const { initConnection, close, send, isRecording } = useWebSocket();
+
+	import { ref, reactive, onMounted, onUnmounted } from 'vue';
+	import { onShow, onLoad, onUnload, onBackPress } from '@dcloudio/uni-app';
 	import {
 		ProtocolCodec,
 		MessageType,
@@ -41,252 +47,121 @@
 		ControlCommand,
 		ProtocolConst
 	} from './js/ProtocolCodec';
-	export default {
-		components: {
-			talkCom // 注册组件
-		},
-		data() {
-			return {
-				traId: '',
-				chaId: '',
-				talkingType: '',
-				execId: '',
-				isPreview: '',
-				chaName: '',
-				sceneDesc: '场景提示文案文儿提示文',
-				sceneDescShow: false,
-				timeShow: '11',
-				isStop: '',
-				userInfo: {
-					userName: ''
-				},
-				ws: null,
-				wsUrl: 'wss://aitstest.jlbank.com.cn:7001/trapractice/voiceCallSocket/voiceCall?summary=3D072C9D242C96EA3F0FD647CB14A6F40B69FF5FF8BA968CB70A2AE3F812F1B6DFD1AAF7AEB6E777DFF5629704647095' // 替换为实际后端地址
-			};
-		},
-		methods: {
-			callPhone() {
-				// 拨打电话
-				this.ws = uni.connectSocket({
-					url: this.wsUrl,
-					fail: () => {
-						console.log('fail');
-					},
-					success: () => {
-						console.log('web');
-					},
-					fail: () => {
-						console.log('fail');
-					}
-				});
-				this.ws.onOpen((res) => {
-					console.log('WebSocket连接已打开', res);
-					this.ws.send({
-						data: ProtocolCodec.pack(MessageType.IDENTITY, {
-							user_id: '1001',
-							token: 'your_auth_token',
-							name: '测试用户'
-						})
-					});
-				});
-				this.ws.onMessage((res) => {
-					const { msgType, body } = ProtocolCodec.unpack(res.data);
-
-					if (msgType === MessageType.IDENTITY) {
-						console.log('身份校验成功', body);
-						this.onStartRecord();
-					} else if (msgType === MessageType.AUDIO_DATA) {
-						// this.$refs.aaa.appendBuffer(body)
-						// this.currentPCMChunk = body;
-						const buffer = body;
-						if (buffer.byteLength < 2) return;
-						// ArrayBuffer转数字数组
-						const uint8 = new Uint8Array(buffer);
-						const numArray = Array.from(uint8);
-						console.log('numArray', numArray.length);
-						this.currentPCMChunk = numArray; // 传递数组
-					} else {
-						console.log('其他消息', body);
-					}
-				});
-			},
-			onStartRecord() {
-				console.log('开始录音');
-				try {
-					this.$refs.recordFrame.start({
-						sampleRate: 16000,
-						frameSize: 1024,
-						gain: 1.0,
-						onFrameRecorded: ({ isLastFrame, frameBuffer }) => {
-							try {
-								this.ws.send({
-									data: ProtocolCodec.pack(MessageType.AUDIO_DATA, frameBuffer)
-								});
-							} catch (e) {}
-						},
-						onDecibels: (decibels) => {
-							this.currentDecibels = decibels;
-						}
-					});
-					this.isRecording = true;
-					this.status = '录音中...';
-				} catch (e) {
-					console.error('启动录音失败：', e);
-					this.status = '启动录音失败';
-					this.isRecording = false;
-				}
-			},
-			// 接收音频帧并处理
-			frameRecorded({ isLastFrame, frameBuffer }) {
-				if (this.ws) {
-					try {
-						this.ws.send({
-							data: frameBuffer
-						});
-					} catch (e) {
-						console.error('发送音频帧失败：', e);
-					}
-				}
-			},
-			// 监听分贝值
-			onCurrentDecibels(decibels) {
-				// this.currentDecibels = decibels.toFixed(2);
-				// console.log("当前分贝：", this.currentDecibels);
-			},
-			// 录音停止回调
-			stopIt(base64) {
-				this.stopRecordAndClean();
-				console.log('录音停止，最终音频Base64：', base64?.substring(0, 50) + '...');
-			},
-			// 关闭通话
-			closeTalking() {
-				this.overTalking();
-			},
-			// 结束通话生成报告
-			overTalking() {
-				partnerChatReportTrigger({
-					execId: this.execId,
-					traId: this.traId,
-					talkingType: this.isPreview ? 'preview' : 'practice'
-				}).then((res) => {
-					common.navigateTo(
-						'/pages/sparring/result?isOver=1&traId=' +
-							this.traId +
-							'&execId=' +
-							this.execId +
-							'&type=' +
-							this.type +
-							'&isPreview=' +
-							(this.isPreview ? '1' : '')
-					);
-				});
-			},
-			switchChange(e) {
-				this.sceneDescShow = !this.sceneDescShow;
-			},
-			// 停止录音并清理资源
-			stopRecordAndClean() {
-				if (this.isRecording) {
-					// 停止录音组件
-					this.$refs.recordFrame.stop();
-					this.isRecording = false;
-					this.status = '已停止录音';
-				}
-
-				// 关闭 WebSocket
-				if (this.ws) {
-					this.ws.close();
-					this.ws = null;
-				}
-
-				// 清理音频上下文
-				if (this.audioContext) {
-					this.audioContext.close();
-					this.audioContext = null;
-					this.scriptProcessor = null;
-					this.frameBufferList = [];
-				}
-
-				// 重置状态
-				this.currentDecibels = 0;
-			}
-		},
-
-		onLoad(e) {
-			// 页面加载时初始化数据
-			this.traId = e.traId ?? '';
-			this.chaId = e.chaId ?? '';
-			this.type = e.type ?? '';
-			this.isPreview = e.isPreview === '1';
-			this.userInfo = getUserInfo();
-			this.callPhone();
-		},
-		onBackPress(res) {
-			return res.from === 'backbutton';
-		}
+	import { getToken } from '@/common/common';
+	const dataInfo = reactive({
+		traId: '',
+		chaId: '',
+		type: '',
+		execId: '',
+		sceneDesc: '',
+		userName: '',
+		preview: false // 是否是预览
+	});
+	const sceneDescShow = ref(false);
+	const switchChange = () => {sceneDescShow.value = !sceneDescShow.value};
+	
+	// 关闭通话
+	const closeTalking = async () => {
+		// this.overTalking();
+		talkMicrophoneRef.value.stop();
+		talkSpeakerRef.value.close();
+		close();
+		common.navigateBack(1, () => {
+			partnerChatReportTrigger({
+				execId: dataInfo.execId,
+				traId: dataInfo.traId,
+				talkingType: dataInfo.isPreview ? 'preview' : 'practice'
+			}).then((res) => {
+				common.redirectTo(
+					'/pages/sparring/result?isOver=1&traId=' +
+						dataInfo.traId +
+						'&execId=' +
+						dataInfo.execId +
+						'&type=' +
+						dataInfo.type +
+						'&isPreview=' +
+						(dataInfo.isPreview ? '1' : '')
+				);
+			});
+		});
 	};
+	function frameRecorded(res) {
+		// console.log('res', res);
+		send(res);
+	}
+
+	const onCurrentDecibels = (res) => {
+		console.log('res', res);
+	};
+
+	// 1. 核心变量：目标时间戳（结束时间）- 可替换为你的时间戳
+	const targetTimestamp = ref(0); // 示例：15分钟后
+	// 定时器实例（用于清除）
+	let timer = null;
+
+	// 2. 格式化函数：总秒数 → mm:ss（分钟无上限，不进位小时）
+	const formatTime = (totalSeconds) => {
+		if (totalSeconds <= 0) return '0:00'; // 过期显示0:00
+		const minutes = Math.floor(totalSeconds / 60); // 分钟无上限
+		const seconds = totalSeconds % 60; // 秒数
+		return `${minutes}:${seconds.toString().padStart(2, '0')}`; // 秒补零
+	};
+
+	// 计算属性：实时格式化剩余时间
+	const formattedTime = ref(0);
+	// 3. 更新剩余时间的核心方法
+	const updateRemaining = () => {
+		const now = Date.now();
+		const diff = now - targetTimestamp.value;
+		formattedTime.value = formatTime(Math.max(0, Math.floor(diff / 1000)));
+	};
+
+	const onStartRecord = (body) => {
+		dataInfo.execId = body.execId;
+		targetTimestamp.value = Date.now();
+		// 当ws连接成功时候
+		console.log('连接成功开始录音');
+		isRecording.value = true;
+		timer = setInterval(updateRemaining, 1000);
+		// 立即执行一次
+		updateRemaining();
+
+		talkMicrophoneRef.value.start({
+			sampleRate: 16000,
+			frameSize: 1024,
+			gain: 1.0,
+			// 音频数据的帧接口回调，直接转码后接入到websocket的发送函数
+			onFrameRecorded: ({ isLastFrame, frameBuffer }) => send(ProtocolCodec.pack(MessageType.AUDIO_DATA, frameBuffer))
+		});
+	};
+	onLoad((e) => {
+		dataInfo.traId = e.traId ?? '';
+		dataInfo.chaId = e.chaId ?? '';
+		dataInfo.type = e.type ?? '';
+		dataInfo.preview = e.isPreview === '1';
+		const userInfo = getUserInfo();
+		dataInfo.userName = userInfo.userName;
+		const pageData = common.getPageCache()
+		dataInfo.sceneDesc = pageData.sceneDesc
+		
+	});
+	onMounted(() => {
+		initConnection(dataInfo, onStartRecord, (res) => talkSpeakerRef.value.playPCM(res));
+	});
+	onUnmounted(() => {
+		console.log('组件卸载');
+		if (timer) clearInterval(timer);
+	});
+	onBackPress((res) => res.from === 'backbutton');
 </script>
 
-<script module="renderJS" lang="renderjs">
-	import { StreamPlayer } from "./js/StreamPlayer";
-	let player = null;
-
-	export default {
-	  mounted() {
-	    const _this = this;
-	    player = new StreamPlayer({
-	      inputSampleRate: 44100, // 后端PCM采样率（如8000/24000）
-	      numChannels: 1,         // 声道数（单声道/双声道）
-	      bitDepth: 16,           // 位深（16/32bit）
-	      littleEndian: true,     // 端序（和后端一致）
-	      pcmType: 'int',         // 类型（int/float）
-	      callback: _this.callback
-	    });
-	  },
-	  methods: {
-		  appendPCMChunk(numArray) {
-				console.log('接收到', numArray.length);
-				if (!numArray || numArray.length === 0) return;
-				  // 数字数组转回ArrayBuffer
-				  const uint8 = new Uint8Array(numArray);
-				  const arrayBuffer = uint8.buffer;
-
-				  player.appendChunk(arrayBuffer);
-		      },
-	    // 停止播放（销毁播放器）
-	    stop() {
-	      if (player) {
-	        player.destroy();
-	        player = null;
-	        // 重新初始化（方便后续再次播放）
-	        const _this = this;
-	        player = new StreamPlayer({
-	          inputSampleRate: 16000,
-	          numChannels: 1,
-	          bitDepth: 16,
-	          littleEndian: true,
-	          pcmType: 'int',
-	          callback: _this.callback
-	        });
-	      }
-	    },
-
-	    // 播放结束回调（通知主线程）
-	    callback(e) {
-	      if (e === 'ended') {
-	        this.$ownerInstance.callMethod('changeStreamPlaying', { type: false });
-	      }
-	    }
-	  }
-	};
-</script>
 <style scoped lang="scss">
 	.switch-div {
 		display: flex;
 		justify-content: flex-end;
 		align-items: center;
 		margin-right: 20rpx;
-		margin-top: 20rpx;
+		margin-top: 10rpx;
 		width: 100%;
 		.switch-text {
 			font-weight: 400;
@@ -368,6 +243,38 @@
 		.role-name {
 			margin-bottom: 26rpx;
 		}
+
+		.title-tip {
+			padding-right: 20rpx;
+			position: relative;
+			&::after {
+				content: '';
+				position: absolute;
+				animation: loading 2.5s infinite;
+			}
+			@keyframes loading {
+				0% {
+					content: '';
+				}
+				25% {
+					content: '.';
+				}
+				50% {
+					content: '..';
+				}
+				75% {
+					content: '...';
+				}
+				100% {
+					content: '';
+				}
+			}
+		}
+		.title-tip {
+			&:not(.connecting) {
+				// display: none;
+			}
+		}
 	}
 
 	.body-scene {
diff --git a/src/pages/sparring/talk4.vue b/src/pages/sparring/talk4.vue
new file mode 100644
index 00000000..ff6c494b
--- /dev/null
+++ b/src/pages/sparring/talk4.vue
@@ -0,0 +1,492 @@
+<template>
+	<view>
+		<cached-avatar class="show-box-avatar"></cached-avatar>
+		<view class="show-box">
+			<nav-bar :is_seat="true"></nav-bar>
+			<view class="switch-div">
+				<view class="switch-text">场景提示</view>
+				<switch class="switch" :checked="!sceneDescShow" @click="switchChange" />
+			</view>
+			<view class="fl1-div-1"></view>
+			<view class="role-info">
+				<cached-avatar class="role-avatar"></cached-avatar>
+				<view class="role-name">{{ userInfo.userName }}</view>
+				<view class="title-time" v-if="isConnecting">{{ timeShow }}</view>
+				<view class="title-tip" v-if="!isConnecting">正在接通中</view>
+			</view>
+			<view class="fl1"></view>
+			<view class="body-scene" :class="{ show: sceneDescShow }">
+				{{ sceneDesc }}
+			</view>
+			<view class="close-btn" @click="closeTalking"></view>
+		</view>
+		<yao-RecordFrame
+			ref="recordFrame"
+			@onFrameRecorded="frameRecorded"
+			@currentDecibels="onCurrentDecibels"
+			@onStop="stopIt"
+		></yao-RecordFrame>
+		<view
+			ref="renderJSModule"
+			:pcmChunk="currentPCMChunk"
+			:change:pcmChunk="renderJS.appendPCMChunk"
+			:isStop="isStop"
+			:change:isStop="renderJS.stop"
+			type="renderjs"
+			module="renderJS"
+		></view>
+	</view>
+</template>
+<script>
+	import { getUserInfo } from '@/common/common';
+	import talkCom from './talkCom.nvue';
+	import { queryTraPartnerCharacterInfoById, partnerChatReportTrigger } from '@/api/sparring.js';
+	import common from '@/common/common';
+	import useWebSocket from './js/useWebSocket';
+	const { initConnection, ws } = useWebSocket();
+	import {
+		ProtocolCodec,
+		MessageType,
+		SerializationType,
+		CompressionType,
+		ControlCommand,
+		ProtocolConst
+	} from './js/ProtocolCodec';
+	import { getToken } from '@/common/common';
+	export default {
+		components: {
+			talkCom // 注册组件
+		},
+		data() {
+			return {
+				traId: '',
+				chaId: '',
+				talkingType: '',
+				execId: '',
+				isPreview: '',
+				chaName: '',
+				sceneDesc: '场景提示文案文儿提示文',
+				sceneDescShow: false,
+				timeShow: '11:19',
+				isConnecting: false, // 是否接通中
+				userInfo: {
+					userName: ''
+				},
+				ws: null,
+				wsUrl: 'wss://aitstest.jlbank.com.cn:7001/trapractice/voiceCallSocket/voiceCall?summary=' + getToken(), // 替换为实际后端地址，
+				// 播放组件
+				currentPCMChunk: null,
+				isStop: false // 停止播放指令
+			};
+		},
+		methods: {
+			callPhone() {
+				// 拨打电话
+				this.ws = uni.connectSocket({
+					url: this.wsUrl,
+					fail: () => {
+						console.log('fail');
+					},
+					success: () => {
+						console.log('web');
+					},
+					fail: () => {
+						console.log('fail');
+					}
+				});
+				this.ws.onOpen((res) => {
+					console.log('WebSocket连接已打开type', this.type);
+					this.ws.send({
+						data: ProtocolCodec.pack(MessageType.IDENTITY, {
+							traId: this.traId,
+							chaId: this.chaId,
+							type: this.type,
+							user_id: '1001',
+							token: 'your_auth_token',
+							name: '测试用户'
+						})
+					});
+				});
+				this.ws.onMessage((res) => {
+					const { msgType, body } = ProtocolCodec.unpack(res.data);
+					switch (msgType) {
+						case MessageType.IDENTITY:
+							console.log('身份校验成功', body);
+							this.onStartRecord();
+							this.isConnecting = true;
+							break;
+						case MessageType.AUDIO_DATA:
+							const buffer = body;
+							if (buffer.byteLength < 2) break;
+							const uint8 = new Uint8Array(buffer);
+							const numArray = Array.from(uint8);
+							this.currentPCMChunk = numArray;
+							break;
+
+						case MessageType.ERROR:
+							this.handleErrorMessage(body);
+							break;
+
+						default:
+							console.log('其他消息', body);
+							break;
+					}
+				});
+			},
+			handleErrorMessage(body) {
+				// 独立的错误处理函数
+				console.log(body);
+			},
+			disconnect() {
+				// 断开连接时候清理
+				// 清理音频相关资源
+				// this.onStopRecord();
+				// 重置状态
+				// this.currentPCMChunk = null;
+				// this.isConnecting = false;
+			},
+			manualDisconnect() {
+				// 主动挂断
+				// 标记主动挂断，跳过重连
+				this.isManualDisconnect = true;
+				this.disconnect();
+				this.handleFinalDisconnect();
+				this.isManualDisconnect = false;
+			},
+			startHeartbeat() {
+				// 先清除旧心跳
+				clearInterval(this.heartbeatTimer);
+				// 定时发送心跳包，检测后端是否存活
+				this.heartbeatTimer = setInterval(() => {
+					if (!this.isConnected) return;
+					// 发送心跳消息（根据你的协议定义，如MessageType.HEARTBEAT）
+					this.sendMsg({
+						type: MessageType.HEARTBEAT,
+						body: { timestamp: Date.now() }
+					});
+				}, this.heartbeatInterval);
+			},
+			onStartRecord() {
+				console.log('开始录音');
+				try {
+					this.$refs.recordFrame.start({
+						sampleRate: 16000,
+						frameSize: 1024,
+						gain: 1.0,
+						onFrameRecorded: ({ isLastFrame, frameBuffer }) => {
+							// console.log('录音返回', frameBuffer);
+							try {
+								ws.value.send({
+									data: ProtocolCodec.pack(MessageType.AUDIO_DATA, frameBuffer)
+								});
+							} catch (e) {}
+						},
+						onDecibels: (decibels) => {
+							this.currentDecibels = decibels;
+						}
+					});
+					this.isRecording = true;
+					this.status = '录音中...';
+				} catch (e) {
+					console.error('启动录音失败：', e);
+					this.status = '启动录音失败';
+					this.isRecording = false;
+				}
+			},
+			// 接收音频帧并处理
+			frameRecorded({ isLastFrame, frameBuffer }) {
+				if (this.ws) {
+					try {
+						this.ws.send({
+							data: frameBuffer
+						});
+					} catch (e) {
+						console.error('发送音频帧失败：', e);
+					}
+				}
+			},
+			// 监听分贝值
+			onCurrentDecibels(decibels) {
+				// this.currentDecibels = decibels.toFixed(2);
+				// console.log("当前分贝：", this.currentDecibels);
+			},
+			// 录音停止回调
+			stopIt(base64) {
+				this.stopRecordAndClean();
+				console.log('录音停止，最终音频Base64：', base64?.substring(0, 50) + '...');
+			},
+			// 关闭通话
+			closeTalking() {
+				// this.overTalking();
+				common.navigateBack();
+			},
+			// 结束通话生成报告
+			overTalking() {
+				partnerChatReportTrigger({
+					execId: this.execId,
+					traId: this.traId,
+					talkingType: this.isPreview ? 'preview' : 'practice'
+				}).then((res) => {
+					common.navigateTo(
+						'/pages/sparring/result?isOver=1&traId=' +
+							this.traId +
+							'&execId=' +
+							this.execId +
+							'&type=' +
+							this.type +
+							'&isPreview=' +
+							(this.isPreview ? '1' : '')
+					);
+				});
+			},
+			switchChange(e) {
+				this.sceneDescShow = !this.sceneDescShow;
+				this.isConnecting = !this.isConnecting;
+			},
+			// 停止录音并清理资源
+			stopRecordAndClean() {
+				if (this.isRecording) {
+					// 停止录音组件
+					this.$refs.recordFrame.stop();
+					this.isRecording = false;
+					this.status = '已停止录音';
+				}
+
+				// 关闭 WebSocket
+				if (this.ws) {
+					this.ws.close();
+					this.ws = null;
+				}
+
+				// 清理音频上下文
+				if (this.audioContext) {
+					this.audioContext.close();
+					this.audioContext = null;
+					this.scriptProcessor = null;
+					this.frameBufferList = [];
+				}
+
+				// 重置状态
+				this.currentDecibels = 0;
+			}
+		},
+
+		onLoad(e) {
+			// 页面加载时初始化数据
+			this.traId = e.traId ?? '';
+			this.chaId = e.chaId ?? '';
+			this.type = e.type ?? '';
+			this.isPreview = e.isPreview === '1';
+			this.userInfo = getUserInfo();
+			// this.callPhone();
+			initConnection({ traId: this.traId, chaId: this.chaId, type: this.type }, this.onStartRecord);
+		},
+		onBackPress(res) {
+			return res.from === 'backbutton';
+		}
+	};
+</script>
+
+<script module="renderJS" lang="renderjs">
+	import { StreamPlayer } from "./js/StreamPlayer";
+	let player = null;
+
+	export default {
+	  mounted() {
+	    const _this = this;
+	    player = new StreamPlayer({
+	      inputSampleRate: 44100, // 后端PCM采样率（如8000/24000）
+	      numChannels: 1,         // 声道数（单声道/双声道）
+	      bitDepth: 16,           // 位深（16/32bit）
+	      littleEndian: true,     // 端序（和后端一致）
+	      pcmType: 'int',         // 类型（int/float）
+	      callback: _this.callback
+	    });
+	  },
+	  methods: {
+		  appendPCMChunk(numArray) {
+				// console.log('接收到', numArray.length);
+				if (!numArray || numArray.length === 0) return;
+				  // 数字数组转回ArrayBuffer
+				  const uint8 = new Uint8Array(numArray);
+				  const arrayBuffer = uint8.buffer;
+
+				  player.appendChunk(arrayBuffer);
+		      },
+	    // 停止播放（销毁播放器）
+	    stop() {
+	      if (player) {
+	        player.destroy();
+	        player = null;
+	        // 重新初始化（方便后续再次播放）
+	        const _this = this;
+	        player = new StreamPlayer({
+	          inputSampleRate: 16000,
+	          numChannels: 1,
+	          bitDepth: 16,
+	          littleEndian: true,
+	          pcmType: 'int',
+	          callback: _this.callback
+	        });
+	      }
+	    },
+
+	    // 播放结束回调（通知主线程）
+	    callback(e) {
+	      if (e === 'ended') {
+	        this.$ownerInstance.callMethod('changeStreamPlaying', { type: false });
+	      }
+	    }
+	  }
+	};
+</script>
+<style scoped lang="scss">
+	.switch-div {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin-right: 20rpx;
+		margin-top: 10rpx;
+		width: 100%;
+		.switch-text {
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #ffffff;
+		}
+		.switch {
+			transform: scale(0.7) rotate(180deg);
+			:deep(.uni-switch-input) {
+				&.uni-switch-input-checked {
+					border-color: #9eacbf !important;
+					background-color: #9eacbf !important;
+				}
+
+				&:after {
+					top: 5px;
+					left: 5px;
+					width: 20px;
+					height: 20px;
+				}
+				&:before {
+					background-color: #62a1ff !important;
+					border-color: #62a1ff !important;
+				}
+				&:not(.uni-switch-input-checked) {
+					background-color: #62a1ff !important;
+					border-color: #62a1ff !important;
+				}
+			}
+		}
+	}
+	.fl1-div-1 {
+		min-height: 120rpx;
+		max-height: 240rpx;
+	}
+	.show-box {
+		width: 100vw;
+		height: 100vh;
+		background: linear-gradient(120deg, #333333cc 0%, #666666cc 50%, #333333cc 100%);
+		backdrop-filter: blur(10px);
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 999;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.show-box-avatar {
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 900;
+	}
+
+	.role-info {
+		position: relative;
+		width: 100vw;
+		padding-top: 210rpx;
+		text-align: center;
+		color: #fff;
+		line-height: 58rpx;
+		font-size: 38rpx;
+
+		.role-avatar {
+			width: 185rpx;
+			height: 185rpx;
+			border-radius: 50%;
+			overflow: hidden;
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+			top: 0;
+		}
+
+		.role-name {
+			margin-bottom: 26rpx;
+		}
+
+		.title-tip {
+			padding-right: 20rpx;
+			position: relative;
+			&::after {
+				content: '';
+				position: absolute;
+				animation: loading 2.5s infinite;
+			}
+			@keyframes loading {
+				0% {
+					content: '';
+				}
+				25% {
+					content: '.';
+				}
+				50% {
+					content: '..';
+				}
+				75% {
+					content: '...';
+				}
+				100% {
+					content: '';
+				}
+			}
+		}
+		.title-tip {
+			&:not(.connecting) {
+				// display: none;
+			}
+		}
+	}
+
+	.body-scene {
+		overflow: auto;
+		width: calc(100% - 92rpx);
+		// margin: 46rpx;
+		padding: 26rpx;
+		color: rgba(255, 255, 255, 0.8);
+		border: 4rpx dashed rgba(255, 255, 255, 0.3);
+		border-radius: 16rpx;
+		opacity: 0;
+		transition: opacity 0.5s ease;
+		&.show {
+			opacity: 1;
+		}
+	}
+
+	.close-btn {
+		width: 118rpx;
+		height: 118rpx;
+		background-image: url(@/static/images/sparring/close-talk.png);
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: cover;
+		border-radius: 50%;
+		margin-top: 46rpx;
+		margin-bottom: 112rpx;
+		flex-shrink: 0;
+	}
+</style>
diff --git a/src/pages/sparring/tip.vue b/src/pages/sparring/tip.vue
index 38bd37a1..3ccb5315 100644
--- a/src/pages/sparring/tip.vue
+++ b/src/pages/sparring/tip.vue
@@ -234,6 +234,9 @@
 		// #endif
 	}
 	const toTalking = () => {
+		common.setPageCache({
+			sceneDesc:detailInfo.value.sceneDesc
+		})
 		common.navigateTo('/pages/sparring/talk?traId=' + traId.value + '&chaId=' + chaId.value + '&type=' + talkingType
 			.value + '&isPreview=' + (isPreview.value ? '1' : '0'))
 	}
diff --git a/src/pagesB.json b/src/pagesB.json
index 2b2f0445..5fa2084c 100644
--- a/src/pagesB.json
+++ b/src/pagesB.json
@@ -95,6 +95,7 @@
 			"path": "pages/sparring/talk",
 			"style": {
 				"navigationBarTitleText": "AI陪练通话",
+				"disableSwipeBack": true,
 				"app-plus": {
 					"titleNView": false
 				}
diff --git a/src/uni_modules/yao-RecordFrame/components/yao-RecordFrame/yao-RecordFrame.vue b/src/uni_modules/yao-RecordFrame/components/yao-RecordFrame/yao-RecordFrame.vue
index 735be302..fb373ea7 100644
--- a/src/uni_modules/yao-RecordFrame/components/yao-RecordFrame/yao-RecordFrame.vue
+++ b/src/uni_modules/yao-RecordFrame/components/yao-RecordFrame/yao-RecordFrame.vue
@@ -2,6 +2,7 @@
 	<view :options="options" :change:options="record.startRecord" :status="status" :change:status="record.onStop">
 	</view>
 </template>
+
 <script>
 	export default {
 		data() {