Merge pull request katspaugh#542 from thijstriemstra/mic-upgrade

microphone plugin: add play, pause and stopDevice
Pandahisham · Oct 6, 2015 · a6c6b10 · a6c6b10
2 parents c80454c + e28f581
commit a6c6b10
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 16 deletions.
diff --git a/example/microphone/index.html b/example/microphone/index.html
@@ -56,7 +56,7 @@ <h4>Installation</h4>
                         <li>add the Microphone plugin script tag</li>
                         <li>create a <code>WaveSurfer</code> instance</li>
                         <li>create a <code>Microphone</code> instance</li>
-                        <li>control the Microphone using the <code>start</code>, <code>stop</code> and <code>togglePlay</code> methods</li>
+                        <li>control the Microphone using the <code>start</code>, <code>stopDevice</code>, <code>play</code>, <code>pause</code>, <code>stop</code> and <code>togglePlay</code> methods</li>
                       </ol>
                     </p>
                     <p>
@@ -94,10 +94,19 @@ <h4>Quick Start</h4>
 microphone.start();
 
 // pause rendering
-//microphone.togglePlay();
+//microphone.pause();
 
-// stop and disconnect microphone
+// resume rendering
+//microphone.play();
+
+// stop visualization and disconnect microphone
+//microphone.stopDevice();
+
+// same as stopDevice() but also clears the wavesurfer canvas
 //microphone.stop();
+
+// destroy the plugin
+//microphone.destroy();
 </code></pre>
                     </p></noindex>
 

diff --git a/plugin/wavesurfer.microphone.js b/plugin/wavesurfer.microphone.js
@@ -19,6 +19,7 @@
 
             this.active = false;
             this.paused = false;
+            this.reloadBufferFunction = this.reloadBuffer.bind(this);
 
             // cross-browser getUserMedia
             this.getUserMedia = (
@@ -70,31 +71,62 @@
                 this.paused = !this.paused;
 
                 if (this.paused) {
-                    // disconnect sources so they can be used elsewhere
-                    // (eg. during audio playback)
-                    this.disconnect();
+                    this.pause();
                 } else {
-                    // resume visualization
-                    this.connect();
+                    this.play();
                 }
             }
         },
 
         /**
-         * Stop the microphone and visualization.
+         * Play visualization.
+         */
+        play: function() {
+            this.paused = false;
+
+            this.connect();
+        },
+
+        /**
+         * Pause visualization.
+         */
+        pause: function() {
+            this.paused = true;
+
+            // disconnect sources so they can be used elsewhere
+            // (eg. during audio playback)
+            this.disconnect();
+        },
+
+        /**
+         * Stop the device stream and remove any remaining waveform drawing from
+         * the wavesurfer canvas.
          */
         stop: function() {
             if (this.active) {
-                this.active = false;
+                // stop visualization and device
+                this.stopDevice();
 
-                if (this.stream) {
-                    this.stream.stop();
-                }
-                this.disconnect();
+                // empty last frame
                 this.wavesurfer.empty();
             }
         },
 
+        /**
+         * Stop the device and the visualization.
+         */
+        stopDevice: function() {
+            this.active = false;
+
+            // stop visualization
+            this.disconnect();
+
+            // stop stream from device
+            if (this.stream) {
+                this.stream.stop();
+            }
+        },
+
         /**
          * Connect the media sources that feed the visualization.
          */
@@ -108,7 +140,7 @@
                 this.mediaStreamSource.connect(this.levelChecker);
 
                 this.levelChecker.connect(this.micContext.destination);
-                this.levelChecker.onaudioprocess = this.reloadBuffer.bind(this);
+                this.levelChecker.onaudioprocess = this.reloadBufferFunction;
             }
         },
 
@@ -122,6 +154,7 @@
 
             if (this.levelChecker !== undefined) {
                 this.levelChecker.disconnect();
+                this.levelChecker.onaudioprocess = undefined;
             }
         },
 
@@ -144,7 +177,8 @@
             this.stream = stream;
             this.active = true;
 
-            this.connect();
+            // start visualization
+            this.play();
 
             // notify listeners
             this.fireEvent('deviceReady', stream);