Start and stop sequencer with space

1 files changed, 33 insertions, 24 deletions

diff --git a/src/view/sequencer/play.ts b/src/view/sequencer/play.ts
index 57d8450..54f061d 100644
--- a/src/view/sequencer/play.ts
+++ b/src/view/sequencer/play.ts
@@ -15,34 +15,43 @@ export function view({ onNextStep, onStop }: Params) {
   let isPlaying = false
   let lastBeat: undefined | number = undefined
 
-  return h('div', {},
-    h('button',
-      { className: 'g-PlayStop',
-        onclick: async (e: Event) => {
-          const target = e.target as HTMLButtonElement
-          isPlaying = !isPlaying
-          target.innerText = isPlaying ? '■' : '▶'
-
-          let sounds = await soundsLib.load()
-          let step = (timestamp: number) => {
-            if (lastBeat === undefined || timestamp - lastBeat > 1000 * 60 / bpm) {
-              lastBeat = timestamp
-              onNextStep(sounds)
-            }
+  let button = h('button',
+    { className: 'g-PlayStop',
+      onclick: async (e: Event) => {
+        const target = e.target as HTMLButtonElement
+        isPlaying = !isPlaying
+        target.innerText = isPlaying ? '■' : '▶'
 
-            if (isPlaying) window.requestAnimationFrame(step)
+        let sounds = await soundsLib.load()
+        let step = (timestamp: number) => {
+          if (lastBeat === undefined || timestamp - lastBeat > 1000 * 60 / bpm) {
+            lastBeat = timestamp
+            onNextStep(sounds)
           }
 
-          if (isPlaying) {
-            window.requestAnimationFrame(step)
-          } else {
-            onStop()
-          }
+          if (isPlaying) window.requestAnimationFrame(step)
         }
-      },
-      '▶'
-    )
-    , h('label', 
+
+        if (isPlaying) {
+          window.requestAnimationFrame(step)
+        } else {
+          onStop()
+        }
+      }
+    },
+    '▶'
+  ) as HTMLButtonElement
+
+  document.addEventListener('keydown', event => {
+    if (event.key == " ") {
+      event.preventDefault()
+      button.click()
+    }
+  })
+
+  return h('div', {},
+    button,
+    h('label', 
       { className: 'g-Bpm' },
       'BPM',
       h('input',