Playable Piano

An interactive, responsive Playable Piano component featuring synthesized acoustic Web Audio API sounds, physical keyboard keybindings, volume control slider, and toggleable key label indicators.

Variations

Playable Synthesizer Piano

Interactive playable piano keyboard powered by Web Audio API synthesizers. Play using mouse clicks or typing physical keyboard keys (A-S-D-F-G-H-J-K-L-; and W-E-T-Y-U-O-P).

PassdefaultVolume0.8: sets default master volume level (0 to 1).

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Piano

npx shadcn@latest add @algorize-ui/piano

components/custom/piano.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Piano needs only the cn helper and lucide-react, which the installation guide already put in place.

Features

Discover the interactive capabilities of the Piano component:

Web Audio API Synthesizer: Zero external MP3 asset dependency. Synthesizes real acoustic piano notes using browser-native AudioContext with exponential decay envelopes.
Physical Keyboard Keybindings: Play notes naturally using physical keyboard keys (A, S, D, F, G, H, J, K, L, ; for White keys, and W, E, T, Y, U, O, P for Black keys).
Show/Hide Keys Toggle: Toggle switch to reveal or hide keyboard key labels over piano keys.
Master Volume Slider: Adjust or mute synthesizer volume levels in real-time.
Tactile Key Animations: 3D key press animation with active color highlights and smooth release physics.

Props Reference: Piano

Prop	Type	Default	Description
`defaultVolume`	`number`	`0.8`	Initial master volume level between 0 and 1.
`defaultShowKeys`	`boolean`	`true`	Whether key trigger labels are shown over piano keys.
`className`	`string`	`undefined`	Custom CSS classes for container styling.