Pause recording

Added pause recording functionality (closeio#17) Updated sample to show this feature too
picasocro1 · Aug 8, 2020 · 5cd2ad7 · 5cd2ad7
1 parent e92d0aa
commit 5cd2ad7
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 77 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 .DS_Store
 node_modules
+
+/.idea
diff --git a/dist/index.js b/dist/index.js
@@ -15868,22 +15868,101 @@ var MicRecorder = function () {
         _this.lameEncoder.encode(event.inputBuffer.getChannelData(0));
       };
 
-      // Begin retrieving microphone data.
-      this.microphone.connect(this.processor);
-      this.processor.connect(this.context.destination);
+      this.connectMicrophone();
     }
   }, {
-    key: 'stop',
+    key: 'initialize',
+
+
+    /**
+     * Requests access to the microphone and starts recording
+     * @return Promise
+     */
+    value: function initialize() {
+      var _this2 = this;
+
+      var AudioContext = window.AudioContext || window.webkitAudioContext;
+      this.context = new AudioContext();
+      this.config.sampleRate = this.context.sampleRate;
+      this.lameEncoder = new Encoder(this.config);
+
+      var audio = this.config.deviceId ? { deviceId: { exact: this.config.deviceId } } : true;
+
+      return new Promise(function (resolve, reject) {
+        navigator.mediaDevices.getUserMedia({ audio: audio }).then(function (stream) {
+          _this2.addMicrophoneListener(stream);
+          resolve(stream);
+        }).catch(function (err) {
+          reject(err);
+        });
+      });
+    }
+  }, {
+    key: 'start',
+
+
+    /**
+     * Initializes or resumes recording
+     * @return Promise
+     */
+    value: function start() {
+      if (!this.processor || !this.microphone) {
+        return this.initialize();
+      } else {
+        this.connectMicrophone();
+        return Promise.resolve();
+      }
+    }
+
+    /**
+     * Pause recording
+     * @return Promise
+     */
+
+  }, {
+    key: 'pause',
+    value: function pause() {
+      this.disconnectMicrophone();
+      return Promise.resolve();
+    }
+  }, {
+    key: 'connectMicrophone',
+
+
+    /**
+     * Start retrieving microphone data
+     */
+    value: function connectMicrophone() {
+      if (this.processor && this.microphone) {
+        this.microphone.connect(this.processor);
+        this.processor.connect(this.context.destination);
+      }
+    }
 
+    /**
+     * Stop retrieving microphone data
+     */
+
+  }, {
+    key: 'disconnectMicrophone',
+    value: function disconnectMicrophone() {
+      if (this.processor && this.microphone) {
+        this.microphone.disconnect();
+        this.processor.disconnect();
+      }
+    }
 
     /**
      * Disconnect microphone, processor and remove activeStream
+     * @return MicRecorder
      */
+
+  }, {
+    key: 'stop',
     value: function stop() {
       if (this.processor && this.microphone) {
         // Clean up the Web Audio API resources.
-        this.microphone.disconnect();
-        this.processor.disconnect();
+        this.disconnectMicrophone();
 
         // If all references using this.context are destroyed, context is closed
         // automatically. DOMException is fired when trying to close again
@@ -15897,44 +15976,19 @@ var MicRecorder = function () {
         this.activeStream.getAudioTracks().forEach(function (track) {
           return track.stop();
         });
+        this.processor = null;
+        this.microphone = null;
       }
 
       return this;
     }
-  }, {
-    key: 'start',
-
-
-    /**
-     * Requests access to the microphone and start recording
-     * @return Promise
-     */
-    value: function start() {
-      var _this2 = this;
-
-      var AudioContext = window.AudioContext || window.webkitAudioContext;
-      this.context = new AudioContext();
-      this.config.sampleRate = this.context.sampleRate;
-      this.lameEncoder = new Encoder(this.config);
-
-      var audio = this.config.deviceId ? { deviceId: { exact: this.config.deviceId } } : true;
-
-      return new Promise(function (resolve, reject) {
-        navigator.mediaDevices.getUserMedia({ audio: audio }).then(function (stream) {
-          _this2.addMicrophoneListener(stream);
-          resolve(stream);
-        }).catch(function (err) {
-          reject(err);
-        });
-      });
-    }
   }, {
     key: 'getMp3',
 
 
     /**
      * Return Mp3 Buffer and Blob with type mp3
-     * @return {Promise}
+     * @return Promise
      */
     value: function getMp3() {
       var _this3 = this;

diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/samples/index.html b/samples/index.html
@@ -12,7 +12,8 @@ <h1>Mic Recorder to Mp3 Example</h1>
 
     <hr />
 
-    <button class="btn btn-primary">Start recording</button>
+    <button id="start-pause" class="btn btn-primary"></button>
+    <button id="stop" class="btn btn-danger" disabled></button>
 
     <br />
     <br />
@@ -25,19 +26,43 @@ <h1>Mic Recorder to Mp3 Example</h1>
   <!-- <script src="https://unpkg.com/mic-recorder-to-mp3"></script> -->
   <script src="../dist/index.js"></script>
   <script>
-    const button = document.querySelector('button');
+    const LABELS = {
+      START: 'Start recording',
+      PAUSE: 'Pause recording',
+      RESUME: 'Resume recording',
+      STOP: 'Stop recording'
+    };
+
+    const startPauseButton = document.getElementById('start-pause');
+    const stopButton = document.getElementById('stop');
     const recorder = new MicRecorder({
       bitRate: 128
     });
 
-    button.addEventListener('click', startRecording);
+    startPauseButton.textContent = LABELS.START;
+    stopButton.textContent = LABELS.STOP;
+
+    startPauseButton.addEventListener('click', startRecording);
+    stopButton.addEventListener('click', stopRecording);
 
     function startRecording() {
       recorder.start().then(() => {
-        button.textContent = 'Stop recording';
-        button.classList.toggle('btn-danger');
-        button.removeEventListener('click', startRecording);
-        button.addEventListener('click', stopRecording);
+        startPauseButton.textContent = LABELS.PAUSE;
+        startPauseButton.classList.add('btn-info');
+        stopButton.disabled = false;
+        startPauseButton.removeEventListener('click', startRecording);
+        startPauseButton.addEventListener('click', pauseRecording);
+      }).catch((e) => {
+        console.error(e);
+      });
+    }
+
+    function pauseRecording() {
+      recorder.pause().then(() => {
+        startPauseButton.textContent = LABELS.RESUME;
+        startPauseButton.classList.remove('btn-info');
+        startPauseButton.removeEventListener('click', pauseRecording);
+        startPauseButton.addEventListener('click', startRecording);
       }).catch((e) => {
         console.error(e);
       });
@@ -46,6 +71,7 @@ <h1>Mic Recorder to Mp3 Example</h1>
     function stopRecording() {
       recorder.stop().getMp3().then(([buffer, blob]) => {
         console.log(buffer, blob);
+        stopButton.disabled = true;
         const file = new File(buffer, 'music.mp3', {
           type: blob.type,
           lastModified: Date.now()
@@ -57,14 +83,15 @@ <h1>Mic Recorder to Mp3 Example</h1>
         li.appendChild(player);
         document.querySelector('#playlist').appendChild(li);
 
-        button.textContent = 'Start recording';
-        button.classList.toggle('btn-danger');
-        button.removeEventListener('click', stopRecording);
-        button.addEventListener('click', startRecording);
+        startPauseButton.textContent = LABELS.START;
+        startPauseButton.classList.remove('btn-info');
+        startPauseButton.removeEventListener('click', startRecording);
+        startPauseButton.removeEventListener('click', pauseRecording);
+        startPauseButton.addEventListener('click', startRecording);
       }).catch((e) => {
         console.error(e);
       });
     }
   </script>
 </body>
-</html>
+</html>
diff --git a/src/mic-recorder.js b/src/mic-recorder.js
@@ -52,19 +52,82 @@ class MicRecorder {
       this.lameEncoder.encode(event.inputBuffer.getChannelData(0));
     };
 
-    // Begin retrieving microphone data.
-    this.microphone.connect(this.processor);
-    this.processor.connect(this.context.destination);
+    this.connectMicrophone();
   };
 
+  /**
+   * Requests access to the microphone and starts recording
+   * @return Promise
+   */
+  initialize() {
+    const AudioContext = window.AudioContext || window.webkitAudioContext;
+    this.context = new AudioContext();
+    this.config.sampleRate = this.context.sampleRate;
+    this.lameEncoder = new Encoder(this.config);
+
+    const audio = this.config.deviceId ? { deviceId: { exact: this.config.deviceId } } : true;
+
+    return new Promise((resolve, reject) => {
+      navigator.mediaDevices.getUserMedia({ audio })
+        .then(stream => {
+          this.addMicrophoneListener(stream);
+          resolve(stream);
+        }).catch(function(err) {
+        reject(err);
+      });
+    })
+  };
+
+  /**
+   * Initializes or resumes recording
+   * @return Promise
+   */
+  start() {
+    if (!this.processor || !this.microphone) {
+      return this.initialize();
+    } else {
+      this.connectMicrophone();
+      return Promise.resolve();
+    }
+  }
+
+  /**
+   * Pause recording
+   * @return Promise
+   */
+  pause() {
+    this.disconnectMicrophone();
+    return Promise.resolve();
+  };
+
+  /**
+   * Start retrieving microphone data
+   */
+  connectMicrophone() {
+    if (this.processor && this.microphone) {
+      this.microphone.connect(this.processor);
+      this.processor.connect(this.context.destination);
+    }
+  }
+
+  /**
+   * Stop retrieving microphone data
+   */
+  disconnectMicrophone() {
+    if (this.processor && this.microphone) {
+      this.microphone.disconnect();
+      this.processor.disconnect();
+    }
+  }
+
   /**
    * Disconnect microphone, processor and remove activeStream
+   * @return MicRecorder
    */
   stop() {
     if (this.processor && this.microphone) {
       // Clean up the Web Audio API resources.
-      this.microphone.disconnect();
-      this.processor.disconnect();
+      this.disconnectMicrophone();
 
       // If all references using this.context are destroyed, context is closed
       // automatically. DOMException is fired when trying to close again
@@ -76,37 +139,16 @@ class MicRecorder {
 
       // Stop all audio tracks. Also, removes recording icon from chrome tab
       this.activeStream.getAudioTracks().forEach(track => track.stop());
+      this.processor = null;
+      this.microphone = null;
     }
 
     return this;
   };
 
-  /**
-   * Requests access to the microphone and start recording
-   * @return Promise
-   */
-  start() {
-    const AudioContext = window.AudioContext || window.webkitAudioContext;
-    this.context = new AudioContext();
-    this.config.sampleRate = this.context.sampleRate;
-    this.lameEncoder = new Encoder(this.config);
-
-    const audio = this.config.deviceId ? { deviceId: { exact: this.config.deviceId } } : true;
-
-    return new Promise((resolve, reject) => {
-      navigator.mediaDevices.getUserMedia({ audio })
-        .then(stream => {
-          this.addMicrophoneListener(stream);
-          resolve(stream);
-        }).catch(function(err) {
-          reject(err);
-        });
-    })
-  };
-
   /**
    * Return Mp3 Buffer and Blob with type mp3
-   * @return {Promise}
+   * @return Promise
    */
   getMp3() {
     const finalBuffer = this.lameEncoder.finish();
@@ -120,6 +162,6 @@ class MicRecorder {
       }
     });
   };
-};
+}
 
 export default MicRecorder;