<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="ywicon icon-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">请开始说话</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="ywicon !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="ywicon icon-guanbi !text-[26px]"></i>
|
</div>
|
<div class="size-[35px] flex items-center justify-center bg-[#292929] rounded-full cursor-pointer">
|
<i class="ywicon icon-gengduo !text-[23px]"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, ref, watch } from 'vue';
|
|
const animationPlayState = ref<'paused' | 'running'>('running');
|
|
const playIcon = computed(() => (animationPlayState.value === 'running' ? 'icon-zanting' : 'icon-bofang'));
|
|
const togglePlayClick = () => {
|
animationPlayState.value = animationPlayState.value === 'running' ? 'paused' : 'running';
|
};
|
|
const isShow = defineModel('isShow', {
|
type: Boolean,
|
});
|
const isListening = ref(false);
|
|
const inputValue = ref('');
|
const closeClick = () => {
|
isShow.value = false;
|
};
|
const audioChangeWord = () => {
|
inputValue.value = '';
|
// 创建SpeechRecognition对象
|
// eslint-disable-next-line no-undef
|
var 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);
|
inputValue.value = result;
|
};
|
|
// 监听错误事件
|
recognition.onerror = function (event) {
|
isListening.value = false;
|
ElMessage.error('监听语音失败');
|
console.error(event.error);
|
};
|
// 监听结束事件（包括识别成功、识别错误和用户停止）
|
recognition.onend = function () {
|
isListening.value = false;
|
console.log('语音识别停止');
|
};
|
};
|
|
const resetStatus = () => {
|
animationPlayState.value = 'running';
|
};
|
|
watch(
|
() => isShow.value,
|
(val) => {
|
if (!val) {
|
resetStatus();
|
}
|
}
|
);
|
</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>
|
