From 95069f13d908bfd3c0f3b33f8fad7d8464fd192e Mon Sep 17 00:00:00 2001
From: Josh Kingsley <josh@joshkingsley.me>
Date: Wed, 29 Oct 2025 01:54:25 +0200
Subject: feat(web): add dummy tone example

---
 web/package.json                    |  3 ++-
 web/src/components/toolbar/index.ts | 35 ++++++++++++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 6 deletions(-)

(limited to 'web')

diff --git a/web/package.json b/web/package.json
index d845c29..282a138 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,6 +9,7 @@
     "vite": "^7.1.12"
   },
   "dependencies": {
-    "tailwindcss": "^4.1.16"
+    "tailwindcss": "^4.1.16",
+    "tone": "^15.1.22"
   }
 }
diff --git a/web/src/components/toolbar/index.ts b/web/src/components/toolbar/index.ts
index 666114b..1400174 100644
--- a/web/src/components/toolbar/index.ts
+++ b/web/src/components/toolbar/index.ts
@@ -61,11 +61,6 @@ class NotiveToolbarElement extends HTMLElement {
 
   #render() {
     this.append(
-      h.section(
-        h.button({ dataset: { variant: "menu" } }, "File"),
-        h.button({ dataset: { variant: "menu" } }, "Edit"),
-        h.button({ dataset: { variant: "menu" } }, "Format"),
-      ),
       h.section(
         h.button(
           {
@@ -98,8 +93,38 @@ class NotiveToolbarElement extends HTMLElement {
           "+",
         ),
       ),
+      h.section(
+        h.button(
+          {
+            dataset: { variant: "menu" },
+            onclick: () => {
+              this.#play();
+            },
+          },
+          "Play",
+        ),
+      ),
     );
   }
+
+  async #play() {
+    const Tone = await import("tone");
+    await Tone.start();
+    const transport = Tone.getTransport();
+    transport.stop();
+    transport.position = 0;
+    transport.cancel();
+    const synth = new Tone.Synth().toDestination();
+    const seq = new Tone.Sequence(
+      (time, note) => {
+        synth.triggerAttackRelease(note, 0.1, time);
+      },
+      ["C4", "D4", "E4"],
+      "1m",
+    ).start(0);
+    seq.loop = false;
+    transport.start();
+  }
 }
 
 customElements.define("ntv-toolbar", NotiveToolbarElement);
-- 
cgit v1.2.3