fix: 录音中 暂停语音播放

projects/translate-h5/src/http/axios-instance.ts

@@ -50,5 +50,5 @@ console.log(import.meta.env.VITE_BASE_URL, "import.meta.env.VITE_BASE_URL");
 // https://petshy.tashowz.com
 //192.168.1.231:48080
 // || "http://192.168.1.231:48080"
-const baseURL = import.meta.env.VITE_BASE_URL;
+const baseURL = import.meta.env.VITE_BASE_URL || "https://petshy.tashowz.com";
 export const axiosInstance = new AxiosInstance(baseURL).getInstance();

projects/translate-h5/src/index.css

@@ -91,12 +91,13 @@ img {
 
     --adm-font-size-main: var(--adm-font-size-5); */
 
-  --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue",
+  --adm-font-family: -apple-system, blinkmacsystemfont, "Helvetica Neue", helvetica, segoe ui, arial,
-    helvetica, segoe ui, arial, roboto, "PingFang SC", "miui",
+    roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
-    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
 }
 .i-icon {
   height: 100%;
+  display: flex;
+  align-items: center;
 }
 svg {
   height: 100%;

projects/translate-h5/src/view/home/translate/component/message/index.tsx

@@ -1,9 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { Divider, Image, SpinLoading, Toast } from "antd-mobile";
+import { Avatar, Divider, Space, SpinLoading, Toast } from "antd-mobile";
 import { VoiceIcon } from "@workspace/shared";
-import dogSvg from "@/assets/translate/dog.svg";
-import catSvg from "@/assets/translate/cat.svg";
-import pigSvg from "@/assets/translate/pig.svg";
 import { Message } from "../../../types";
 import "./index.less";
 import { Refresh } from "@icon-park/react";
@@ -21,98 +18,38 @@ function Index(props: DefinedProps) {
   const [currentPlayingId, setCurrentPlayingId] = useState<number>();
 
   useEffect(() => {
-    if (isRecording) {
+    if (isRecording && currentPlayingId) {
-      stopAllAudio();
+      audioRefs.current[currentPlayingId].pause();
+      audioRefs.current[currentPlayingId].currentTime = 0;
+      setCurrentPlayingId(undefined);
     }
-  }, [isRecording]);
+  }, [isRecording, currentPlayingId]);
-  const onVoiceChange = () => {
+
-    setIsPlating(!isPlaying);
-  };
   const playAudio = (id: number, audioUrl: string) => {
     if (isRecording) {
       Toast.show("录音中，无法播放音频");
       return;
     }
-
-    if (currentPlayingId === id && audioRefs.current[id]) {
-      if (audioRefs.current[id]) {
-        audioRefs.current[id].pause();
-        audioRefs.current[id].currentTime = 0;
-      }
-      setCurrentPlayingId(undefined);
-      setIsPlating(false);
-      return;
-    }
-
-    stopAllAudio();
-    if (!audioRefs.current[id]) {
-      audioRefs.current[id] = new Audio(audioUrl);
-    }
-
-    const audio = audioRefs.current[id];
-    audio.currentTime = 0;
-
-    audio.onended = () => {
-      setCurrentPlayingId(undefined);
-      setIsPlating(false);
-    };
-
-    audio.onerror = () => {
-      const error = audio.error;
-      switch (error?.code) {
-        case MediaError.MEDIA_ERR_ABORTED:
-          console.warn("音频播放被用户中断");
-          break;
-        case MediaError.MEDIA_ERR_NETWORK:
-          console.warn("网络错误，无法加载音频");
-          break;
-        case MediaError.MEDIA_ERR_DECODE:
-          console.warn("解码失败，可能是格式不支持");
-          break;
-        case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
-          console.warn("浏览器不支持该音频格式");
-          break;
-        default:
-          console.warn("未知错误");
-      }
-      Toast.show("音频播放失败");
-      setIsPlating(false);
-    };
-
-    audio
-      .play()
-      .then(() => {
-        setCurrentPlayingId(id);
-        setIsPlating(true);
-      })
-      .catch((error) => {
-        console.error("音频播放失败:", error);
-        Toast.show("音频播放失败");
-      });
-  };
-  const stopAllAudio = () => {
     if (currentPlayingId && audioRefs.current[currentPlayingId]) {
       audioRefs.current[currentPlayingId].pause();
       audioRefs.current[currentPlayingId].currentTime = 0;
-      setIsPlating(false);
+    }
+    if (currentPlayingId !== id) {
+      setCurrentPlayingId(id);
+      audioRefs.current[id] = new Audio(audioUrl);
+      audioRefs.current[id].play();
+      audioRefs.current[id].onended = () => {
+        setCurrentPlayingId(undefined);
+      };
+    } else {
+      audioRefs.current[id].pause();
+      audioRefs.current[id].currentTime = 0;
       setCurrentPlayingId(undefined);
     }
-
-    Object.values(audioRefs.current).forEach((audio) => {
-      if (!audio.paused) {
-        audio.pause();
-        audio.currentTime = 0;
-      }
-    });
   };
-  const renderAvatar = (type?: "pig" | "cat" | "dog" | "") => {
+
-    if (type === "pig") {
+  const renderAvatar = (item: Message) => {
-      <Image src={pigSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
+    return <Avatar src={item.petAvatar || ""} style={{ "--border-radius": "32px" }} />;
-    }
-    if (type === "cat") {
-      return <Image src={catSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
-    }
-    return <Image src={dogSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
   };
 
   const refreshMessage = async (messageId: number, e: React.MouseEvent) => {
@@ -122,58 +59,71 @@ function Index(props: DefinedProps) {
     props.onRefresh(formData, messageId);
   };
 
+  const renderTranslateResult = (item: Message) => {
+    if (item.isTranslating) {
       return (
-    <div className="message">
-      {data.map((item, index) => (
-        <div className="item" key={index} onClick={() => playAudio(item.id, item.contentText)}>
-          {renderAvatar(item.petType)}
-
-          <div className="rig">
-            <div>
-              <span className="name">{item.petName}</span>
-              <Divider direction="vertical" style={{ margin: "0px 8px" }} />
-              <span className="">{item.createTime}</span>
-            </div>
-            <div className="voice-container">
-              <VoiceIcon
-                onChange={onVoiceChange}
-                isPlaying={isPlaying && currentPlayingId === item.id}
-              />
-              <div className="time">{item.contentDuration}''</div>
-            </div>
-            {item.isTranslating ? (
         <div className="translate">
           <SpinLoading color="default" style={{ "--size": "12px" }} />
           <span>翻译中...</span>
         </div>
-            ) : item.transStatus === 1 ? (
+      );
-              <div className="translate">{item.transResult ?? "暂无翻译结果"}</div>
+    } else {
+      if (item.transStatus === 1) {
+        return item.transResult?.length ? (
+          <Space justify={"between"} className="translate" style={{ verticalAlign: "middle" }}>
+            <span>{item.transResult}</span>
+          </Space>
         ) : (
-              <div className="translate">
+          <Space justify={"between"} className="translate" style={{ verticalAlign: "middle" }}>
+            <span>未知语句</span>
+            <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+          </Space>
+        );
+      } else {
+        return (
+          <Space
+            justify={"between"}
+            className="translate"
+            style={{ verticalAlign: "middle" }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
             <span>翻译失败，请重试</span>
             <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+          </Space>
+        );
+      }
+    }
+  };
+
+  return (
+    <div className="message">
+      {data.map((item, index) => (
+        <div className="item" key={index}>
+          {renderAvatar(item)}
+
+          <div className="rig">
+            <div>
+              <span className="name">
+                {item.isTranslating && !item.isRefresh ? "" : item.petName ?? "未知宠物"}
+              </span>
+              <Divider direction="vertical" style={{ margin: "0px 8px" }} />
+              <span className="">{item.createTime}</span>
             </div>
-            )}
+            <div className="voice-container" onClick={() => playAudio(item.id, item.contentText)}>
+              <VoiceIcon
+                // onChange={onVoiceChange}
+                isPlaying={currentPlayingId === item.id}
+              />
+              <div className="time">{item.contentDuration}''</div>
+            </div>
+            {renderTranslateResult(item)}
           </div>
         </div>
       ))}
 
-      <div className="item">
+      <div style={{ height: "80px", width: "100%" }}></div>
-        <div className="avatar"></div>
-        <div className="rig">
-          <div>
-            <span className="name">生无可恋喵</span>
-            <Divider direction="vertical" style={{ margin: "0px 8px" }} />
-            <span className="">15:00</span>
-          </div>
-          <div className="voice-container">
-            <VoiceIcon isPlaying={false} />
-            <div className="tips">{isRecording ? "录制中..." : "轻点麦克风录制"}</div>
-          </div>
-        </div>
-      </div>
-
-      <div style={{ height: "130px", width: "100%" }}></div>
     </div>
   );
 }

projects/translate-h5/src/view/home/translate/component/voice/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AudioRecorder, useAudioRecorder } from "react-audio-voice-recorder";
 import { Button, Dialog, Image, ProgressCircle, Toast } from "antd-mobile";
 import microphoneSvg from "@/assets/translate/microphone.svg";
@@ -35,12 +35,12 @@ function Index(props: DefinedProps) {
     checkMicrophonePermission();
   }, [hasPermission]);
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (isRecording) {
+  //   if (isRecording) {
-      recorderControls.startRecording();
+  //     recorderControls.startRecording();
-    } else {
+  //   } else {
-    }
+  //   }
-  }, [isRecording]);
+  // }, [isRecording]);
 
   //重置状态
   const onResetRecordingState = () => {
@@ -66,7 +66,35 @@ function Index(props: DefinedProps) {
       console.error("音效初始化失败:", error);
     }
   };
-  const renderBtn = useCallback(() => {
+  //开始录音
+  const onStartRecording = () => {
+    isCancelledRef.current = false;
+    if (recordingTimerRef.current) {
+      clearInterval(recordingTimerRef.current);
+      recordingTimerRef.current = undefined;
+    }
+    props.onSetIsRecording(true);
+    recorderControls.startRecording();
+    recordingStartTimeRef.current = Date.now();
+    // 立即开始计时
+    recordingTimerRef.current = setInterval(() => {
+      setRecordingDuration((prev) => prev + 1);
+    }, 1000);
+  };
+  // 使用 useMemo 缓存 Image 组件
+  const MicrophoneImage = useMemo(
+    () => (
+      <Image
+        height={80}
+        width={80}
+        src={microphoneSvg}
+        onClick={onStartRecording}
+        placeholder={<div style={{ width: 80, height: 80 }} />} // 添加占位符
+      />
+    ),
+    [microphoneSvg, onStartRecording]
+  );
+  const renderBtn = () => {
     if (!hasPermission) {
       //没有权限
       return (
@@ -95,10 +123,9 @@ function Index(props: DefinedProps) {
         </div>
       );
     } else {
-      //麦克风状态
+      return MicrophoneImage;
-      return <Image height={80} width={80} src={microphoneSvg} onClick={onStartRecording} />;
     }
-  }, [hasPermission, isRecording, recordingDuration]);
+  };
   const checkMicrophonePermission = useCallback(async () => {
     try {
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@@ -262,21 +289,6 @@ function Index(props: DefinedProps) {
     }
   };
 
-  //开始录音
-  const onStartRecording = () => {
-    isCancelledRef.current = false;
-    if (recordingTimerRef.current) {
-      clearInterval(recordingTimerRef.current);
-      recordingTimerRef.current = undefined;
-    }
-    props.onSetIsRecording(true);
-    // recorderControls.startRecording();
-    recordingStartTimeRef.current = Date.now();
-    // 立即开始计时
-    recordingTimerRef.current = setInterval(() => {
-      setRecordingDuration((prev) => prev + 1);
-    }, 1000);
-  };
   const onStopRecording = useCallback(() => {
     recorderControls.stopRecording();
     onResetRecordingState();
@@ -296,27 +308,26 @@ function Index(props: DefinedProps) {
         Toast.show("录音数据无效，请重新录音");
         return;
       }
+      const arrayBuffer = await blob.arrayBuffer();
+      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      const accurateDuration = audioBuffer.duration;
+      if (accurateDuration < 1) {
+        Toast.show("录音时间太短，请重新录音");
+        return;
+      }
       // 转换为 WAV 格式以获得最佳兼容性
       const wavBlob = await convertToWav(blob);
       const formData: FormData = new FormData();
-      formData.append("file", wavBlob, new Date().getTime() + "." + new Date().getTime() + ".wav");
+      formData.append("file", wavBlob, new Date().getTime() + ".wav");
       formData.append("dialogId", `${dialogId}`);
       const audioUrl = URL.createObjectURL(blob);
       const audio = new Audio();
       audio.src = audioUrl;
-      // 计算实际录音时长
-
-      audio.addEventListener("loadedmetadata", () => {
-        if (audio.duration < 1) {
-          Toast.show("录音时间太短，请重新录音");
-          return;
-        }
-        // alert(audio.duration);
       playSound(sendSoundRef);
-        const contentDuration = Math.floor(audio.duration);
+      const contentDuration = Math.round(accurateDuration);
       formData.append("contentDuration", `${contentDuration}`);
       props.onRecordingComplete?.(audioUrl, contentDuration, formData);
-      });
     },
     [isCancelledRef, isRecording, sendSoundRef]
   );
@@ -338,9 +349,6 @@ function Index(props: DefinedProps) {
           autoGainControl: true,
         }}
         showVisualizer={false}
-        mediaRecorderOptions={{
-          mimeType: "audio/webm",
-        }}
       />
       <div className={` voice-record`}>{renderBtn()}</div>
     </>

projects/translate-h5/src/view/home/translate/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Image, Toast } from "antd-mobile";
 import MessageCom from "./component/message";
 import VoiceRecord from "./component/voice";
-import { XPopup, FloatingMenu, type FloatMenuItemConfig } from "@workspace/shared";
+import { XPopup, type FloatMenuItemConfig } from "@workspace/shared";
 import type { Message } from "../types";
 import { useGetDialog } from "@/api/getDialog";
 import { useUploadAudio } from "@/api/translate";
@@ -31,16 +31,24 @@ function Index(props: DefinedProps) {
   const { loading: _audioLoading, error: _audioError, uploadAudio } = useUploadAudio();
   const [messages, setMessages] = useState<Message[]>([]);
   const [isRecording, setIsRecording] = useState(false); //是否录音中
-  const [currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
+  const [_currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
   const [visible, setVisible] = useState<boolean>(false);
   const [dialogId, setDialogId] = useState<number>(0);
 
   useEffect(() => {
     setCurrentLanguage(menuItems[0]);
-
     fetchInitialMessages();
   }, []);
 
+  // 滚动到底部
+  const scrollToBottom = useCallback(() => {
+    const container = document.querySelector(".message");
+
+    if (container) {
+      container.scrollTop = container.scrollHeight;
+      console.log("container", container.scrollHeight);
+    }
+  }, []);
 
   // 添加初始化数据的逻辑
   const fetchInitialMessages = async () => {
@@ -48,8 +56,6 @@ function Index(props: DefinedProps) {
       // 这里替换为实际的API调用
       // const response = await fetch('/api/messages');
       const response = await getDialog();
-      // console.log(response);
-
       const initialMessages: Message[] = response.data?.data?.messages || [];
 
       setDialogId(response.data?.data?.dialogId);
@@ -62,14 +68,22 @@ function Index(props: DefinedProps) {
     }
   };
 
+  // 监听消息变化，自动滚动到底部
+  useEffect(() => {
+    if (messages.length > 0) {
+      requestAnimationFrame(() => {
+        scrollToBottom();
+      });
+    }
+  }, [messages, scrollToBottom]);
+
   //完成录音
   const onRecordingComplete = useCallback(
     (audioUrl: string, actualDuration: number, formData: FormData) => {
-      console.log(audioUrl, "audioUrl")
+      console.log(audioUrl, "audioUrl");
       const newMessage: Message = {
         id: Date.now(),
         contentText: audioUrl,
-        petName: "匹配档案中。。。",
         contentDuration: actualDuration,
         isTranslating: true,
       };
@@ -77,7 +91,7 @@ function Index(props: DefinedProps) {
       setMessages((prev) => [...prev, newMessage]);
       setTimeout(() => {
         onTranslateAudio(formData, newMessage.id);
-      }, 1000);
+      }, 500);
 
       Toast.show("语音已发送");
     },
@@ -90,7 +104,6 @@ function Index(props: DefinedProps) {
       try {
         const response = await uploadAudio(formData);
         const translatedData = response.data;
-        console.log(translatedData, "translatedText");
 
         if (translatedData.data.transStatus) {
           setMessages((prev) =>
@@ -100,6 +113,7 @@ function Index(props: DefinedProps) {
                     ...msg,
                     ...translatedData.data,
                     isTranslating: false,
+                    isRefresh: false,
                   }
                 : msg
             )
@@ -111,8 +125,11 @@ function Index(props: DefinedProps) {
                 ? {
                     ...msg,
                     id: translatedData.data.id,
+                    petName: "未知宠物",
                     transStatus: translatedData.data.transStatus,
+                    createTime: translatedData.data.createTime,
                     isTranslating: false,
+                    isRefresh: false,
                   }
                 : msg
             )
@@ -128,6 +145,7 @@ function Index(props: DefinedProps) {
               ? {
                   ...msg,
                   isTranslating: false,
+                  isRefresh: false,
                   translatedText: "翻译失败，请重试",
                 }
               : msg
@@ -145,6 +163,7 @@ function Index(props: DefinedProps) {
           ? {
               ...msg,
               isTranslating: true,
+              isRefresh: true,
             }
           : msg
       )
@@ -156,13 +175,13 @@ function Index(props: DefinedProps) {
     setIsRecording(flag);
   };
 
-  const onLanguage = (item: FloatMenuItemConfig) => {
+  // const onLanguage = (item: FloatMenuItemConfig) => {
-    if (item.type === "add") {
+  //   if (item.type === "add") {
-      setVisible(true);
+  //     setVisible(true);
-    } else {
+  //   } else {
-      setCurrentLanguage(item);
+  //     setCurrentLanguage(item);
-    }
+  //   }
-  };
+  // };
 
   return (
     <div className="translate-container">
@@ -172,18 +191,41 @@ function Index(props: DefinedProps) {
         </div>
       )}
 
+      {/* <div onClick={() => scrollToBottom()}>111</div> */}
+
       <MessageCom
         data={messages}
         isRecording={isRecording}
         onRefresh={refreshMessages}
       ></MessageCom>
+
+      {/* <div
+        className="message-container"
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <MessageCom
+          data={messages}
+          isRecording={isRecording}
+          onRefresh={refreshMessages}
+        ></MessageCom>
+        <div ref={messagesEndRef} style={{ float: "left", clear: "both", height: "1px" }} />
+      </div> */}
+
+      {/* <div className="he" ref={messagesEndRef} /> */}
+
       <VoiceRecord
         dialogId={dialogId}
         onRecordingComplete={onRecordingComplete}
         isRecording={isRecording}
         onSetIsRecording={onSetIsRecording}
       />
-      <FloatingMenu menuItems={menuItems} value={currentLanguage} onChange={onLanguage} />
+      {/* <FloatingMenu menuItems={menuItems} value={currentLanguage} onChange={onLanguage} /> */}
       <XPopup
         title="选择翻译语种"
         visible={visible}

projects/translate-h5/src/view/home/types.ts

@@ -2,7 +2,7 @@ export interface Message {
   id: number;
   petType?: "dog" | "cat" | "pig" | "";
   contentText: string;
-  petName: string; //名字
+  petName?: string; //名字
   contentDuration: number; //时长
   createTime?: number; //时间
   transResult?: string;
@@ -11,4 +11,5 @@ export interface Message {
   isPlaying?: boolean;
   messageStatus?: 0 | 1;
   transStatus?: 0 | 1;
+  isRefresh?: boolean;
 }

projects/translate-h5/vite.config.ts

@@ -7,14 +7,14 @@ export default defineConfig({
   // basicSsl()
   // target: "https://petshy.tashowz.com",
   // http://192.168.1.231:48080
-  plugins: [react()],
+  plugins: [react(), basicSsl()],
   server: {
     port: 3000,
     host: "0.0.0.0",
     open: true,
     proxy: {
       "/app-api": {
-        target: "http://192.168.1.231:48080",
+        target: "https://petshy.tashowz.com",
         changeOrigin: true,
       },
     },