Improve browser responsiveness during encoding

Adjust encoding process after recording (closeio#13)
Fix sample to disable buttons during this encoding

dist/index.js

@@ -16001,34 +16001,66 @@ var MicRecorder = function () {
       return this;
     }
   }, {
-    key: 'getMp3',
+    key: 'encodeRawChunks',
 
 
     /**
-     * Return Mp3 Buffer and Blob with type mp3
+     * Encodes raw audio chunks into mp3
      * @return Promise
      */
-    value: function getMp3() {
+    value: function encodeRawChunks() {
       var _this3 = this;
 
-      if (this.config.encodeAfterRecord) {
-        this.rawChunksBuffer.forEach(function (rawChunk) {
-          _this3.lameEncoder.encode(rawChunk);
+      return this.rawChunksBuffer.reduce(function (previousOperation, rawChunk) {
+        return previousOperation.then(function () {
+          return new Promise(function (resolve) {
+            //this improve browser responsiveness during encoding process
+            setTimeout(function () {
+              _this3.lameEncoder.encode(rawChunk);
+              resolve();
+            });
+          });
         });
-        this.rawChunksBuffer = null;
-      }
+      }, Promise.resolve());
+    }
+
+    /**
+     * Finishes encoding process and returns prepared mp3 file as a result
+     * @return Promise
+     */
+
+  }, {
+    key: 'finishEncoding',
+    value: function finishEncoding() {
+      var _this4 = this;
 
       var finalBuffer = this.lameEncoder.finish();
+      this.rawChunksBuffer = null;
 
       return new Promise(function (resolve, reject) {
         if (finalBuffer.length === 0) {
           reject(new Error('No buffer to send'));
         } else {
           resolve([finalBuffer, new Blob(finalBuffer, { type: 'audio/mp3' })]);
-          _this3.lameEncoder.clearBuffer();
+          _this4.lameEncoder.clearBuffer();
         }
       });
     }
+
+    /**
+     * Return Mp3 Buffer and Blob with type mp3
+     * @return Promise
+     */
+
+  }, {
+    key: 'getMp3',
+    value: function getMp3() {
+      var _this5 = this;
+
+      return (this.config.encodeAfterRecord ? this.encodeRawChunks() : Promise.resolve()).then(function () {
+        return _this5.finishEncoding();
+      });
+    }
   }]);
   return MicRecorder;
 }();

samples/index.html

@@ -86,10 +86,12 @@ <h1>Mic Recorder to Mp3 Example</h1>
     }
 
     function stopRecording() {
+      stopButton.disabled = true;
+      startPauseButton.disabled = true;
+
       recorder.stop().getMp3().then(([buffer, blob]) => {
         console.log(buffer, blob);
         encodeAfterRecordCheck.disabled = false;
-        stopButton.disabled = true;
         const file = new File(buffer, 'music.mp3', {
           type: blob.type,
           lastModified: Date.now()
@@ -101,6 +103,7 @@ <h1>Mic Recorder to Mp3 Example</h1>
         li.appendChild(player);
         document.querySelector('#playlist').appendChild(li);
 
+        startPauseButton.disabled = false;
         startPauseButton.textContent = LABELS.START;
         startPauseButton.classList.remove('btn-info');
         startPauseButton.removeEventListener('click', startRecording);

src/mic-recorder.js

@@ -162,18 +162,30 @@ class MicRecorder {
   };
 
   /**
-   * Return Mp3 Buffer and Blob with type mp3
+   * Encodes raw audio chunks into mp3
    * @return Promise
    */
-  getMp3() {
-    if (this.config.encodeAfterRecord) {
-      this.rawChunksBuffer.forEach((rawChunk) => {
-        this.lameEncoder.encode(rawChunk);
-      })
-      this.rawChunksBuffer = null;
-    }
+  encodeRawChunks() {
+    return this.rawChunksBuffer.reduce((previousOperation, rawChunk) => {
+      return previousOperation.then(() => {
+        return new Promise((resolve) => {
+          //this improve browser responsiveness during encoding process
+          setTimeout(() => {
+            this.lameEncoder.encode(rawChunk);
+            resolve();
+          });
+        });
+      });
+    }, Promise.resolve());
+  }
 
+  /**
+   * Finishes encoding process and returns prepared mp3 file as a result
+   * @return Promise
+   */
+  finishEncoding() {
     const finalBuffer = this.lameEncoder.finish();
+    this.rawChunksBuffer = null;
 
     return new Promise((resolve, reject) => {
       if (finalBuffer.length === 0) {
@@ -183,7 +195,19 @@ class MicRecorder {
         this.lameEncoder.clearBuffer();
       }
     });
-  };
+  }
+
+  /**
+   * Return Mp3 Buffer and Blob with type mp3
+   * @return Promise
+   */
+  getMp3() {
+    return (
+      this.config.encodeAfterRecord
+        ? this.encodeRawChunks()
+        : Promise.resolve()
+    ).then(() => this.finishEncoding());
+  }
 }
 
 export default MicRecorder;