(Gsoc'21)💚changed state variable to 2 booleans in soundRecorder example

Author: satyasaibhushan

examples/record/sketch.js

@@ -5,7 +5,8 @@
 let mic, recorder, soundFile;
 
 let state = 0; // mousePress will increment from state = 0 (Record), to 1(Stop), to 2(Play)
-
+let isRecordingStarted = false;
+let isResultPlayed = false;
 
 function setup() {
   createCanvas(400, 400);
@@ -29,23 +30,23 @@ function setup() {
 function mousePressed() {
   userStartAudio();
   // use the '.enabled' boolean to make sure user enabled the mic (otherwise we'd record silence)
-  if (state === 0) {
+  if (!isRecordingStarted && !isResultPlayed) {
     // users must manually enable their browser microphone for recording to work properly!
     mic.start(function () {
       // Tell recorder to record to a p5.SoundFile which we will use for playback
       recorder.record(soundFile);
 
       background(255, 0, 0);
       text('Recording now! Click to stop.', 20, 20);
-      state++;
+      isRecordingStarted = true;
     });
-  } else if (state === 1) {
+  } else if (isRecordingStarted && !isResultPlayed) {
     recorder.stop(); // stop recorder, and send the result to soundFile
     mic.dispose();
     background(0, 255, 0);
     text('Recording stopped. Click to play', 20, 20);
-    state++;
-  } else if (state === 2) {
+    isResultPlayed = true;
+  } else if (isRecordingStarted && isResultPlayed) {
     soundFile.play(); // play the result!
   }
 }

src/soundRecorder.js

@@ -20,8 +20,10 @@ const ac = p5sound.audiocontext;
  *  @example
  *  <div><code>
  *  let mic, recorder, soundFile;
- *  // mousePress will increment from state = 0 (Record), to 1(Stop), to 2(Play)
- *  let state = 0;
+ *  // keeps record if recording is started
+ *  let isRecordingStarted = false;
+ *  // keeps record if the recorded result is played
+ *  let isResultPlayed = false;
  *
  *  function setup() {
  *    let cnv = createCanvas(100, 100);
@@ -49,7 +51,7 @@ const ac = p5sound.audiocontext;
  *    // ensure audio is enabled
  *    userStartAudio();
  *
- *    if (state === 0) {
+ *    if (!isRecordingStarted && !isResultPlayed) {
  *    // make sure user enabled the mic by prompting to enable their browser mic
  *    // start recording after the mic is enabled
  *      mic.start(function() {
@@ -58,10 +60,10 @@ const ac = p5sound.audiocontext;
  *
  *        background(255,0,0);
  *        text('Recording!', width/2, height/2);
- *        state++;
+ *        isRecordingStarted = true;
  *      });
  *    }
- *    else if (state === 1) {
+ *    else if (isRecordingStarted && !isResultPlayed) {
  *      background(0,255,0);
  *
  *      // stop recorder and
@@ -71,10 +73,10 @@ const ac = p5sound.audiocontext;
  *      mic.dispose();
  *
  *      text('Done! Tap to play and download', width/2, height/2, width - 20);
- *      state++;
+ *      isResultPlayed = true;
  *    }
  *
- *    else if (state === 2) {
+ *    else if (isRecordingStarted && isResultPlayed) {
  *      soundFile.play(); // play the result!
  *      save(soundFile, 'mySound.wav');
  *    }