Prep for recording voice

client/src/components/HumanInput.jsx

@@ -1,6 +1,49 @@
-import React from "react";
+import React, { useState } from "react";
 
 function HumanInput({ onAddNewTopic }) {
+  const [recording, setRecording] = useState(false);
+  const [mediaRecorder, setMediaRecorder] = useState(null);
+
+  // Function to start recording
+  const startRecording = () => {
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
+      .then((stream) => {
+        const newMediaRecorder = new MediaRecorder(stream);
+        setMediaRecorder(newMediaRecorder);
+
+        newMediaRecorder.start();
+        setRecording(true);
+
+        let audioChunks = [];
+        newMediaRecorder.ondataavailable = (event) => {
+          audioChunks.push(event.data);
+        };
+
+        newMediaRecorder.onstop = () => {
+          const audioBlob = new Blob(audioChunks, { type: "audio/mp4" });
+          const audioUrl = URL.createObjectURL(audioBlob);
+
+          console.log("Stopping recording...");
+
+          // Optionally handle the audio blob by sending it to a parent component
+          onAddNewTopic(audioUrl); // Sending the URL for the audio blob to the parent
+          audioChunks = []; // Clear chunks
+        };
+      })
+      .catch((error) => {
+        console.error("Error accessing the microphone:", error);
+      });
+  };
+
+  // Function to stop recording
+  const stopRecording = () => {
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+      setRecording(false);
+    }
+  };
+
   function handleOnInput(e) {
     onAddNewTopic(e.target.value);
   }
@@ -12,6 +55,20 @@ function HumanInput({ onAddNewTopic }) {
         rows="2"
         placeholder="your input"
       />
+      <div>
+        <button
+          onClick={startRecording}
+          disabled={recording}
+        >
+          Start Recording
+        </button>
+        <button
+          onClick={stopRecording}
+          disabled={!recording}
+        >
+          Stop Recording
+        </button>
+      </div>
     </div>
   );
 }