fix: 修复audio播放问题

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

@@ -17,92 +17,50 @@ function Index(props: DefinedProps) {
   const [isPlaying, setIsPlating] = useState(false);
   const [currentPlayingId, setCurrentPlayingId] = useState<number>();
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (isRecording) {
+  //   if (isRecording) {
-      stopAllAudio();
+  //     stopAllAudio();
-    }
+  //   }
-  }, [isRecording]);
+  // }, [isRecording]);
-  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("音频播放失败1111");
-      setIsPlating(false);
-    };
-    console.log("audio play", id);
-    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);
-      setCurrentPlayingId(undefined);
-      return;
     }
-
+    if (currentPlayingId !== id) {
-    Object.values(audioRefs.current).forEach((audio) => {
+      setCurrentPlayingId(id);
-      if (!audio.paused) {
+      audioRefs.current[id] = new Audio(audioUrl);
-        audio.pause();
+      audioRefs.current[id].play();
-        audio.currentTime = 0;
+      audioRefs.current[id].onended = () => {
-      }
+        setCurrentPlayingId(undefined);
-    });
+      };
+    } else {
+      audioRefs.current[id].pause();
+      audioRefs.current[id].currentTime = 0;
+      setCurrentPlayingId(undefined);
+    }
   };
+  // const stopAllAudio = () => {
+  //   if (currentPlayingId && audioRefs.current[currentPlayingId]) {
+  //     audioRefs.current[currentPlayingId].pause();
+  //     audioRefs.current[currentPlayingId].currentTime = 0;
+  //     setIsPlating(false);
+  //     setCurrentPlayingId(undefined);
+  //     return;
+  //   }
+
+  //   Object.values(audioRefs.current).forEach((audio) => {
+  //     if (!audio.paused) {
+  //       audio.pause();
+  //       audio.currentTime = 0;
+  //     }
+  //   });
+  // };
   const renderAvatar = (item: Message) => {
     return <Avatar src={item.petAvatar || ""} style={{ "--border-radius": "32px" }} />;
   };
@@ -155,7 +113,7 @@ function Index(props: DefinedProps) {
   return (
     <div className="message">
       {data.map((item, index) => (
-        <div className="item" key={index} onClick={() => playAudio(item.id, item.contentText)}>
+        <div className="item" key={index}>
           {renderAvatar(item)}
 
           <div className="rig">
@@ -166,10 +124,10 @@ function Index(props: DefinedProps) {
               <Divider direction="vertical" style={{ margin: "0px 8px" }} />
               <span className="">{item.createTime}</span>
             </div>
-            <div className="voice-container">
+            <div className="voice-container" onClick={() => playAudio(item.id, item.contentText)}>
               <VoiceIcon
-                onChange={onVoiceChange}
+                // onChange={onVoiceChange}
-                isPlaying={isPlaying && currentPlayingId === item.id}
+                isPlaying={currentPlayingId === item.id}
               />
               <div className="time">{item.contentDuration}''</div>
             </div>