Piano synth · gemini-3.1-flash-lite

Output generated Cost / run $0.0047 Runtime 12.1s

Prompt for this run

Using the pre-provided tone.min.js (global Tone), build a playable piano keyboard controlled by mouse and computer keys that synthesizes notes with an ADSR envelope and visual key feedback.

⛨ sandboxed Open in new tab ↗

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modelgemini-3.1-flash-lite

vendorGoogle

harnesspi-agent

generated2026-07-22

METRICS

runtime12.1s

tokens in6.4k

tokens out2.1k

cached0

cost / run$0.0047

Transcript · 6 messages

user

Using the pre-provided tone.min.js (global Tone), build a playable piano keyboard controlled by mouse and computer keys that synthesizes notes with an ADSR envelope and visual key feedback.

assistant

thinking

**Building Interactive Piano**

I'm focusing on integrating `Tone.js` directly within a single HTML file. My current work involves setting up the synthesizer and ADSR envelope, aiming for immediate visual feedback tied to key presses.

**Developing Piano Keys**

I'm currently structuring the HTML for the piano keys and styling them with CSS using Flexbox. The JavaScript is being developed to handle user input, mapping keyboard and mouse events to trigger notes via `Tone.PolySynth`. My aim is to implement audio context resumption after a user gesture and define the initial set of notes.

→ bash {"command":"ls -l tone.min.js"}

toolResult

-rw-r--r-- 1 node node 349169 Jul 22 17:51 tone.min.js

assistant

→ write index.html (3629 bytes)

toolResult

Successfully wrote 3629 bytes to index.html

assistant

This self-contained `index.html` file uses the provided `tone.min.js` to create a playable piano interface. It features: * **Audio Synthesis**: Uses `Tone.PolySynth` with a triangle oscillator and defined ADSR (Attack, Decay, Sustain, Release) settings. * **Keyboard Control**: Maps computer keyboard keys (A, W, S, E, D, F, T, G, Y, H, U, J, K) to specific notes starting from C4. * **Mouse Interaction**: Click and drag on the on-screen keys to play notes. * **Visual Feedback**: Keys highlight when pressed. * **Browser Readiness**: Includes a "Start Audio" button to comply with modern browser policies regarding audio context initialization. You can now open `index.html` in your browser to play.