index.js

@@ -76,7 +76,7 @@ function changeBtnStatus(status) {
   btnStatus = status
   if (status === 'CONNECTING') {
     btnControl.innerText = '建立连接中'
-    // document.getElementById('result').innerText = ''
+    document.getElementById('result').innerText = ''
     resultText = ''
     resultTextTemp = ''
   }
@@ -114,8 +114,8 @@ function renderResult(resultData) {
     else {
       resultText = resultText + str
     }
-    // document.getElementById('result').innerText
+    document.getElementById('result').innerText
-    //     = resultTextTemp || resultText || ''
+        = resultTextTemp || resultText || ''
     console.log('录音结果:', resultTextTemp || resultText || '')
     window.winText = resultTextTemp || resultText || ''
     window.dispatchEvent(new Event('test'))

src/views/chat/components/Message/index.vue

@@ -92,17 +92,13 @@ async function handleCopy() {
   }
 }
 const playStatus = ref('end')
-const playStatus = ref('end')
 let playing = 0
 let sok = false
-let sok = false
 async function radioPlay() {
   console.log('播放', props.mp3)
   audioElements.length = 0
-  audioElements.length = 0
   const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts')
   sok = true
-  sok = true
 
   const promise = () => {
     return new Promise((resolve, reject) => {
@@ -117,36 +113,26 @@ async function radioPlay() {
 
   await promise()
 
-  socket.onerror = (event: any) => { sok = false; console.log('连接错误事件: ', event); console.log('sok状态', sok);
+  socket.onerror = (event: any) => { sok = false; console.log('连接错误事件: ', event) }
-   }
 
   // 监听WebSocket关闭事件
   socket.onclose = (event: any) => {
+    console.log('连接已关闭: ', event)
     sok = false
-    console.log('连接已关闭: ', event, sok)
-    console.log('sok状态', sok);
   }
 
-  // socket.send(JSON.stringify({
-  //   data: '快。科。技0月12。日消息。不宣而发的。华为Mate 60在上架官方商城后。直到现在都处于一机难求的状态。由于Mate 60系列的爆火。华为也是将明年的预计手机出货量翻倍到了7000万台。',
-  // }))
   // socket.send(JSON.stringify({
   //   data: '快。科。技0月12。日消息。不宣而发的。华为Mate 60在上架官方商城后。直到现在都处于一机难求的状态。由于Mate 60系列的爆火。华为也是将明年的预计手机出货量翻倍到了7000万台。',
   // }))
   socket.send(JSON.stringify({
     data: props.text,
-    data: props.text,
   }))
   playStatus.value = 'playing'
-  playStatus.value = 'playing'
   let i = 0
 	 // 监听WebSocket接收消息事件
 	 socket.onmessage = (event: any) => {
     const msg = JSON.parse(event.data)
     console.log(i, msg.mp3)
-		if(msg.key=='false'){
-			return socket.close();
-		}
     const a = new Audio(msg.mp3)
 			  a.addEventListener('ended', () => {
 			    onAudioEnd()
@@ -178,7 +164,6 @@ const onAudioEnd = (index: any) => {
     audioElements[playing].play()
   }
   else { playStatus.value = 'end' }
-  else { playStatus.value = 'end' }
 }
 // 创建音频对象的数组
 const audioElements = reactive([])
@@ -189,25 +174,17 @@ const playAudio = (playIndex: any) => {
 }
 
 watch(() => audioElements.length, (newVal, oldVal) => {
-  if (playStatus.value == 'pause')
-    return
-  if (newVal > playing && playFlag == false && newVal > 0) {
   if (playStatus.value == 'pause')
     return
   if (newVal > playing && playFlag == false && newVal > 0) {
     audioElements[playing].play()
     playStatus.value = 'playing'
   }
-    playStatus.value = 'playing'
-  }
 })
 
-let pauseIndex = -1
 let pauseIndex = -1
 // 暂停音频
 const pauseAudio = () => {
-  pauseIndex = playing + 0
-  playStatus.value = 'pause'
   pauseIndex = playing + 0
   playStatus.value = 'pause'
   for (let i = 0; i < audioElements.length; i++)
@@ -218,11 +195,6 @@ const noPauseAudio = () => {
   audioElements[pauseIndex].play()
   pauseIndex = -1
 }
-const noPauseAudio = () => {
-  playStatus.value = 'playing'
-  audioElements[pauseIndex].play()
-  pauseIndex = -1
-}
 </script>
 
 <template>

src/views/chat/index.vue

@@ -29,8 +29,6 @@ import IatRecorder from '@/utils/test.js'
 
 // let socket = new WebSocket("wss://chat.lihaink.cn/chat");
 
-const maxWeight = ref(1200)
-
 // 接收命令
 const connection = new Push({
   url: 'wss://chat.lihaink.cn/zhanti/push', // websocket地址
@@ -39,7 +37,7 @@ const connection = new Push({
 })
 
 // 是否正在录音
-const recordFalg = ref(0)
+let recordFalg = 0
 
 // 假设用户uid为1
 const uid = 1
@@ -50,27 +48,17 @@ console.log(user_channel)
 user_channel.on('message', (data: any) => {
   // data里是消息内容
   console.log('收到命令', data)
-  if (recordFalg.value == 0) {
+  if (recordFalg == 0) {
     RecordXunfei()
-    recordFalg.value = 1
+    recordFalg = 1
   }
   else {
     RecordXunfei()
-    recordFalg.value = 0
+    handleSubmit()
+    recordFalg = 0
   }
 })
 
-const changeRecord = ()=>{
-	if (recordFalg.value == 0) {
-    RecordXunfei()
-    recordFalg.value = 1
-  }
-  else {
-    RecordXunfei()
-    recordFalg.value = 0
-  }
-}
-
 let controller = new AbortController()
 
 const openLongReply = import.meta.env.VITE_GLOB_OPEN_LONG_REPLY === 'true'
@@ -583,7 +571,7 @@ const a = true
 window.winText = ''
 
 window.addEventListener('test', (e) => {
-  if (recordFalg.value == 1)
+  if (recordFalg == 1)
     prompt.value = window.winText
 })
 
@@ -623,7 +611,6 @@ const click = () => {
           id="image-wrapper"
           class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
           :class="[isMobile ? 'p-2' : 'p-4']"
-					:style="{'max-width': maxWeight + 'px'}"
         >
           <!-- <div @click="click">录音开始</div> -->
           <!-- <div>
@@ -670,19 +657,8 @@ const click = () => {
       </div>
     </main>
     <footer :class="footerClass">
-      <div class="w-full max-w-screen-xl m-auto"
+      <div class="w-full max-w-screen-xl m-auto">
-					:style="{'max-width': maxWeight + 'px'}">
         <div class="flex items-center justify-between space-x-2">
-					<HoverButton v-if="recordFalg==0" @click="changeRecord">
-            <span class="text-xl text-[#4f555e] dark:text-white">
-              录音
-            </span>
-          </HoverButton>
-					<HoverButton v-else-if="recordFalg==1" @click="changeRecord">
-            <span class="text-xl text-[#4f555e] dark:text-white">
-              完成
-            </span>
-          </HoverButton>
           <HoverButton v-if="!isMobile" @click="handleClear">
             <span class="text-xl text-[#4f555e] dark:text-white">
               <SvgIcon icon="ri:delete-bin-line" />