tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

开发ai聊天页面

Browse Source
This commit is contained in:
田岩
2025-12-05 17:37:46 +08:00
parent 30386e6b40
commit 21b3646820
13 changed files with 1511 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+3 -5
View File
@@ -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'
src/pages.json
+1
View File
@@ -516,6 +516,7 @@
"path": "pages/sparring/talk",
"style": {
"navigationBarTitleText": "AI陪练通话",
"disableSwipeBack": true,
"app-plus": {
"titleNView": false
}
src/pages/sparring/components/talk-microphone.vue
+358
View File
@@ -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>
src/pages/sparring/components/talk-speaker.vue
+99
View File
@@ -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>
src/pages/sparring/js/StreamPlayer.js
-1
View File
@@ -30,7 +30,6 @@ export class StreamPlayer {
}
appendChunk(audioData) {
console.log('this.audioQueue', this.audioQueue.length);
this.audioQueue.push(audioData);
this._processQueue();
}
src/pages/sparring/js/useMicrophone.js
+149
View File
@@ -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
};
};
src/pages/sparring/js/useSpeaker.js
+129
View File
@@ -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 // 手动清理资源
};
};
src/pages/sparring/js/useWebSocket.js
+118
View File
@@ -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
};
}
src/pages/sparring/talk.vue
+157 -250
View File
@@ -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 {
src/pages/sparring/talk4.vue
+492
View File
@@ -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>
src/pages/sparring/tip.vue
+3
View File
@@ -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'))
}
src/pagesB.json
+1
View File
@@ -95,6 +95,7 @@
"path": "pages/sparring/talk",
"style": {
"navigationBarTitleText": "AI陪练通话",
"disableSwipeBack": true,
"app-plus": {
"titleNView": false
}
src/uni_modules/yao-RecordFrame/components/yao-RecordFrame/yao-RecordFrame.vue
+1
View File
@@ -2,6 +2,7 @@
<view :options="options" :change:options="record.startRecord" :status="status" :change:status="record.onStop">
</view>
</template>
<script>
export default {
data() {