gengx

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

@@ -92,6 +92,7 @@ async function handleCopy() {
   }
 }
 
+let playIndex = 0;
 async function radioPlay() {
   console.log('播放', props.mp3)
 	const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts');
@@ -101,6 +102,7 @@ async function radioPlay() {
       // 监听WebSocket连接打开事件
       socket.onopen = () => {
         console.log('socket已连接')
+				playIndex = 0;
         resolve(null)
       }
     })
@@ -114,15 +116,19 @@ async function radioPlay() {
   }
 
 	socket.send(JSON.stringify( {
-            "data": "快科技10月12日消息，不宣而发的华为Mate 60在上架官方商城后，直到现在都处于一机难求的状态。由于Mate 60系列的爆火，华为也是将明年的预计手机出货量翻倍到了7000万台。 华为Mate 60的热销对同期上市的iPhone15产生了很大的冲击。不仅对华为品牌起到提振效果，也对上游国内相关企业产生了积极的影响。 其中华为Mate 60采用了6.69英寸的OLED柔性屏幕，分辨率为FHD+ 2688×1216。Mate 60 Pro则采用了6.82英寸的四曲面屏幕，分辨率为FHD+ 2720 × 1260。这两款手机屏幕都支持1-120Hz LTPO自适应刷新率、1440Hz高频PWM调光以300 Hz触控采样率。"
-
-        }))
+     "data": "快科技10月12日消息，不宣而发的华为Mate 60在上架官方商城后，直到现在都处于一机难求的状态。由于Mate 60系列的爆火，华为也是将明年的预计手机出货量翻倍到了7000万台。 华为Mate 60的热销对同期上市的iPhone15产生了很大的冲击。不仅对华为品牌起到提振效果，也对上游国内相关企业产生了积极的影响。 其中华为Mate 60采用了6.69英寸的OLED柔性屏幕，分辨率为FHD+ 2688×1216。Mate 60 Pro则采用了6.82英寸的四曲面屏幕，分辨率为FHD+ 2720 × 1260。这两款手机屏幕都支持1-120Hz LTPO自适应刷新率、1440Hz高频PWM调光以300 Hz触控采样率。"
+	}))
 
 	 // 监听WebSocket接收消息事件
 	 socket.onmessage = (event: any) => {
         const msg = JSON.parse(event.data);
 				console.log(msg.mp3);
-
+				const a = new Audio(msg.mp3)
+			  a.addEventListener('ended', () => {
+			    onAudioEnd(playIndex)
+			  })
+			  audioElements.push(a)
+				if(playIndex==0) playAudio()
     }
 
   // for (let i = 0; i < props.mp3.length; i++) {
@@ -140,7 +146,6 @@ const onAudioEnd = (index: any) => {
   if (index + 1 < audioElements.length)
     audioElements[index + 1].play()
 }
-
 // 创建音频对象的数组
 const audioElements = reactive([])
 // 播放音频