From c21cf4130e867b5918d9b14a7cbde0119b662dec Mon Sep 17 00:00:00 2001
From: Brandon Keepers <brandon@opensoul.org>
Date: Fri, 26 Apr 2024 15:15:45 -0400
Subject: [PATCH] Allow changing tempo

---
 demo.ts      |  6 +++++-
 src/index.ts | 14 +++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/demo.ts b/demo.ts
index 68fe002..bc20877 100644
--- a/demo.ts
+++ b/demo.ts
@@ -18,7 +18,7 @@ function onBeat(note) {
 }
 
 document.getElementById("enabled")?.addEventListener("change", (e) => {
-  if (e.target?.checked) {
+  if ((e.target as HTMLInputElement)?.checked) {
     metronome = createMetronome({ tempo: Number(tempoEl.value), onBeat })
     metronome.start()
   } else {
@@ -27,3 +27,7 @@ document.getElementById("enabled")?.addEventListener("change", (e) => {
     metronome = undefined
   }
 })
+
+tempoEl.addEventListener("input", () => {
+  metronome?.setTempo(Number(tempoEl.value))
+})
diff --git a/src/index.ts b/src/index.ts
index 5ff38d8..33ef02c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -55,10 +55,18 @@ export function createMetronome(config: MetronomeConfig = {}) {
   let interval: number | undefined;
 
   // Time in seconds that a bar lasts
-  const secondsPerBar = 60 / config.tempo! * config.meter![0]
+  let secondsPerBar: number;
 
   // duration of 16th note in seconds
-  const secondsPerNote = 60 / config.tempo! / 4
+  let secondsPerNote: number;
+
+  function setTempo(tempo: number) {
+    config.tempo = tempo
+    secondsPerBar = 60 / config.tempo! * config.meter![0]
+    secondsPerNote = 60 / config.tempo! / 4
+  }
+
+  setTempo(config.tempo!)
 
   // Returns the next time that the given note can be played. Given synchronized clocks, any metronome
   // playing the same tempo will play the same note of a measure at the same time.
@@ -159,5 +167,5 @@ export function createMetronome(config: MetronomeConfig = {}) {
     requestAnimationFrame(draw);
   }
 
-  return { start, stop }
+  return { start, stop, setTempo }
 }