fix mic input for mac

frontend/package-lock.json

@@ -3143,14 +3143,6 @@
       "resolved": "https://registry.npmjs.org/atob-lite/-/atob-lite-1.0.0.tgz",
       "integrity": "sha1-uI3KYAaSK5YglPdVaCa6sxxKKWs="
     },
-    "audio-react-recorder": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/audio-react-recorder/-/audio-react-recorder-1.0.4.tgz",
-      "integrity": "sha512-an7eX0yOGDbZOSu2LvnfWIsI41pkx9nXgtBVbI+9ByS91WKqoVGVb5pbmqHax5sZty2DjOIG/neuxcghIU/ucg==",
-      "requires": {
-        "prop-types": "^15.7.2"
-      }
-    },
     "autoprefixer": {
       "version": "9.8.6",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
@@ -9592,6 +9584,11 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "inline-worker": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/inline-worker/-/inline-worker-1.1.0.tgz",
+      "integrity": "sha1-VelvVJFaZCsAhyotqm/oMrQkyY0="
+    },
     "inquirer": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz",
@@ -15811,6 +15808,14 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recorder-js": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/recorder-js/-/recorder-js-1.0.7.tgz",
+      "integrity": "sha1-VBbwXIY9lcS260smWK1sG6+fVnc=",
+      "requires": {
+        "inline-worker": "^1.1.0"
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",

frontend/package.json

@@ -9,7 +9,6 @@
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
     "@toast-ui/react-image-editor": "^3.14.2",
-    "audio-react-recorder": "^1.0.4",
     "classnames": "^2.3.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
@@ -25,6 +24,7 @@
     "react-plotly.js": "^2.5.1",
     "react-scripts": "4.0.3",
     "react-webcam": "^5.2.3",
+    "recorder-js": "^1.0.7",
     "sass": "^1.32.8",
     "source-map-explorer": "^2.5.2",
     "web-vitals": "^1.1.1",

frontend/src/components/input/audio.jsx

@@ -1,37 +1,50 @@
 import React from "react";
 import BaseComponent from "../base_component";
 import { DataURLComponentExample } from "../component_example";
-import AudioReactRecorder, { RecordState } from "audio-react-recorder";
+import Recorder from "recorder-js";
 import { getSaliencyColor } from "../../utils";
 
 class AudioInput extends BaseComponent {
   constructor(props) {
     super(props);
     this.state = {
-      recordState: RecordState.STOP
+      recording: false
     };
     this.src = null;
     this.key = 0; // needed to prevent audio caching
 
     this.uploader = React.createRef();
+    this.started = false;
   }
   start = () => {
+    if (!this.started) {
+      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      this.recorder = new Recorder(audioContext);
+      navigator.mediaDevices.getUserMedia({ audio: true })
+        .then(stream => {
+          this.recorder.init(stream);
+          this.recorder.start();
+        });
+      this.started = true;
+    } else {
+      this.recorder.start();
+    }
     this.setState({
-      recordState: RecordState.START
+      recording: true
     });
   };
   stop = () => {
+    this.recorder.stop().then(({ blob, buffer }) => {
+      let reader = new FileReader();
+      reader.onload = function (e) {
+        this.props.handleChange(e.target.result);
+      }.bind(this);
+      reader.readAsDataURL(blob);
+    })
     this.setState({
-      recordState: RecordState.STOP
+      recording: false
     });
   };
-  onStop = (audioData) => {
-    let reader = new FileReader();
-    reader.onload = function (e) {
-      this.props.handleChange(e.target.result);
-    }.bind(this);
-    reader.readAsDataURL(audioData.blob);
-  };
   openFileUpload = () => {
     this.uploader.current.click();
   };
@@ -63,18 +76,14 @@ class AudioInput extends BaseComponent {
       if (this.props.source === "microphone") {
         return (
           <div className="input_audio">
-            <AudioReactRecorder
-              state={this.state.recordState}
-              onStop={this.onStop}
-            />
-            {this.state.recordState === RecordState.STOP ? (
-              <button className="start" onClick={this.start}>
-                Record
-              </button>
-            ) : (
+            {this.state.recording ? (
               <button className="stop" onClick={this.stop}>
                 Recording...
               </button>
+            ) : (
+              <button className="start" onClick={this.start}>
+                Record
+              </button>
             )}
           </div>
         );