开发: 成员聊天页面

src/pages/ChatLogs/components/ChatVoice.tsx

@@ -1,11 +1,18 @@
 import { FileTextFilled } from '@ant-design/icons';
 import { useRef, useState } from 'react';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatVoice: React.FC<IChatItem> = (props) => {
   const [open, setOpen] = useState(false);
   const audioRef = useRef<any>();
+  function readBlob(blob: Blob, callback: Function) {
+    const reader = new FileReader();
+    reader.onload = function (e) {
+      const data = new Uint8Array(e.target.result);
+      callback(data);
+    };
+    reader.readAsArrayBuffer(blob);
+  }
 
   function content() {
     try {
@@ -19,7 +26,7 @@ export const ChatVoice: React.FC<IChatItem> = (props) => {
               color: '#000',
               justifyContent: 'flex-end',
               alignItems: 'center',
-              marginBottom: 4,
+              cursor: 'pointer',
             }}
             onClick={() => {
               const audios = document.querySelectorAll('audio');
@@ -28,10 +35,28 @@ export const ChatVoice: React.FC<IChatItem> = (props) => {
                   el.pause();
                 });
               }
-              audioRef.current.play().catch((error: any) => {
-                console.log(error);
-              });
-              setOpen(true);
+              if (!open) {
+                fetch(`/api/${msg.path}`)
+                  .then((response) => response.blob())
+                  .then((res) => {
+                    let blob = new Blob([res]);
+                    readBlob(blob, function (data: any) {
+                      if (window.AMR) {
+                        var buffer = window.AMR.toWAV(data);
+                        var url = URL.createObjectURL(new Blob([buffer], { type: 'audio/x-wav' }));
+                        audioRef.current.src = url;
+                        audioRef.current.play().catch((err: any) => {
+                          console.log(err);
+                        });
+                      }
+                    });
+                  });
+                setOpen(true);
+              } else {
+                audioRef.current.play().catch((err: any) => {
+                  console.log(err);
+                });
+              }
             }}
           >
             <span style={{ lineHeight: 1, marginRight: 4, minWidth: 100, textAlign: 'right' }}>
@@ -45,10 +70,9 @@ export const ChatVoice: React.FC<IChatItem> = (props) => {
             </svg>
           </div>
           <audio
-            ref={audioRef}
-            src={`/api/${msg.path}`}
-            style={{ display: `${open ? 'block' : 'none'}` }}
             controls
+            style={{ display: open ? 'block' : 'none', marginTop: 8 }}
+            ref={audioRef}
           ></audio>
         </div>
       );
@@ -62,27 +86,5 @@ export const ChatVoice: React.FC<IChatItem> = (props) => {
     }
   }
 
-  return (
-    <>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
-    </>
-  );
+  return <>{content()}</>;
 };