Allow shorter recordings

Author: benfoxall

Diff for: src/RecordAudio.tsx

@@ -1,39 +1,64 @@
-import { FC, useState } from "react";
+import { FC, useState, useEffect } from "react";
 
 const RecordAudio: FC<{ onCreated: (blob: Blob) => void }> = ({
   onCreated,
 }) => {
   const [isRecording, setIsRecording] = useState(false);
 
-  const startRecording = async () => {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  // stop after 10s
+  useEffect(() => {
+    if (!isRecording) return;
 
-    const recorder = new MediaRecorder(stream);
-    const chunks: Blob[] = [];
-    recorder.ondataavailable = (event) => {
-      chunks.push(event.data);
-    };
-    recorder.onstop = () => {
-      const audioBlob = new Blob(chunks, { type: recorder.mimeType });
-      onCreated(audioBlob);
-    };
+    const timer = setTimeout(() => setIsRecording(false), 10000);
+
+    return () => clearTimeout(timer);
+  }, [isRecording]);
+
+  //
+  useEffect(() => {
+    if (!isRecording) return;
+
+    const stream = navigator.mediaDevices.getUserMedia({ audio: true });
+
+    const recorder = stream.then((stream) => {
+      const recorder = new MediaRecorder(stream);
+      const chunks: Blob[] = [];
+      recorder.ondataavailable = (event) => {
+        chunks.push(event.data);
+      };
+      recorder.onstop = () => {
+        const audioBlob = new Blob(chunks, { type: recorder.mimeType });
 
-    recorder.start();
-    setIsRecording(true);
-    setTimeout(() => {
-      recorder?.stop();
-      setIsRecording(false);
+        if (audioBlob.size < 1500) {
+          console.warn("Skipping small blob", audioBlob);
+          return;
+        }
+
+        onCreated(audioBlob);
+      };
+
+      recorder.start();
+
+      return recorder;
+    });
+
+    return () => {
+      recorder.then((recorder) => recorder.stop());
+      stream.then((stream) =>
+        stream.getTracks().forEach((track) => track.stop())
+      );
+    };
 
-      for (const track of stream.getTracks()) {
-        track.stop();
-      }
-    }, 5000); // Stop recording after 5 seconds
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRecording]);
 
   return (
     <div>
-      <button onClick={startRecording} disabled={isRecording}>
-        {isRecording ? "Recording..." : "Add Recording"}
+      <button
+        onClick={() => setIsRecording((prev) => !prev)}
+        style={{ background: isRecording ? "red" : "" }}
+      >
+        {isRecording ? "Stop Recording" : "Start Recording"}
       </button>
     </div>
   );