Interactive Piano

This visualization creates an interactive piano with playable keys:

Features

• Fully functional virtual piano with white and black keys
• Interactive keys that can be played with mouse or touch
• Keyboard support for playing notes (keys A-S-D-F-G-H-J-K-L-; for white keys, W-E-T-Y-U-O-P for black keys)
• Visual feedback when keys are pressed
• Built-in demo melody that plays a simple scale
• Realistic piano design with 3D effects and shadows
• Audio generated using Web Audio API

Technical Implementation

The visualization demonstrates:

• DOM manipulation to create piano keys dynamically
• CSS gradients and shadows for realistic 3D piano key appearance
• Web Audio API for generating musical tones with proper frequencies
• Event handling for mouse, touch, and keyboard inputs
• Visual feedback with CSS transitions
• Audio synthesis with gain control for natural sound decay
• Responsive design that works on different screen sizes

The piano provides an interactive musical experience while demonstrating various front-end techniques for creating realistic instrument interfaces.