audio input created as single instance

Author: mtraina

app/assets/javascripts/record/AudioInput.jsx

@@ -0,0 +1,54 @@
+import Recorder from "recorderjs";
+
+class AudioInput {
+
+  constructor() {
+    this.startUserMedia = this.startUserMedia.bind(this);
+
+    // webkit shim
+    navigator.getUserMedia = navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia;
+
+    if (navigator.getUserMedia) {
+      navigator.getUserMedia(
+        {"audio": {
+          "mandatory": {
+            "googEchoCancellation": "false",
+            "googAutoGainControl": "false",
+            "googNoiseSuppression": "false",
+            "googHighpassFilter": "false"
+          },
+          "optional": []
+        }},
+        this.startUserMedia, function(e) {
+          console.log('No live audio input: ' + e);
+        });
+    } else {
+      console.log("getUserMedia not supported");
+    }
+  }
+
+  startUserMedia(stream) {
+    let audioContext = new AudioContext;
+    let input = audioContext.createMediaStreamSource(stream);
+    console.log('Media stream created.');
+
+    this.recorder = new Recorder(input);
+    console.log('Recorder initialised.');
+  }
+
+  record() {
+    this.recorder && this.recorder.record();
+    console.log('Start recording...');
+  }
+
+  stopRecording(handleSpeech) {
+    this.recorder && this.recorder.stop();
+    this.recorder.exportWAV(handleSpeech);
+    this.recorder.clear();
+    console.log('Stop recording...');
+  }
+}
+
+export let audioInput = new AudioInput();

app/assets/javascripts/record/VoiceRecorder.jsx

@@ -1,58 +1,19 @@
 import React from "react";
-import Recorder from "recorderjs";
+import { audioInput } from "./AudioInput.jsx"
 
 export default class VoiceRecorder extends React.Component {
   constructor(props){
     super(props);
-    this.startUserMedia = this.startUserMedia.bind(this);
     this.startRecording = this.startRecording.bind(this);
     this.stopRecording = this.stopRecording.bind(this);
   }
 
-  componentDidMount(){
-    // webkit shim
-    navigator.getUserMedia = navigator.getUserMedia ||
-                         navigator.webkitGetUserMedia ||
-                         navigator.mozGetUserMedia;
-
-    if (navigator.getUserMedia) {
-      navigator.getUserMedia(
-        {"audio": {
-          "mandatory": {
-            "googEchoCancellation": "false",
-            "googAutoGainControl": "false",
-            "googNoiseSuppression": "false",
-            "googHighpassFilter": "false"
-          },
-          "optional": []
-        }},
-        this.startUserMedia, function(e) {
-          console.log('No live audio input: ' + e);
-        });
-    } else {
-      console.log("getUserMedia not supported");
-    }
-  }
-
-  startUserMedia(stream) {
-    let audioContext = new AudioContext;
-    let input = audioContext.createMediaStreamSource(stream);
-    console.log('Media stream created.');
-
-    this.recorder = new Recorder(input);
-    console.log('Recorder initialised.');
-  }
-
   startRecording() {
-    this.recorder && this.recorder.record();
-    console.log('Start recording...');
+    audioInput.record();
   }
 
   stopRecording(){
-    console.log('Stop recording...');
-    this.recorder && this.recorder.stop();
-    this.recorder.exportWAV(this.props.handleSpeech);
-    this.recorder.clear();
+    audioInput.stopRecording(this.props.handleSpeech);
   }
 
   render(){