feat(web): add dummy tone example

1 files changed, 30 insertions, 5 deletions

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);