大更新

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
-        = resultTextTemp || resultText || ''
+    // document.getElementById('result').innerText
+    //     = resultTextTemp || resultText || ''
     console.log('录音结果:', resultTextTemp || resultText || '')
     window.winText = resultTextTemp || resultText || ''
     window.dispatchEvent(new Event('test'))

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

@@ -91,12 +91,14 @@ async function handleCopy() {
     message.error('复制失败')
   }
 }
-
+const playStatus = ref('end')
 let playing = 0
+let sok = false
 async function radioPlay() {
   console.log('播放', props.mp3)
-  audioElements = []
+  audioElements.length = 0
   const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts')
+  sok = true
 
   const promise = () => {
     return new Promise((resolve, reject) => {
@@ -111,19 +113,31 @@ async function radioPlay() {
 
   await promise()
 
-  // 监听WebSocket关闭事件
-  socket.onclose = (event: any) => {
-    console.log('连接已关闭: ', event)
+  socket.onerror = (event: any) => { sok = false; console.log('连接错误事件: ', event); console.log('sok状态', sok);
    }
 
+  // 监听WebSocket关闭事件
+  socket.onclose = (event: any) => {
+    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万台。',
+    data: props.text,
   }))
+  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()
@@ -154,6 +168,7 @@ const onAudioEnd = (index: any) => {
     playFlag = true
     audioElements[playing].play()
   }
+  else { playStatus.value = 'end' }
 }
 // 创建音频对象的数组
 const audioElements = reactive([])
@@ -164,15 +179,27 @@ const playAudio = (playIndex: any) => {
 }
 
 watch(() => audioElements.length, (newVal, oldVal) => {
-  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'
+  }
 })
 
+let pauseIndex = -1
 // 暂停音频
 const pauseAudio = () => {
+  pauseIndex = playing + 0
+  playStatus.value = 'pause'
   for (let i = 0; i < audioElements.length; i++)
     audioElements[i].pause()
 }
+const noPauseAudio = () => {
+  playStatus.value = 'playing'
+  audioElements[pauseIndex].play()
+  pauseIndex = -1
+}
 </script>
 
 <template>
@@ -205,7 +232,7 @@ const pauseAudio = () => {
         />
         <div class="flex-col btn">
           <button
-            v-if="!inversion"
+            v-if="!inversion && sok == false && playStatus == 'end'"
             class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
             @click="radioPlay"
           >
@@ -213,7 +240,8 @@ const pauseAudio = () => {
             <!-- <SvgIcon icon="ri:restart-line" /> -->
           </button>
           <button
-            v-if="!inversion"
+
+            v-if="!inversion && playStatus == 'playing'"
             class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
             @click="pauseAudio"
           >
@@ -221,12 +249,20 @@ const pauseAudio = () => {
             <!-- <SvgIcon icon="ri:restart-line" /> -->
           </button>
           <button
+            v-if="!inversion && playStatus == 'pause'"
+            class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
+            @click="noPauseAudio"
+          >
+            继续
+            <!-- <SvgIcon icon="ri:restart-line" /> -->
+          </button>
+          <!-- <button
             v-if="!inversion"
             class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
             @click="handleRegenerate"
           >
             <SvgIcon icon="ri:restart-line" />
-          </button>
+          </button> -->
           <NDropdown
             v-if="!inversion"
             :trigger="isMobile ? 'click' : 'hover'"

src/views/chat/index.vue

@@ -29,6 +29,8 @@ 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地址
@@ -37,7 +39,7 @@ const connection = new Push({
 })
 
 // 是否正在录音
-let recordFalg = 0
+const recordFalg = ref(0)
 
 // 假设用户uid为1
 const uid = 1
@@ -48,17 +50,27 @@ console.log(user_channel)
 user_channel.on('message', (data: any) => {
   // data里是消息内容
   console.log('收到命令', data)
-  if (recordFalg == 0) {
+  if (recordFalg.value == 0) {
     RecordXunfei()
-    recordFalg = 1
+    recordFalg.value = 1
   }
   else {
     RecordXunfei()
-    handleSubmit()
-    recordFalg = 0
+    recordFalg.value = 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'
@@ -571,7 +583,7 @@ const a = true
 window.winText = ''
 
 window.addEventListener('test', (e) => {
-  if (recordFalg == 1)
+  if (recordFalg.value == 1)
     prompt.value = window.winText
 })
 
@@ -611,6 +623,7 @@ 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>
@@ -657,8 +670,19 @@ 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" />