JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_开发语音采集uts插件
This commit is contained in:
田岩
@@ -0,0 +1,522 @@
|
||||
<template>
|
||||
<view class="talk-btns">
|
||||
<view class="touch-btn" @click="disabled_click">
|
||||
<!-- @touchend="stopRecord(false)" -->
|
||||
<uv-button
|
||||
class="touch-btn"
|
||||
@touchstart="startRecord"
|
||||
@touchmove="handleMove"
|
||||
@touchend="loosenButton"
|
||||
v-if="!keyboardIsShow"
|
||||
:customStyle="{ height: '92rpx' }"
|
||||
>
|
||||
按住说话
|
||||
</uv-button>
|
||||
<uv-input
|
||||
v-if="keyboardIsShow"
|
||||
class="input-box"
|
||||
ref="inputRef"
|
||||
v-model="inputText"
|
||||
:maxlength="props.textValueLength"
|
||||
:adjustPosition="true"
|
||||
placeholderStyle="color:#999999;font-size:26rpx"
|
||||
placeholder="请输入文字"
|
||||
:disabled="props.isDisabled"
|
||||
></uv-input>
|
||||
</view>
|
||||
|
||||
<view class="talk-btn-box">
|
||||
<image
|
||||
class="talk-btn-icon"
|
||||
v-show="!keyboardIsShow"
|
||||
src="@/static/images/course/jianpan.png"
|
||||
mode=""
|
||||
@click="changeBtn"
|
||||
></image>
|
||||
<image
|
||||
class="talk-btn-icon"
|
||||
v-show="keyboardIsShow && !inputText"
|
||||
src="@/static/images/course/record.png"
|
||||
mode=""
|
||||
@click="changeBtn"
|
||||
></image>
|
||||
<image
|
||||
class="talk-btn-icon"
|
||||
v-show="keyboardIsShow && !!inputText"
|
||||
src="@/static/images/course/send.png"
|
||||
mode=""
|
||||
@click.stop="showKeyboard"
|
||||
></image>
|
||||
</view>
|
||||
<uni-popup ref="popupRef" class="popup">
|
||||
<view class="overlay-box">
|
||||
<view class="circle-bg-box">
|
||||
<view class="tips-box">松开发送</view>
|
||||
</view>
|
||||
<view class="btns-box">
|
||||
<image
|
||||
class="btn-box btn-box-1"
|
||||
:src="isOutStatus == '02' ? cancelActiveBtn : cancelBtn"
|
||||
mode="heightFix"
|
||||
@click="closePopup()"
|
||||
></image>
|
||||
<image
|
||||
class="btn-box btn-box-2"
|
||||
:src="isOutStatus == '03' ? translateActiveBtn : translateBtn"
|
||||
mode="heightFix"
|
||||
></image>
|
||||
</view>
|
||||
<view class="talk-dialog" :class="{ 'is-out': isOutStatus === '02', 'is-translate': isOutStatus === '03' }">
|
||||
<image src="@/static/images/course/voice-white.gif" mode="" class="gif-box"></image>
|
||||
<uv-textarea
|
||||
ref="inputRef"
|
||||
v-model="allText"
|
||||
:maxlength="255"
|
||||
@click.stop
|
||||
customStyle="background: #ffffff00; padding-bottom: 50rpx; color: #fff; caret-color: #fff"
|
||||
text-style="color: #fff"
|
||||
border="none"
|
||||
placeholderStyle="color:#999999;font-size:26rpx;"
|
||||
placeholder=""
|
||||
></uv-textarea>
|
||||
<!-- <view class="text-div" v-if="isOutStatus === '03'">
|
||||
{{ allText }}{{ tempText }}
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="fl1"></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import cancelBtn from '@/static/images/course/cancel.png';
|
||||
import cancelActiveBtn from '@/static/images/course/cancel-active.png';
|
||||
import translateBtn from '@/static/images/course/translate.png';
|
||||
import translateActiveBtn from '@/static/images/course/translate-active.png';
|
||||
import { ref, computed, onMounted, nextTick, watch, reactive } from 'vue';
|
||||
import common from '@/common/common';
|
||||
import { onHide } from '@dcloudio/uni-app';
|
||||
import permission from '@/common/permission.js';
|
||||
import { getPhoneEnvBool } from '@/common/common.js';
|
||||
import { initRecord } from '@/composables/useExamSubject.js';
|
||||
import { getToken } from '@/common/common';
|
||||
import { startAudioRecord, stopAudioRecord } from '@/uni_modules/ty-recording';
|
||||
import { get_base_url } from '@/api/request.js';
|
||||
import { ProtocolCodec, MessageType, ControlCommand,ControlCode } from '@/pages/sparring/js/ProtocolCodec';
|
||||
// const url = '/trapractice/voiceCallSocket/voiceCall'
|
||||
// const url = '/traapp/voiceTransSocket/open';
|
||||
const url = '/traapp/voiceAiModelSocket/open';
|
||||
const _baseUrl = get_base_url(url).split('http').join('ws');
|
||||
const emit = defineEmits(['submit']);
|
||||
const ws = ref(null);
|
||||
const props = defineProps({
|
||||
isDisabled: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
isLoading: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
loadingText: {
|
||||
default: '发送回答中，请稍后再试！',
|
||||
type: String
|
||||
},
|
||||
disabledText: {
|
||||
default: '请稍后再试！',
|
||||
type: String
|
||||
},
|
||||
canAnswer: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
canAnswerText: {
|
||||
default: '当前状态不能发送内容！',
|
||||
type: String
|
||||
},
|
||||
textValueLength: {
|
||||
type: Number,
|
||||
default: 500
|
||||
},
|
||||
minRecordDuration: {
|
||||
// 最小录音间隔
|
||||
type: Number,
|
||||
default: 1000
|
||||
}
|
||||
});
|
||||
// 记录 按下移动位置
|
||||
const touchPos = reactive({ x: 0, y: 0 });
|
||||
const windowInfo = uni.getWindowInfo();
|
||||
// 安全区域信息
|
||||
const safeArea = windowInfo.safeArea;
|
||||
console.log('safeArea', safeArea);
|
||||
// 计算是否超出按下盒子位置01代表下方盒子，02代表左上03代表右上
|
||||
const isOutStatus = computed(() => {
|
||||
const btnHeight = (windowInfo.screenWidth / 750) * 234;
|
||||
if (touchPos.y < safeArea.bottom - btnHeight) {
|
||||
if (touchPos.x < safeArea.right / 2) return '02';
|
||||
else return '03';
|
||||
} else {
|
||||
return '01';
|
||||
}
|
||||
});
|
||||
// 监听按下移动
|
||||
const handleMove = (obj) => {
|
||||
const changedTouche = obj.changedTouches[0];
|
||||
touchPos.x = changedTouche.pageX;
|
||||
touchPos.y = changedTouche.pageY;
|
||||
};
|
||||
const allText = ref('');
|
||||
const tempText = ref('');
|
||||
|
||||
// 键盘还是语音
|
||||
const keyboardIsShow = ref(false);
|
||||
const popupRef = ref(null);
|
||||
const inputText = ref('');
|
||||
let startTime = 0;
|
||||
|
||||
const startTimer = ref(null); // 延迟启动的定时器ID
|
||||
const startFlag = ref(1);
|
||||
const startRecord = async (obj) => {
|
||||
const changedTouche = obj.touches[0];
|
||||
touchPos.x = changedTouche.clientX;
|
||||
touchPos.y = changedTouche.clientY;
|
||||
const wsUrl = _baseUrl + url + '?summary=' + getToken();
|
||||
ws.value = uni.connectSocket({
|
||||
url: wsUrl,
|
||||
fail: () => {},
|
||||
success: () => {}
|
||||
});
|
||||
ws.value.onOpen((res) => {
|
||||
console.log('ws已连接');
|
||||
popupRef.value.open();
|
||||
startAudioRecord({
|
||||
onFrame:(pcmData) => {
|
||||
// pcmData 是ByteArray类型的原始音频数据
|
||||
console.log('采集到音频数据长度1:', pcmData.length);
|
||||
ws.value.send({
|
||||
data: ProtocolCodec.pack(MessageType.AUDIO_DATA, pcmData)
|
||||
});
|
||||
// 可在此处将PCM转Base64/编码为MP3等，或直接传输
|
||||
},
|
||||
onStop:(pcmData) => {
|
||||
console.log('关闭');
|
||||
},
|
||||
onError:(err) => {
|
||||
console.log('err', err.errMsg);
|
||||
console.log('err', err.errCode);
|
||||
},
|
||||
});
|
||||
});
|
||||
ws.value.onError((err) => {
|
||||
console.log('err', err);
|
||||
});
|
||||
ws.value.onClose((err) => {
|
||||
console.log('onClose', err);
|
||||
});
|
||||
ws.value.onMessage((res) => {
|
||||
const { msgType, body } = ProtocolCodec.unpack(res.data);
|
||||
console.log('来消息了', msgType, body);
|
||||
if (msgType === MessageType.TEXT_MESSAGE) {
|
||||
tempText.value = '';
|
||||
allText.value = allText.value + body;
|
||||
} else if (msgType === MessageType.TIP_MESSAGE) {
|
||||
tempText.value = body;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 关掉遮罩层
|
||||
const closePopup = () => {
|
||||
nextTick(() => {
|
||||
allText.value = '';
|
||||
tempText.value = '';
|
||||
popupRef.value.close();
|
||||
});
|
||||
ws.value.close({
|
||||
code: 1000,
|
||||
reason: '挂断',
|
||||
success: () => {
|
||||
console.log('挂断success');
|
||||
},
|
||||
fail: () => {
|
||||
console.log('挂断fail');
|
||||
},
|
||||
complete: () => {
|
||||
console.log('挂断complete');
|
||||
}
|
||||
});
|
||||
};
|
||||
// 松开按钮
|
||||
const loosenButton = () => {
|
||||
// 判断一下位置，03的时候是转文字不能关闭
|
||||
if (isOutStatus.value === '03') {
|
||||
// 03转文字
|
||||
console.log('已发送', '03转文字');
|
||||
ws.value.send({
|
||||
data: ProtocolCodec.pack(MessageType.CONTROL_CMD, {type:ControlCode.FRNOT_TO_SERVER_OVER})
|
||||
});
|
||||
} else {
|
||||
closePopup();
|
||||
}
|
||||
stopRecord();
|
||||
};
|
||||
// 结束录音
|
||||
const stopRecord = (status = false) => {
|
||||
console.log('结束录音stopRecord', status);
|
||||
// 判断一下位置
|
||||
if (isOutStatus.value === '01') {
|
||||
// 01发送
|
||||
} else if (isOutStatus.value === '02') {
|
||||
// 02取消
|
||||
} else if (isOutStatus.value === '03') {
|
||||
// 03转文字
|
||||
}
|
||||
|
||||
stopAudioRecord();
|
||||
|
||||
|
||||
};
|
||||
|
||||
onMounted(async () => {});
|
||||
onHide(() => {
|
||||
// closePopup();
|
||||
console.log('onHide');
|
||||
});
|
||||
|
||||
const activeNum = ref(1);
|
||||
|
||||
const clearinputText = (text = '') => {
|
||||
const old_text = inputText.value;
|
||||
inputText.value = text;
|
||||
return old_text;
|
||||
};
|
||||
|
||||
// 发送文本
|
||||
const showKeyboard = () => {
|
||||
if (keyboardIsShow.value) {
|
||||
const inputTextTram = inputText.value.trim();
|
||||
if (inputTextTram) {
|
||||
emit('submit', 'text', inputTextTram);
|
||||
} else {
|
||||
common.msg('不能发送空白消息！');
|
||||
}
|
||||
} else {
|
||||
keyboardIsShow.value = !keyboardIsShow.value;
|
||||
}
|
||||
};
|
||||
// 切换键盘语音
|
||||
const changeBtn = () => {
|
||||
if (props.isDisabled) return;
|
||||
keyboardIsShow.value = !keyboardIsShow.value;
|
||||
inputText.value = '';
|
||||
};
|
||||
// 禁用时点击给的提示
|
||||
const disabled_click = () => {
|
||||
console.log('禁用时点击给的提示');
|
||||
if (props.isDisabled) common.msg(props.disabledText);
|
||||
};
|
||||
|
||||
// 外面调用放弃这次
|
||||
const give_up = () => {
|
||||
console.log('调用结束语音回答');
|
||||
stopRecord(false);
|
||||
};
|
||||
defineExpose({ clearinputText, give_up });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.talk-btns {
|
||||
height: 150rpx;
|
||||
background-color: #fff;
|
||||
padding: 25rpx 30rpx 0;
|
||||
position: relative;
|
||||
|
||||
.touch-btn {
|
||||
height: 92rpx;
|
||||
box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.06);
|
||||
text-align: center;
|
||||
line-height: 92rpx;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
|
||||
.input-box {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
padding: 0 40rpx 0 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.talk-btn-box {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 120rpx;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
.talk-btn-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
position: absolute;
|
||||
right: 60rpx;
|
||||
top: 50%;
|
||||
margin-top: -20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-box {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
|
||||
.circle-bg-box {
|
||||
height: 234rpx;
|
||||
background: url(@/static/images/course/talking.png) no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
.icon-box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -17rpx;
|
||||
margin-top: -24rpx;
|
||||
width: 34rpx;
|
||||
height: 48rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-box {
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
color: #c0c0c0;
|
||||
text-align: center;
|
||||
margin: 36rpx 0 12rpx 0;
|
||||
font-weight: 600;
|
||||
font-size: 34rpx;
|
||||
color: #000000;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.btns-box {
|
||||
height: 240rpx;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
z-index: 1200;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
height: 164rpx;
|
||||
transform: scale(1.2);
|
||||
bottom: -10rpx;
|
||||
}
|
||||
.btn-box-1 {
|
||||
left: -40rpx;
|
||||
}
|
||||
.btn-box-2 {
|
||||
right: -40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.talk-dialog {
|
||||
width: 506rpx;
|
||||
min-height: 234rpx;
|
||||
margin: 0 auto;
|
||||
background-color: #06f;
|
||||
border-radius: 32rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: width 0.3s ease;
|
||||
.text-div {
|
||||
overflow-y: scroll;
|
||||
max-height: 434rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
&.is-translate {
|
||||
width: 706rpx;
|
||||
.gif-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-out {
|
||||
background-color: #ff3e49;
|
||||
|
||||
&::after {
|
||||
background-color: #ff3e49;
|
||||
}
|
||||
}
|
||||
|
||||
.gif-box {
|
||||
position: absolute;
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
background-color: #06f;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: -22rpx;
|
||||
left: 50%;
|
||||
margin-left: -22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.white-bg-box {
|
||||
height: 365rpx;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding: 58rpx 36rpx;
|
||||
|
||||
.box-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 46rpx;
|
||||
margin-bottom: 46rpx;
|
||||
}
|
||||
|
||||
.box-btns {
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
|
||||
.is-active {
|
||||
color: #06f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .uv-input__content__field-wrapper__field {
|
||||
padding-right: 60rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user