feat(web): add dummy tone example

3 files changed, 72 insertions, 6 deletions

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f72d83..1db75b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       tailwindcss:
         specifier: ^4.1.16
         version: 4.1.16
+      tone:
+        specifier: ^15.1.22
+        version: 15.1.22
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.16
@@ -39,6 +42,10 @@ importers:
 
 packages:
 
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
   '@esbuild/aix-ppc64@0.25.11':
     resolution: {integrity: sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==}
     engines: {node: '>=18'}
@@ -418,6 +425,10 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  automation-events@7.1.13:
+    resolution: {integrity: sha512-1Hay5TQPzxsskSqPTH3YXyzE9Iirz82zZDse2vr3+kOR7Sc7om17qIEPsESchlNX0EgKxANwR40i2g/O3GM1Tw==}
+    engines: {node: '>=18.2.0'}
+
   css-declaration-sorter@7.3.0:
     resolution: {integrity: sha512-LQF6N/3vkAMYF4xoHLJfG718HRJh34Z8BnNhd6bosOMIVjMlhuZK5++oZa3uYAgrI5+7x2o27gUqTR2U/KjUOQ==}
     engines: {node: ^14 || ^16 || >=18}
@@ -615,6 +626,9 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  standardized-audio-context@25.3.77:
+    resolution: {integrity: sha512-Ki9zNz6pKcC5Pi+QPjPyVsD9GwJIJWgryji0XL9cAJXMGyn+dPOf6Qik1AHei0+UNVcc4BOCa0hWLBzlwqsW/A==}
+
   synckit@0.11.11:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -630,6 +644,12 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tone@15.1.22:
+    resolution: {integrity: sha512-TCScAGD4sLsama5DjvTUXlLDXSqPealhL64nsdV1hhr6frPWve0DeSo63AKnSJwgfg55fhvxj0iPPRwPN5o0ag==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   turbo-darwin-64@2.5.8:
     resolution: {integrity: sha512-Dh5bCACiHO8rUXZLpKw+m3FiHtAp2CkanSyJre+SInEvEr5kIxjGvCK/8MFX8SFRjQuhjtvpIvYYZJB4AGCxNQ==}
     cpu: [x64]
@@ -711,6 +731,8 @@ packages:
 
 snapshots:
 
+  '@babel/runtime@7.28.4': {}
+
   '@esbuild/aix-ppc64@0.25.11':
     optional: true
 
@@ -946,6 +968,11 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  automation-events@7.1.13:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      tslib: 2.8.1
+
   css-declaration-sorter@7.3.0(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
@@ -1140,6 +1167,12 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  standardized-audio-context@25.3.77:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      automation-events: 7.1.13
+      tslib: 2.8.1
+
   synckit@0.11.11:
     dependencies:
       '@pkgr/core': 0.2.9
@@ -1153,6 +1186,13 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tone@15.1.22:
+    dependencies:
+      standardized-audio-context: 25.3.77
+      tslib: 2.8.1
+
+  tslib@2.8.1: {}
+
   turbo-darwin-64@2.5.8:
     optional: true
 
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
@@ -62,11 +62,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(
           {
             dataset: { variant: "icon" },
@@ -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);