Merge pull request #628 from satyasaibhushan/fixes_soundrecorder_mic_issues

(Gsoc'21) (Week-2) Fixes mic issues in recorder example

Author: Guillermo Montecinos

examples/record/sketch.js

@@ -2,22 +2,20 @@
 // We need p5.AudioIn (mic / sound source), p5.SoundRecorder
 // (records the sound), and a p5.SoundFile (play back).
 
-var mic, recorder, soundFile;
+let mic, recorder, soundFile;
 
-var state = 0; // mousePress will increment from Record, to Stop, to Play
+let isRecordingStarted = false;
+let isResultPlayed = false;
 
 function setup() {
-  createCanvas(400,400);
+  createCanvas(400, 400);
   background(200);
   fill(0);
   text('Enable mic and click the mouse to begin recording', 20, 20);
 
   // create an audio in
   mic = new p5.AudioIn();
 
-  // users must manually enable their browser microphone for recording to work properly!
-  mic.start();
-
   // create a sound recorder
   recorder = new p5.SoundRecorder();
 
@@ -29,26 +27,25 @@ function setup() {
 }
 
 function mousePressed() {
+  userStartAudio();
   // use the '.enabled' boolean to make sure user enabled the mic (otherwise we'd record silence)
-  if (state === 0 && mic.enabled) {
-
-    // 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++;
-  }
-
-  else if (state === 1) {
+  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);
+      isRecordingStarted = true;
+    });
+  } else if (isRecordingStarted && !isResultPlayed) {
     recorder.stop(); // stop recorder, and send the result to soundFile
-
-    background(0,255,0);
+    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!
   }
-}
+}

index.html

@@ -65,7 +65,6 @@ <h2>p5.sound
 <div><a href="examples/pause_soundfile">pause_soundfile</a></div>
 <div><a href="examples/peakDetect">peakDetect</a></div>
 <div><a href="examples/peakDetect_basic">peakDetect_basic</a></div>
-<div><a href="examples/peakDetection_offline">peakDetection_offline</a></div>
 <div><a href="examples/play_soundfile">play_soundfile</a></div>
 <div><a href="examples/playbackRate">playbackRate</a></div>
 <div><a href="examples/playbackRatePart">playbackRatePart</a></div>

src/looper.js

@@ -387,7 +387,7 @@ class Score {
   constructor() {
     // for all of the arguments
     this.parts = [];
-    this.currentPart = new Array(arguments.length);;
+    this.currentPart = new Array(arguments.length);
 
     var thisScore = this;
     for (var i in arguments) {
@@ -396,7 +396,7 @@ class Score {
       this.parts[i].onended = function () {
         thisScore.resetPart(i);
         playNextPart(thisScore);
-      };    
+      };
     }
     this.looping = false;
   }

src/soundRecorder.js

@@ -20,7 +20,10 @@ const ac = p5sound.audiocontext;
  *  @example
  *  <div><code>
  *  let mic, recorder, soundFile;
- *  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);
@@ -31,9 +34,6 @@ const ac = p5sound.audiocontext;
  *    // create an audio in
  *    mic = new p5.AudioIn();
  *
- *    // prompts user to enable their browser mic
- *    mic.start();
- *
  *    // create a sound recorder
  *    recorder = new p5.SoundRecorder();
  *
@@ -51,31 +51,34 @@ const ac = p5sound.audiocontext;
  *    // ensure audio is enabled
  *    userStartAudio();
  *
- *    // make sure user enabled the mic
- *    if (state === 0 && mic.enabled) {
- *
- *      // record to our p5.SoundFile
- *      recorder.record(soundFile);
+ *    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() {
+ *        // record to our p5.SoundFile
+ *        recorder.record(soundFile);
  *
- *      background(255,0,0);
- *      text('Recording!', width/2, height/2);
- *      state++;
+ *        background(255,0,0);
+ *        text('Recording!', width/2, height/2);
+ *        isRecordingStarted = true;
+ *      });
  *    }
- *    else if (state === 1) {
+ *    else if (isRecordingStarted && !isResultPlayed) {
  *      background(0,255,0);
  *
  *      // stop recorder and
  *      // send result to soundFile
  *      recorder.stop();
+ *      // stop browser from accessing the mic
+ *      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');
- *      state++;
  *    }
  *  }
  *  </div></code>