feat: midi sync

chromatone · Mar 12, 2023 · 86fd480 · 86fd480
1 parent 2a06506
commit 86fd480
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/components/beat/control/transport.vue b/components/beat/control/transport.vue
@@ -33,7 +33,7 @@ g.transport(
   g.btn.cursor-pointer(
     transform="translate(0,150)"
     v-if="!tempo.stopped"
-    @click="tempo.stopped = true"
+    @click="tempo.stopped = Date.now()"
     )
       rect.border(
         v-tooltip.left="'Stop'"

diff --git a/content/practice/rhythm/circle/controls.js → content/practice/rhythm/circle/controls.ts b/content/practice/rhythm/circle/controls.js → content/practice/rhythm/circle/controls.ts
@@ -1,7 +1,7 @@
 import { useStorage } from "@vueuse/core";
-import { reactive } from 'vue'
+import { reactive, Ref } from 'vue'
 
-export const loops = useStorage('tempo-circle-loops', [
+export const loops: Ref = useStorage('tempo-circle-loops', [
 	{
 		over: 8,
 		under: 8,

diff --git a/use/tempo.ts b/use/tempo.ts
@@ -147,27 +147,27 @@ export function useTempo() {
       }
       metro.counter++
 
-    }, "8n").start(0);
+    }, "8n").start(0)
 
     useRafFn(() => {
       //@ts-expect-error
-      tempo.position = Transport.position;
-      tempo.ticks = Transport.ticks;
+      tempo.position = Transport.position
+      tempo.ticks = Transport.ticks
       tempo.progress = metro.loop.progress
     })
 
     onKeyStroke(" ", (ev) => {
       const elem = ev.target as HTMLElement
-      if (["TEXTAREA", "INPUT"].includes(elem.nodeName)) return;
+      if (["TEXTAREA", "INPUT"].includes(elem.nodeName)) return
       ev.preventDefault()
-      tempo.playing = !tempo.playing;
+      tempo.playing = !tempo.playing
     });
 
     onKeyStroke("Enter", (ev) => {
       const elem = ev.target as HTMLElement
-      if (["TEXTAREA", "INPUT"].includes(elem.nodeName)) return;
-      ev.preventDefault();
-      tempo.stopped = Date.now();
+      if (["TEXTAREA", "INPUT"].includes(elem.nodeName)) return
+      ev.preventDefault()
+      tempo.stopped = Date.now()
     });
 
   });
@@ -211,6 +211,9 @@ export function useTempo() {
   }
   );
 
+  watch(() => midi.playing, p => tempo.playing = p)
+  watch(() => midi.stopped, s => tempo.stopped = s)
+
   tempo.initialized = true
   return tempo;
 }