语音对话

gerson

2024-07-19 c6e3c33979ab6ed1aa6a834f39c85356320c0f93

 src/components/chat/components/playBar/PlayBar.vue

@@ -20,9 +20,9 @@
      <div class="h100 flex items-center">
         <div class="upload_img space-y">
            <div class="imgbox cursor-pointer flex items-center">
               <el-button title="AI看图" class="cursor-pointer" link style="margin-left: unset">
               <!-- <el-button title="AI看图" class="cursor-pointer" link style="margin-left: unset">
                  <img src="/static/images/wave/LookImg.png" class="set-img-icon box-border" />
               </el-button>
               </el-button> -->
               <el-button title="AI语音对话" class="cursor-pointer" link style="margin-left: unset" @click="audioChangeWord">
                  <img src="/static/images/wave/HeadImg.png" class="set-img-icon box-border" />
               </el-button>
@@ -35,22 +35,35 @@
            </div>
         </div>
      </div>
      <VoicePage
         v-model:isShow="voicePageIsShow"
         v-show="voicePageIsShow"
         @submit="(cb) => emits('sendClick', cb)"
         @updateInputValue="updateInputValue"
         :isHome = "isHome"
      />
   </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

import VoicePage from './voicePage/VoicePage.vue';
const emits = defineEmits(['sendClick']);

const props = defineProps(['isTalking']);
const props = defineProps(['isTalking','isHome']);

const voicePageIsShow = defineModel('voicePageIsShow', {
   type: Boolean,
   default: false,
});
const inputValue = defineModel({
   type: String,
});

const isListening = ref(false);
const updateInputValue = (val) => {
   inputValue.value = val;
};

const enterInput = (e) => {
   if (props.isTalking) return;
@@ -63,41 +76,15 @@
   }
};
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('语音识别停止');
   };
   navigator.getUserMedia(
      { audio: true },
      function onSuccess(stream) {
         voicePageIsShow.value = true;
      },
      function onError(error) {
         ElMessage.warning('请打开麦克风权限');
      }
   );
};
</script>
<style scoped lang="scss">