KeyWave Piano is a modern, interactive browser-based piano built using HTML, CSS, and JavaScript. It allows users to play music using their keyboard or mouse, while also offering guided learning, quizzes, and multiple sound controls.
- Play notes using keyboard keys or mouse clicks
- Smooth and responsive sound playback
- Visual key animations for better feedback
Interactive learning system with 3 modes:
-
Learn popular songs like:
- Twinkle Twinkle โญ
- Happy Birthday ๐
- Ode to Joy ๐ผ
-
Step-by-step note guidance
-
Auto-play option for demonstration
-
Progress tracking system
-
Displays:
- Note name
- Keyboard key
- Finger hint
- Frequency (Hz)
-
Quick reference chart for octave mapping
-
Test your musical skills
-
Score + streak tracking ๐ฅ
-
Difficulty levels:
- Easy
- Medium
- Hard
-
Replay note option
-
Octave Control โ Change pitch range
-
Volume Control โ Adjust sound level
-
Waveform Selection:
- Sine
- Triangle
- Square
- Sawtooth
-
Sustain Control โ Adjust note duration
- Clean modern interface
- Animated glowing effects
- Responsive design
- Real-time visual feedback
| Note | Key |
|---|---|
| C4 | A |
| D4 | S |
| E4 | D |
| F4 | F |
| G4 | G |
| A4 | H |
| B4 | J |
Black Keys:
| Note | Key |
|---|---|
| C#4 | W |
| D#4 | E |
| F#4 | T |
| G#4 | Y |
| A#4 | U |
KeyWave-Piano/
โ
โโโ index.html
โโโ style.css
โโโ script.js
- HTML5
- CSS3 (Animations + Layout)
- JavaScript (DOM + Audio Logic)
- Download or clone the repository
- Open
index.htmlin your browser - Start playing ๐น
- Recording & playback system
- Custom sound packs (piano, drums, synth)
- Mobile gesture optimization
- Save user progress
Built by Anoop A
This project is designed to combine music, interaction, and learning into one smooth experience. If you like it, consider improving it further or adding new features ๐