feat: tts播放

src/pages/index/index.jsx

@@ -44,6 +44,8 @@ const Index = () => {
     socket.onmessage = (event) => {
       console.log("接收到消息:", event.data);
       setMessage(event.data); // 更新消息状态
+      // TTS播放
+      // speak(event.data)
       setMessageArr((messageArr) => [event.data,...messageArr]); // 更新消息数组
     };
 
@@ -108,7 +110,7 @@ const Index = () => {
     <View className="index">
       <View className="messageArr">
       {messageArr.map((item, index) => (
-        <View key={index} className="message_item">
+        <View key={index} className={index===0?"message_item_first":"message_item"}>
           {item}
         </View>
       ))}

src/pages/index/index.scss

@@ -11,16 +11,19 @@
   // background-position: center;   // 居中
   // background-repeat: no-repeat;  // 不重复
 
-  .messageArr{
+  .messageArr {
     padding: 40px;
     font-size: 30px;
-      display: flex;
-  flex-direction: column;
-    .message_item{
-   
+    display: flex;
+    flex-direction: column;
+
+    .message_item_first {
+      color: red;
     }
+
+    .message_item {}
   }
- 
+
 
   .index_backImg {
     width: 100%;
@@ -43,6 +46,7 @@
     // align-items: center;
     // justify-content: center;
     background-color: aqua;
+
     .video_js {
       width: 400px;
       height: 200px;
@@ -69,23 +73,26 @@
     // align-items: center;
     // justify-content: center;
     background-image: url('../../images/iphone.jpg');
-    background-size: cover;        // 拉伸铺满容器
-    background-position: center;   // 居中
-    background-repeat: no-repeat;  // 不重复
+    background-size: cover; // 拉伸铺满容器
+    background-position: center; // 居中
+    background-repeat: no-repeat; // 不重复
     color: white;
 
-    .messageArr{
+    .messageArr {
       // padding: 40px;
       font-size: 40px;
       display: flex;
       flex-direction: column;
-          align-items: center;
-    justify-content: center;
-      .message_item{
-     
+      align-items: center;
+      justify-content: center;
+
+      .message_item_first {
+        color: red;
       }
+
+      .message_item {}
     }
-   
+
 
     .index_backImg {
       width: 100%;
@@ -106,6 +113,7 @@
       top: 0px;
       width: 400px;
       height: 200px;
+
       .video_js {
         width: 400px;
         height: 200px;