diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/package.json | 3 | ||||
| -rw-r--r-- | web/src/components/toolbar/index.ts | 35 |
2 files changed, 32 insertions, 6 deletions
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); |