feat: 所有格式转换成wav

projects/translate-h5/src/api/getDialog.ts

@@ -0,0 +1,39 @@
+import useAxios from "axios-hooks";
+import { Result } from "@/types/http";
+
+export interface MockResult {
+  id: number;
+}
+
+export interface MockPage {
+  id: number;
+}
+
+/**
+ * fetch the data
+ * 详细使用可以查看 useAxios 的文档
+ */
+export const useGetDialog = () => {
+  const url = `/app-api/ai/dialog/getDialog`;
+
+  const [{ data, loading, error }, execute] = useAxios<Result<any>>(
+    {
+      url,
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+    { manual: true } // 手动触发
+  );
+
+  const getDialog = () => {
+    return execute({
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  };
+
+  return { data, loading, error, getDialog };
+};

projects/translate-h5/src/api/translate.ts

@@ -14,7 +14,7 @@ export interface MockPage {
  * 详细使用可以查看 useAxios 的文档
  */
 export const useUploadAudio = () => {
-  const url = `/app-api/ai/sample/translate`;
+  const url = `/app-api/ai/dialog/translate`;
 
   const [{ data, loading, error }, execute] = useAxios<Result<any>>(
     {

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

@@ -46,6 +46,9 @@ class AxiosInstance {
     return this.instance;
   }
 }
-
+console.log(import.meta.env.VITE_BASE_URL, "import.meta.env.VITE_BASE_URL");
-const baseURL = import.meta.env.VITE_BASE_URL || "http://192.168.1.231:48080";
+// https://petshy.tashowz.com
+//192.168.1.231:48080
+// || "http://192.168.1.231:48080"
+const baseURL = import.meta.env.VITE_BASE_URL;
 export const axiosInstance = new AxiosInstance(baseURL).getInstance();

projects/translate-h5/src/types/http.d.ts

@@ -1,14 +1,14 @@
 interface Page<T> {
-    total: number;
+  total: number;
-    size: number;
+  size: number;
-    current: number;
+  current: number;
-    pages: number;
+  pages: number;
-    records: T[];
+  records: T[];
 }
 
 export interface Result<T> {
-    success: boolean;
+  success: boolean;
-    code: number;
+  code: number;
-    message: string;
+  message: string;
-    data: T;
+  data: T;
-}
+}

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

@@ -6,10 +6,12 @@ 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";
 
 interface DefinedProps {
   data: Message[];
   isRecording: boolean;
+  onRefresh: (formData: FormData, messageId: number) => void;
 }
 
 function Index(props: DefinedProps) {
@@ -26,16 +28,16 @@ function Index(props: DefinedProps) {
   const onVoiceChange = () => {
     setIsPlating(!isPlaying);
   };
-  const playAudio = (messageId: number, audioUrl: string) => {
+  const playAudio = (id: number, audioUrl: string) => {
     if (isRecording) {
       Toast.show("录音中，无法播放音频");
       return;
     }
 
-    if (currentPlayingId === messageId) {
+    if (currentPlayingId === id && audioRefs.current[id]) {
-      if (audioRefs.current[messageId]) {
+      if (audioRefs.current[id]) {
-        audioRefs.current[messageId].pause();
+        audioRefs.current[id].pause();
-        audioRefs.current[messageId].currentTime = 0;
+        audioRefs.current[id].currentTime = 0;
       }
       setCurrentPlayingId(undefined);
       setIsPlating(false);
@@ -43,11 +45,11 @@ function Index(props: DefinedProps) {
     }
 
     stopAllAudio();
-    if (!audioRefs.current[messageId]) {
+    if (!audioRefs.current[id]) {
-      audioRefs.current[messageId] = new Audio(audioUrl);
+      audioRefs.current[id] = new Audio(audioUrl);
     }
 
-    const audio = audioRefs.current[messageId];
+    const audio = audioRefs.current[id];
     audio.currentTime = 0;
 
     audio.onended = () => {
@@ -55,8 +57,24 @@ function Index(props: DefinedProps) {
       setIsPlating(false);
     };
 
-    audio.onerror = (error) => {
+    audio.onerror = () => {
-      console.error("音频播放错误:", error);
+      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);
     };
@@ -64,7 +82,7 @@ function Index(props: DefinedProps) {
     audio
       .play()
       .then(() => {
-        setCurrentPlayingId(messageId);
+        setCurrentPlayingId(id);
         setIsPlating(true);
       })
       .catch((error) => {
@@ -87,7 +105,7 @@ function Index(props: DefinedProps) {
       }
     });
   };
-  const renderAvatar = (type?: "pig" | "cat" | "dog") => {
+  const renderAvatar = (type?: "pig" | "cat" | "dog" | "") => {
     if (type === "pig") {
       <Image src={pigSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
     }
@@ -97,31 +115,44 @@ function Index(props: DefinedProps) {
     return <Image src={dogSvg} width={40} height={40} fit="cover" style={{ borderRadius: 32 }} />;
   };
 
+  const refreshMessage = async (messageId: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const formData = new FormData();
+    formData.append("msgId", messageId.toString());
+    props.onRefresh(formData, messageId);
+  };
+
   return (
     <div className="message">
       {data.map((item, index) => (
-        <div className="item" key={index} onClick={() => playAudio(item.id, item.audioUrl)}>
+        <div className="item" key={index} onClick={() => playAudio(item.id, item.contentText)}>
-          {renderAvatar(item.type)}
+          {renderAvatar(item.petType)}
+
           <div className="rig">
             <div>
-              <span className="name">{item.name}</span>
+              <span className="name">{item.petName}</span>
               <Divider direction="vertical" style={{ margin: "0px 8px" }} />
-              <span className="">{item.timestamp}</span>
+              <span className="">{item.createTime}</span>
             </div>
             <div className="voice-container">
               <VoiceIcon
                 onChange={onVoiceChange}
                 isPlaying={isPlaying && currentPlayingId === item.id}
               />
-              <div className="time">{item.duration}''</div>
+              <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>
             ) : (
-              <div className="translate">{item.translatedText}</div>
+              <div className="translate">
+                <span> 翻译失败，请重试</span>
+                <Refresh onClick={(e) => refreshMessage(item.id, e)} size="12" fill="#333" />
+              </div>
             )}
           </div>
         </div>
@@ -141,6 +172,8 @@ function Index(props: DefinedProps) {
           </div>
         </div>
       </div>
+
+      <div style={{ height: "130px", width: "100%" }}></div>
     </div>
   );
 }

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

@@ -1,11 +1,19 @@
 .voice-record {
-  position: relative;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: 12px 0px;
   box-shadow: 1px 2px 4px 3px #eee;
+  // 不被挤压
+  flex-shrink: 0;
+  min-height: 100px; /* 添加 min-height 防止被压缩 */
+  height: 100px; /* 保持原始高度 */
+  flex-basis: 100px; /* 明确指定基础大小，防止 flex 缩放影响 */
   .adm-progress-circle-info {
     height: 32px;
   }

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

@@ -4,17 +4,16 @@ import { Button, Dialog, Image, ProgressCircle, Toast } from "antd-mobile";
 import microphoneSvg from "@/assets/translate/microphone.svg";
 import microphoneDisabledSvg from "@/assets/translate/microphoneDisabledSvg.svg";
 import { createStartRecordSound, createSendSound } from "@/utils/voice";
-import "./index.less";
-import { useUploadAudio } from "@/api/translate";
 import VConsole from "vconsole";
+import "./index.less";
 interface DefinedProps {
-  onRecordingComplete: (url: string, finalDuration: number) => void;
+  onRecordingComplete: (url: string, finalDuration: number, formData: FormData) => void;
   isRecording: boolean;
   onSetIsRecording: (flag: boolean) => void;
+  dialogId: number;
 }
 function Index(props: DefinedProps) {
-  const { isRecording } = props;
+  const { isRecording, dialogId } = props;
-  const { loading: _uploadLoading, error: _uploadError, uploadAudio } = useUploadAudio();
   const [hasPermission, setHasPermission] = useState<boolean>(false); //是否有权限
   const [isPermissioning, setIsPermissioning] = useState<boolean>(true); //获取权限中
   const [recordingDuration, setRecordingDuration] = useState<number>(0); //录音时长进度
@@ -67,17 +66,6 @@ function Index(props: DefinedProps) {
       console.error("音效初始化失败:", error);
     }
   };
-  const handleUploadAudio = async (formData: FormData) => {
-    // 打印FormData内容
-
-    console.log(formData);
-    try {
-      const response = await uploadAudio(formData);
-      console.log("上传成功:", response.data);
-    } catch (error) {
-      console.error("上传失败:", error);
-    }
-  };
   const renderBtn = useCallback(() => {
     if (!hasPermission) {
       //没有权限
@@ -206,6 +194,74 @@ function Index(props: DefinedProps) {
     }
   };
 
+  // 添加音频转换函数
+  const convertToWav = async (blob: Blob): Promise<Blob> => {
+    const arrayBuffer = await blob.arrayBuffer();
+    const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+    // 转换为 WAV 格式
+    const wavBuffer = audioBufferToWav(audioBuffer);
+    return new Blob([wavBuffer], { type: "audio/wav" });
+  };
+
+  // WAV 转换辅助函数
+  const audioBufferToWav = (buffer: AudioBuffer): ArrayBuffer => {
+    const length = buffer.length;
+    const numberOfChannels = buffer.numberOfChannels;
+    const sampleRate = buffer.sampleRate;
+    const bitsPerSample = 16;
+    const byteRate = (sampleRate * numberOfChannels * bitsPerSample) / 8;
+    const blockAlign = (numberOfChannels * bitsPerSample) / 8;
+    const dataSize = length * numberOfChannels * (bitsPerSample / 8);
+    const bufferLength = 44 + dataSize;
+    const arrayBuffer = new ArrayBuffer(bufferLength);
+    const view = new DataView(arrayBuffer);
+    // RIFF identifier
+    writeString(view, 0, "RIFF");
+    // file length
+    view.setUint32(4, 36 + dataSize, true);
+    // RIFF type
+    writeString(view, 8, "WAVE");
+    // format chunk identifier
+    writeString(view, 12, "fmt ");
+    // format chunk length
+    view.setUint32(16, 16, true);
+    // sample format (raw)
+    view.setUint16(20, 1, true);
+    // channel count
+    view.setUint16(22, numberOfChannels, true);
+    // sample rate
+    view.setUint32(24, sampleRate, true);
+    // byte rate (sample rate * block align)
+    view.setUint32(28, byteRate, true);
+    // block align (channel count * bytes per sample)
+    view.setUint16(32, blockAlign, true);
+    // bits per sample
+    view.setUint16(34, bitsPerSample, true);
+    // data chunk identifier
+    writeString(view, 36, "data");
+    // data chunk length
+    view.setUint32(40, dataSize, true);
+
+    // write the PCM samples
+    let offset = 44;
+    for (let i = 0; i < length; i++) {
+      for (let channel = 0; channel < numberOfChannels; channel++) {
+        const sample = Math.max(-1, Math.min(1, buffer.getChannelData(channel)[i]));
+        view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7fff, true);
+        offset += 2;
+      }
+    }
+    return arrayBuffer;
+  };
+
+  const writeString = (view: DataView, offset: number, string: string) => {
+    for (let i = 0; i < string.length; i++) {
+      view.setUint8(offset + i, string.charCodeAt(i));
+    }
+  };
+
   //开始录音
   const onStartRecording = () => {
     isCancelledRef.current = false;
@@ -225,6 +281,7 @@ function Index(props: DefinedProps) {
     recorderControls.stopRecording();
     onResetRecordingState();
   }, [recorderControls, recordingDuration]);
+
   //录音完成
   // 在发送时检查录音时长
   const onRecordingComplete = useCallback(
@@ -233,16 +290,17 @@ function Index(props: DefinedProps) {
         Toast.show("已取消");
         return;
       }
+
       // 检查blob有效性
       if (!blob || blob.size === 0) {
         Toast.show("录音数据无效，请重新录音");
-
         return;
       }
-      const formData = new FormData();
+      // 转换为 WAV 格式以获得最佳兼容性
-      formData.append("file", blob);
+      const wavBlob = await convertToWav(blob);
-
+      const formData: FormData = new FormData();
-      await handleUploadAudio(formData);
+      formData.append("file", wavBlob, new Date().getTime() + "." + new Date().getTime() + ".wav");
+      formData.append("dialogId", `${dialogId}`);
       const audioUrl = URL.createObjectURL(blob);
       const audio = new Audio();
       audio.src = audioUrl;
@@ -255,7 +313,9 @@ function Index(props: DefinedProps) {
         }
         // alert(audio.duration);
         playSound(sendSoundRef);
-        props.onRecordingComplete?.(audioUrl, Math.floor(audio.duration));
+        const contentDuration = Math.floor(audio.duration);
+        formData.append("contentDuration", `${contentDuration}`);
+        props.onRecordingComplete?.(audioUrl, contentDuration, formData);
       });
     },
     [isCancelledRef, isRecording, sendSoundRef]
@@ -278,6 +338,9 @@ 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

@@ -4,8 +4,9 @@ import MessageCom from "./component/message";
 import VoiceRecord from "./component/voice";
 import { XPopup, FloatingMenu, type FloatMenuItemConfig } from "@workspace/shared";
 import type { Message } from "../types";
+import { useGetDialog } from "@/api/getDialog";
+import { useUploadAudio } from "@/api/translate";
 
-import { mockTranslateAudio } from "@/utils/voice";
 import dogSvg from "@/assets/translate/dog.svg";
 import catSvg from "@/assets/translate/cat.svg";
 import pigSvg from "@/assets/translate/pig.svg";
@@ -14,6 +15,7 @@ import SearchCom from "./component/search";
 interface DefinedProps {
   searchVisible: boolean;
 }
+
 const menuItems: FloatMenuItemConfig[] = [
   { icon: <Image src={dogSvg} />, type: "dog" },
   { icon: <Image src={catSvg} />, type: "cat" },
@@ -25,30 +27,56 @@ const menuItems: FloatMenuItemConfig[] = [
 ];
 function Index(props: DefinedProps) {
   const { searchVisible } = props;
+  const { loading: _uploadLoading, error: _uploadError, getDialog } = useGetDialog();
+  const { loading: _audioLoading, error: _audioError, uploadAudio } = useUploadAudio();
   const [messages, setMessages] = useState<Message[]>([]);
   const [isRecording, setIsRecording] = useState(false); //是否录音中
   const [currentLanguage, setCurrentLanguage] = useState<FloatMenuItemConfig>();
   const [visible, setVisible] = useState<boolean>(false);
+  const [dialogId, setDialogId] = useState<number>(0);
+
   useEffect(() => {
     setCurrentLanguage(menuItems[0]);
+
+    fetchInitialMessages();
   }, []);
 
+
+  // 添加初始化数据的逻辑
+  const fetchInitialMessages = async () => {
+    try {
+      // 这里替换为实际的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);
+      setMessages(initialMessages);
+    } catch (error) {
+      console.error("获取初始化数据失败:", error);
+      Toast.show("获取消息失败");
+      // 失败时设置为空数组
+      setMessages([]);
+    }
+  };
+
   //完成录音
   const onRecordingComplete = useCallback(
-    (audioUrl: string, actualDuration: number) => {
+    (audioUrl: string, actualDuration: number, formData: FormData) => {
+      console.log(audioUrl, "audioUrl")
       const newMessage: Message = {
         id: Date.now(),
-        type: "dog",
+        contentText: audioUrl,
-        audioUrl,
+        petName: "匹配档案中。。。",
-        name: "生无可恋喵",
+        contentDuration: actualDuration,
-        duration: actualDuration,
-        timestamp: Date.now(),
         isTranslating: true,
       };
 
       setMessages((prev) => [...prev, newMessage]);
       setTimeout(() => {
-        onTranslateAudio(newMessage.id);
+        onTranslateAudio(formData, newMessage.id);
       }, 1000);
 
       Toast.show("语音已发送");
@@ -58,22 +86,45 @@ function Index(props: DefinedProps) {
 
   //翻译
   const onTranslateAudio = useCallback(
-    async (messageId: number) => {
+    async (formData: FormData, id: number) => {
       try {
-        const translatedText = await mockTranslateAudio();
+        const response = await uploadAudio(formData);
+        const translatedData = response.data;
+        console.log(translatedData, "translatedText");
 
-        setMessages((prev) =>
+        if (translatedData.data.transStatus) {
-          prev.map((msg) =>
+          setMessages((prev) =>
-            msg.id === messageId ? { ...msg, translatedText, isTranslating: false } : msg
+            prev.map((msg) =>
-          )
+              msg.id === id
-        );
+                ? {
+                    ...msg,
+                    ...translatedData.data,
+                    isTranslating: false,
+                  }
+                : msg
+            )
+          );
+        } else {
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === id
+                ? {
+                    ...msg,
+                    id: translatedData.data.id,
+                    transStatus: translatedData.data.transStatus,
+                    isTranslating: false,
+                  }
+                : msg
+            )
+          );
+        }
       } catch (error) {
         console.error("翻译失败:", error);
         Toast.show("翻译失败，请重试");
 
         setMessages((prev) =>
           prev.map((msg) =>
-            msg.id === messageId
+            msg.id === id
               ? {
                   ...msg,
                   isTranslating: false,
@@ -87,6 +138,20 @@ function Index(props: DefinedProps) {
     [messages]
   );
 
+  const refreshMessages = (formData: FormData, messageId: number) => {
+    setMessages((prev) =>
+      prev.map((msg) =>
+        msg.id === messageId
+          ? {
+              ...msg,
+              isTranslating: true,
+            }
+          : msg
+      )
+    );
+    onTranslateAudio(formData, messageId);
+  };
+
   const onSetIsRecording = (flag: boolean) => {
     setIsRecording(flag);
   };
@@ -107,8 +172,13 @@ function Index(props: DefinedProps) {
         </div>
       )}
 
-      <MessageCom data={messages} isRecording={isRecording}></MessageCom>
+      <MessageCom
+        data={messages}
+        isRecording={isRecording}
+        onRefresh={refreshMessages}
+      ></MessageCom>
       <VoiceRecord
+        dialogId={dialogId}
         onRecordingComplete={onRecordingComplete}
         isRecording={isRecording}
         onSetIsRecording={onSetIsRecording}

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

@@ -1,12 +1,14 @@
 export interface Message {
   id: number;
-  type?: "dog" | "cat" | "pig";
+  petType?: "dog" | "cat" | "pig" | "";
-  audioUrl: string;
+  contentText: string;
-  name: string; //名字
+  petName: string; //名字
-  duration: number; //时长
+  contentDuration: number; //时长
-  timestamp: number; //时间
+  createTime?: number; //时间
-  translatedText?: string;
+  transResult?: string;
   isTranslating?: boolean;
-  avatar?: string;
+  petAvatar?: string;
   isPlaying?: boolean;
+  messageStatus?: 0 | 1;
+  transStatus?: 0 | 1;
 }

projects/translate-h5/vite.config.ts

@@ -5,6 +5,8 @@ import { inspectorServer } from "@react-dev-inspector/vite-plugin";
 import basicSsl from "@vitejs/plugin-basic-ssl";
 export default defineConfig({
   // basicSsl()
+  // target: "https://petshy.tashowz.com",
+  // http://192.168.1.231:48080
   plugins: [react()],
   server: {
     port: 3000,