Skip to content

README.md

Latest commit

 

History

History
153 lines (104 loc) · 2.4 KB

README.md

File metadata and controls

153 lines (104 loc) · 2.4 KB

🎹 KeyWave Piano

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.

🚀 Features

🎹 Real-Time Piano

  • Play notes using keyboard keys or mouse clicks
  • Smooth and responsive sound playback
  • Visual key animations for better feedback

🎓 Learn Mode

Interactive learning system with 3 modes:

🎵 Song Mode

  • Learn popular songs like:

    • Twinkle Twinkle ⭐
    • Happy Birthday 🎂
    • Ode to Joy 🎼

  • Step-by-step note guidance

  • Auto-play option for demonstration

  • Progress tracking system

📖 Free Learn Mode

  • Displays:

    • Note name
    • Keyboard key
    • Finger hint
    • Frequency (Hz)

  • Quick reference chart for octave mapping

❓ Quiz Mode

  • Test your musical skills

  • Score + streak tracking 🔥

  • Difficulty levels:

    • Easy
    • Medium
    • Hard

  • Replay note option

🎛️ Controls

  • Octave Control → Change pitch range

  • Volume Control → Adjust sound level

  • Waveform Selection:

    • Sine
    • Triangle
    • Square
    • Sawtooth

  • Sustain Control → Adjust note duration

🎨 UI Highlights

  • Clean modern interface
  • Animated glowing effects
  • Responsive design
  • Real-time visual feedback

⌨️ Keyboard Mapping (Octave 4)

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

📁 Project Structure

KeyWave-Piano/
│
├── index.html
├── style.css
├── script.js

🛠️ Technologies Used

  • HTML5
  • CSS3 (Animations + Layout)
  • JavaScript (DOM + Audio Logic)

⚡ How to Run

  1. Download or clone the repository
  2. Open index.html in your browser
  3. Start playing 🎹

💡 Future Improvements

  • Recording & playback system
  • Custom sound packs (piano, drums, synth)
  • Mobile gesture optimization
  • Save user progress

🧠 Author

Built by Anoop A

⭐ Final Note

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 🚀