Fix the Audio detection frontend

Project/Backend/Server_Node/package-lock.json

@@ -19,6 +19,7 @@
         "multer": "^1.4.5-lts.1",
         "nodemailer": "^6.9.1",
         "nodemon": "^2.0.22",
+        "react-mic": "^12.4.6",
         "uuid": "^9.0.0"
       }
     },
@@ -637,6 +638,11 @@
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "node_modules/jsonwebtoken": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.0.tgz",
@@ -689,6 +695,17 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -1058,6 +1075,16 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1119,6 +1146,47 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-ga": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.7.0.tgz",
+      "integrity": "sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==",
+      "peerDependencies": {
+        "prop-types": "^15.6.0",
+        "react": "^15.6.2 || ^16.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-mic": {
+      "version": "12.4.6",
+      "resolved": "https://registry.npmjs.org/react-mic/-/react-mic-12.4.6.tgz",
+      "integrity": "sha512-2/DZoz7thR2nJyekF10zBvs/7a8HhUQ4L8MV6BpC+Q/T8G1MvpRHGSHjSlVtnbzaCMDJ3R1MdThoLu15WuVh/g==",
+      "dependencies": {
+        "prop-types": "^15.5.10",
+        "react-ga": "^2.2.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.5.10",
+        "react": "16.x"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -1968,6 +2036,11 @@
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
       "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
     },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "jsonwebtoken": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.0.tgz",
@@ -2015,6 +2088,14 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -2269,6 +2350,16 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -2312,6 +2403,37 @@
         "unpipe": "1.0.0"
       }
     },
+    "react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-ga": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.7.0.tgz",
+      "integrity": "sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==",
+      "requires": {}
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-mic": {
+      "version": "12.4.6",
+      "resolved": "https://registry.npmjs.org/react-mic/-/react-mic-12.4.6.tgz",
+      "integrity": "sha512-2/DZoz7thR2nJyekF10zBvs/7a8HhUQ4L8MV6BpC+Q/T8G1MvpRHGSHjSlVtnbzaCMDJ3R1MdThoLu15WuVh/g==",
+      "requires": {
+        "prop-types": "^15.5.10",
+        "react-ga": "^2.2.0"
+      }
+    },
     "readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",

Project/Backend/Server_Node/package.json

@@ -21,6 +21,7 @@
     "multer": "^1.4.5-lts.1",
     "nodemailer": "^6.9.1",
     "nodemon": "^2.0.22",
+    "react-mic": "^12.4.6",
     "uuid": "^9.0.0"
   }
 }

Project/Frontend/SignConnectPlus/src/pages/emotion-detection/emotion-audio-detection/list/list.tsx

-
+import React, { useState } from 'react';
 import MainCard from 'components/MainCard';
 import ScrollX from 'components/ScrollX';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
-// import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice';
 import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
-// import MicIcon from '@mui/icons-material/Mic'; // Import MicIcon from the correct path
-// import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'; // Import CloudUploadOutlinedIcon from the correct path
+import AudioOutlined from '@ant-design/icons/lib/icons/AudioOutlined';
 
 const List = () => {
+    const [audioBlob, setAudioBlob] = useState<Blob | undefined>(undefined);
+    const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | undefined>(undefined);
+    const [isRecording, setIsRecording] = useState<boolean>(false);
+    const [audioUrl, setAudioUrl] = useState<string | undefined>(undefined);
+
+    const handleRecordStart = async () => {
+        // Clear the uploaded audio state when recording starts
+        setAudioUrl(undefined);
+
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            const recorder = new MediaRecorder(stream);
+
+            recorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    setAudioBlob(new Blob([event.data], { type: 'audio/wav' }));
+                }
+            };
+
+            recorder.onstop = () => {
+                stream.getTracks().forEach(track => track.stop());
+            };
+
+            setMediaRecorder(recorder);
+            recorder.start();
+            setIsRecording(true);
+        } catch (error) {
+            console.error('Error starting recording:', error);
+        }
+    };
+
+    const handleRecordStop = () => {
+        if (mediaRecorder && isRecording) {
+            mediaRecorder.stop();
+            setIsRecording(false);
+        }
+    };
+
+    const handleUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (files && files[0] && files[0].type.startsWith('audio/')) {
+            const audioObjectUrl = URL.createObjectURL(files[0]);
+            setAudioUrl(audioObjectUrl);
+        } else {
+            // Handle case where uploaded file is not an audio file
+        }
+    };
+
     return (
         <MainCard content={false}>
             <ScrollX>
-                
                 <Grid container spacing={2}>
                     <Grid item xs={12} md={6}>
-                    <h2>Upload or Record</h2>
+                        <h2>Upload or Record</h2>
                         <MainCard>
                             <div style={{ textAlign: 'center' }}>
-                                <h2>Upload Your Files</h2>
+                                <input
+                                    type="file"
+                                    accept="audio/*"
+                                    onChange={handleUpload}
+                                    style={{ display: 'none' }}
+                                    id="audio-upload"
+                                />
+                                <label htmlFor="audio-upload">
+                                    <Button
+                                        variant="contained"
+                                        color="primary"
+                                        component="span"
+                                        startIcon={<UploadOutlined />}
+                                    >
+                                        Upload
+                                    </Button>
+                                </label>
                                 <Button
                                     variant="contained"
                                     color="primary"
-                                    startIcon={<UploadOutlined />}
+                                    startIcon={<AudioOutlined />}
+                                    onClick={isRecording ? handleRecordStop : handleRecordStart}
                                 >
-                                    Upload
-                                </Button>
-                                <Button
-                                    variant="contained"
-                                    color="primary"
-                                    // startIcon={<KeyboardVoiceIcon />}
-                                >
-                                    Record
+                                    {isRecording ? 'Stop Recording' : 'Record'}
                                 </Button>
+                                {audioBlob && (
+                                    <audio controls>
+                                        <source src={URL.createObjectURL(audioBlob)} type="audio/wav" />
+                                        Your browser does not support the audio element.
+                                    </audio>
+                                )}
+                                {audioUrl && (
+                                    <audio controls>
+                                        <source src={audioUrl} type="audio/mpeg" />
+                                        Your browser does not support the audio element.
+                                    </audio>
+                                )}
                             </div>
                         </MainCard>
                     </Grid>
                     <Grid item xs={12} md={6}>
-                    <h2>3D Avatar</h2>
+                        <h2>3D Avatar</h2>
                         <MainCard>
                             {/* Content of the second card */}
                             {/* You can put your 3D avatar components here */}
@@ -50,4 +117,3 @@ const List = () => {
 };
 
 export default List;
-