fixes #11 by implementing pause functionality. Also adds space shortcut to toggle play/pause. Also fixes bug in how play()-function handled isPlaying

Author: knandersen

src/ControlsHandler.js

@@ -8,6 +8,7 @@ export default class ControlsHandler {
 
         this.exportButton.addEventListener('click',this.exportWavFile)
         this.playButton.addEventListener('click',this.play)
+        this.pauseButton.addEventListener('click',this.pause)
 
         document.addEventListener('keydown',this.onKeydown.bind(this))
         this.morphaweb.wavesurfer.on('seek',this.onSeek.bind(this))
@@ -30,12 +31,24 @@ export default class ControlsHandler {
     }
 
     play = () => {
-        if(this.morphaweb.wavesurfer.isPlaying) {
+        if(this.morphaweb.wavesurfer.isPlaying()) {
             this.morphaweb.wavesurfer.seekTo(0)
         }
         this.morphaweb.wavesurfer.play()
     }
 
+    pause = () => {
+        this.morphaweb.wavesurfer.pause()
+    }
+
+    playToggle = () => {
+        if (this.morphaweb.wavesurfer.isPlaying()) {
+            this.morphaweb.wavesurfer.pause()
+        } else {
+            this.morphaweb.wavesurfer.play()
+        }
+    }
+
     onSeek = (p) => {
         this.morphaweb.playOffset = p
         this.morphaweb.markerHandler.removeTopMarker("top")
@@ -62,6 +75,9 @@ export default class ControlsHandler {
             case "k":
                 this.morphaweb.markerHandler.removeSelectedMarker()
                 break;
+            case " ":
+                this.playToggle()
+                break;
         }
     }
 

src/index.html

@@ -22,7 +22,7 @@
             <section>
                 <section>
                     <button id="play">play</button>
-                    <button id="pause" class="grey">pause</button>
+                    <button id="pause">pause</button>
                     <button id="export" class="button">
                         <div class="text-2xl">export reel</div>
                         <div class="text-xs">(stereo, 32-bit, 48KHz)</div>
@@ -51,6 +51,12 @@ <h3>SHORTCUTS</h3>
                     </div>
                     <div>remove selected marker</div>
                 </section>
+                <section class="shortcut">
+                    <div class="shortcut-icon">
+                        <div>␣</div>
+                    </div>
+                    <div>play/pause</div>
+                </section>
             </section>
         </section>
         <section class="footer">this is an <a href="https://github.com/knandersen/morphaweb" target="_blank">open source