diff options
| -rw-r--r-- | pnpm-lock.yaml | 40 | ||||
| -rw-r--r-- | web/package.json | 3 | ||||
| -rw-r--r-- | web/src/components/toolbar/index.ts | 35 |
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); |