Interactive Rectangle Piano

This project creates a simple interactive piano using HTML and JavaScript. The piano features:

• 14 white keys and black keys arranged in a standard piano pattern
• Click interaction that produces different pitches
• Simple UI with a responsive design

How to Use

1. Click on any key (white or black) to hear a sound
2. The piano follows the standard musical keyboard layout
3. Keys have visual feedback when pressed

How It Works

The piano is built entirely with HTML and JavaScript:

• White keys are created as white rectangles with borders
• Black keys are positioned on top of white keys
• Sound is generated using the Web Audio API
• Each key is mapped to a specific note frequency

Implementation Details

The code uses:

• CSS for styling and positioning the piano keys
• Event listeners for interaction
• Web Audio API for sound generation
• Responsive design principles

This example demonstrates DOM manipulation, event handling, and basic audio synthesis in a web application.