<template>
|
<div class="fixed top-0 left-0 w-screen h-screen bg-[rgb(0,0,0,.8)] backdrop-blur-[20px] z-10">
|
<div
|
class="absolute w-[414px] h-[752px] bg-black left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl text-white flex flex-col"
|
>
|
<div class="mx-auto text-lg text-gray-300 mt-4 flex-0">Chat-4.0</div>
|
<div class="flex flex-col flex-auto relative items-center">
|
<div class="chat mt-[130px] mb-[110px]">
|
<span :style="{ 'animation-play-state': animationPlayState }"
|
><i :style="{ 'animation-play-state': animationPlayState }"></i
|
><i :style="{ 'animation-play-state': animationPlayState }"></i
|
><i :style="{ 'animation-play-state': animationPlayState }"></i
|
></span>
|
<div class="chatPop size-72" :style="{ 'animation-play-state': animationPlayState }">
|
<span class="size-32" :style="{ 'animation-play-state': animationPlayState }"></span>
|
</div>
|
</div>
|
<div class="flex items-center">
|
<div class="sound-animate relative">
|
<i class="ywifont ywicon-maikefeng-filled !text-[26px] absolute -left-10 top-[5px]"></i>
|
<span :style="{ 'animation-play-state': animationPlayState }"></span
|
><span :style="{ 'animation-play-state': animationPlayState }"></span
|
><span :style="{ 'animation-play-state': animationPlayState }"></span
|
><span :style="{ 'animation-play-state': animationPlayState }"></span>
|
</div>
|
</div>
|
<div class="mt-5" :class="{ 'cursor-pointer': currentVoiceType === VoiceTipType.Speak }" @click="voiceTipClick">
|
{{ voiceTipMap[currentVoiceType] }}
|
</div>
|
|
<div class="flex items-center justify-between bottom-16 absolute left-1/2 -translate-x-1/2 space-x-16">
|
<div class="size-[35px] flex items-center justify-center bg-[#292929] rounded-full cursor-pointer" @click="togglePlayClick">
|
<i class="ywifont !text-[16px]" :class="playIcon"></i>
|
</div>
|
<div class="size-[56px] flex items-center justify-center bg-red-500 rounded-full cursor-pointer" @click="closeClick">
|
<i class="ywifont ywicon-guanbi !text-[26px]"></i>
|
</div>
|
<div class="size-[35px] flex items-center justify-center bg-[#292929] rounded-full cursor-pointer">
|
<i class="ywifont ywicon-gengduo !text-[23px]"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, nextTick, ref, watch } from 'vue';
|
import type { ChatContent } from '../../../model/types';
|
import { AnswerType } from '../../../model/types';
|
import { VoiceRecognitionErrorType, VoiceTipType, voiceTipMap } from './types';
|
import router from '/@/router';
|
import { setRoomConfig } from '/@/stores/chatRoom';
|
|
const animationPlayState = ref<'paused' | 'running'>('running');
|
|
const playIcon = computed(() => (animationPlayState.value === 'running' ? 'ywicon-zanting' : 'ywicon-bofang'));
|
const isSpeak = ref(false);
|
const togglePlayClick = () => {
|
animationPlayState.value = animationPlayState.value === 'running' ? 'paused' : 'running';
|
if (currentVoiceType.value === VoiceTipType.Speak) {
|
if (isSpeak.value) {
|
window.speechSynthesis.pause();
|
} else {
|
window.speechSynthesis.resume();
|
}
|
isSpeak.value = !isSpeak.value;
|
}
|
};
|
|
const props = defineProps(['isHome']);
|
const emit = defineEmits(['submit', 'updateInputValue']);
|
const isShow = defineModel('isShow', {
|
type: Boolean,
|
});
|
|
const resetToListenVoice = () => {
|
currentVoiceType.value = VoiceTipType.NoSpeech;
|
audioChangeWord();
|
};
|
const isListening = ref(false);
|
|
const closeClick = () => {
|
isShow.value = false;
|
};
|
|
let recognition = null;
|
let speech = null;
|
const currentVoiceType = ref<VoiceTipType>(VoiceTipType.NoSpeech);
|
const handleAnswerRes = (res: ChatContent) => {
|
if (!res) {
|
return;
|
}
|
if (!isShow.value) {
|
return;
|
}
|
let text = '';
|
|
if (res.type === AnswerType.Text || res.type === AnswerType.Knowledge) {
|
if (res.type === AnswerType.Knowledge) {
|
text = res.values?.map((item) => item.answer) ?? '';
|
} else {
|
text = res.values;
|
}
|
} else {
|
text = '抱歉，我无法口述回答此问题的，需要查看请关闭此语音对话界面';
|
}
|
|
currentVoiceType.value = VoiceTipType.Speak;
|
isSpeak.value = true;
|
var speech = new SpeechSynthesisUtterance();
|
speech.text = text; // 内容
|
speech.lang = 'zh-cn'; // 语言
|
speech.voiceURI = 'Microsoft Huihui - Chinese (Simplified, PRC)'; // 声音和服务
|
// eslint-disable-next-line no-irregular-whitespace
|
speech.volume = 0.7; // 声音的音量区间范围是0到1默认是1
|
// eslint-disable-next-line no-irregular-whitespace
|
speech.rate = 1; // 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍
|
// eslint-disable-next-line no-irregular-whitespace
|
speech.pitch = 1; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。
|
|
speech.onend = () => {
|
resetToListenVoice();
|
};
|
window.speechSynthesis.speak(speech);
|
setRoomConfig(router.currentRoute.value.query.id as string, 'firstResCb', undefined);
|
};
|
|
const voiceTipClick = () => {
|
switch (currentVoiceType.value) {
|
case VoiceTipType.Speak:
|
window.speechSynthesis.cancel();
|
setTimeout(() => {
|
resetToListenVoice();
|
}, 0);
|
|
break;
|
default:
|
break;
|
}
|
window.speechSynthesis.cancel();
|
};
|
const audioChangeWord = () => {
|
emit('updateInputValue', '');
|
// 创建SpeechRecognition对象
|
// eslint-disable-next-line no-undef
|
recognition = new webkitSpeechRecognition();
|
if (!recognition) {
|
// eslint-disable-next-line no-undef
|
recognition = new SpeechRecognition();
|
}
|
console.log('recognition2', recognition);
|
console.log(11);
|
// 设置语言
|
recognition.lang = 'zh-CN';
|
console.log(22);
|
// 开始语音识别
|
recognition.start();
|
isListening.value = true;
|
console.log(33);
|
// 监听识别结果
|
recognition.onresult = function (event) {
|
var result = event.results[0][0].transcript;
|
console.log('监听结果:', result);
|
|
emit('updateInputValue', result);
|
currentVoiceType.value = VoiceTipType.Think;
|
if (!props.isHome) {
|
emit('submit', handleAnswerRes);
|
} else {
|
setRoomConfig(router.currentRoute.value.query.id as string, 'firstResCb', handleAnswerRes);
|
emit('submit');
|
}
|
};
|
recognition.onspeechstart = (event) => {
|
currentVoiceType.value = VoiceTipType.Speech;
|
};
|
|
// 监听错误事件
|
recognition.onerror = function (event) {
|
isListening.value = false;
|
// ElMessage.error('监听语音失败');
|
console.error(event.error);
|
switch (event.error) {
|
case VoiceRecognitionErrorType.NoSpeech:
|
if (isShow.value) {
|
resetToListenVoice();
|
}
|
break;
|
|
default:
|
break;
|
}
|
};
|
// 监听结束事件（包括识别成功、识别错误和用户停止）
|
recognition.onend = function () {
|
isListening.value = false;
|
console.log('语音识别停止');
|
};
|
};
|
|
const resetStatus = () => {
|
currentVoiceType.value = VoiceTipType.NoSpeech;
|
animationPlayState.value = 'running';
|
recognition?.abort();
|
window.speechSynthesis.cancel();
|
};
|
|
watch(
|
() => isShow.value,
|
(val) => {
|
if (!val) {
|
resetStatus();
|
} else {
|
resetToListenVoice();
|
}
|
}
|
);
|
</script>
|
<style scoped lang="scss">
|
@keyframes balls {
|
0% {
|
top: 0;
|
left: 0;
|
}
|
|
to {
|
opacity: 0;
|
top: 0;
|
left: 100%;
|
}
|
}
|
|
@keyframes chat-voices {
|
0% {
|
opacity: 1;
|
-webkit-transform: scale(1);
|
transform: scale(1);
|
}
|
|
50% {
|
opacity: 1;
|
-webkit-transform: scale(1.5);
|
transform: scale(1.5);
|
}
|
|
to {
|
opacity: 1;
|
-webkit-transform: scale(1);
|
transform: scale(1);
|
}
|
}
|
@keyframes change-size {
|
0% {
|
-webkit-transform: scale(1);
|
transform: scale(1);
|
}
|
|
50% {
|
-webkit-transform: scale(1.2);
|
transform: scale(1.2);
|
}
|
|
to {
|
-webkit-transform: scale(1);
|
transform: scale(1);
|
}
|
}
|
.chat {
|
position: relative;
|
width: 100%;
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-pack: center;
|
-ms-flex-pack: center;
|
justify-content: center;
|
> span {
|
width: 50%;
|
position: absolute;
|
left: 0;
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
top: 50%;
|
-webkit-transform: translateY(-50%);
|
-ms-transform: translateY(-50%);
|
transform: translateY(-50%);
|
}
|
}
|
.chatPop {
|
border-radius: 50%;
|
background-color: #fff;
|
-webkit-animation: chat-voice-ad71603e 1s ease 0.5s forwards;
|
animation: chat-voice-ad71603e 1s ease 0.5s forwards;
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-pack: center;
|
-ms-flex-pack: center;
|
justify-content: center;
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
> span {
|
border-radius: 50%;
|
opacity: 0;
|
background-color: #000;
|
-webkit-animation: chat-voices 1.5s linear 0.9s infinite;
|
animation: chat-voices 1.5s linear 0.9s infinite;
|
> i[data-v-ad71603e]:first-of-type {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background-color: #fff;
|
position: relative;
|
-webkit-animation: balls 1s ease 0.3s forwards;
|
animation: balls 1s ease 0.3s forwards;
|
margin-left: 23px;
|
}
|
|
> i[data-v-ad71603e]:nth-of-type(2) {
|
width: 23px;
|
height: 23px;
|
border-radius: 50%;
|
background-color: #fff;
|
position: relative;
|
-webkit-animation: balles-ad71603e 1s ease 0.3s forwards;
|
animation: balles-ad71603e 1s ease 0.3s forwards;
|
margin-left: 7px;
|
}
|
|
> i[data-v-ad71603e]:nth-of-type(3) {
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
background-color: #fff;
|
position: relative;
|
-webkit-animation: ball-ad71603e 1s ease 0.3s forwards;
|
animation: ball-ad71603e 1s ease 0.3s forwards;
|
margin-left: 7px;
|
}
|
}
|
}
|
|
.sound-animate > span {
|
-webkit-box-sizing: content-box;
|
box-sizing: content-box;
|
display: inline-block;
|
width: 27px;
|
height: 27px;
|
border-radius: 50%;
|
background-color: #fff;
|
-webkit-animation: change-size var(--animation-duration) linear infinite alternate;
|
animation: change-size var(--animation-duration) linear infinite alternate;
|
}
|
|
.sound-animate span:first-child {
|
--animation-duration: 1s;
|
}
|
|
.sound-animate span:nth-child(2) {
|
--animation-duration: 1.2s;
|
}
|
|
.sound-animate span:nth-child(3) {
|
--animation-duration: 0.8s;
|
}
|
|
.sound-animate span:nth-child(4) {
|
--animation-duration: 1.4s;
|
}
|
</style>
|
