🎹✨ EchoKeys – Virtual Piano Experience

A dynamic, neon-styled, glow-animated virtual piano you can play using your keyboard.

---

🔗 Live Preview

👉 Play Now

---

🌟 Features

• 🎧 40+ interactive sound keys
• ⚡ Real-time keyboard + mouse sound trigger
• 🎥 Full-screen video background
• 🌈 Neon glow animations for every key press
• 🧊 Glass-blur transparent key UI
• 🧠 Dynamically generated piano keys (no manual HTML)
• 🚀 Ultra-smooth performance (no libraries used)

---

🎥 UI Preview

---

🛠️ Tech Stack

• HTML5
• CSS3 / SCSS
• JavaScript (Vanilla)
• MP3 Audio Engine

---

🧠 How It Works

🎼 Keyboard → Sound Mapping

Each keyboard key (A–Z, 0–9) mapped to mp3 files:

KeyA → ./audio/28.mp3
KeyB → ./audio/29.mp3
KeyC → ./audio/30.mp3
...
Digit0 → ./audio/60.mp3

⚡ Interaction Flow

keypress → detect key → load audio → play() → glow animation → reset

🎹 Auto-Generated Piano

Dynamic key creation:

keys.forEach(code => {
    let div = document.createElement("div");
    div.className = "key";
    piano.appendChild(div);
});

---

📂 Folder Structure

📦 DOM-Virtual-Piano
 ┣ 📂 audio/
 ┃ ┗ 28.mp3 – 60.mp3
 ┣ 📜 index.html
 ┣ 📜 style.css
 ┣ 📜 style.scss
 ┗ 📜 script.js

---

▶️ Run Locally

Open this file:

index.html

No installation required.

---

🤝 Contributing

PRs are welcome.

Improve animations, add new sound packs, add dark mode, or convert to PWA.

---

👨‍💻 Author

Vikas Kumar

🔗 LinkedIn

🔗 GitHub Profile

---

📜 License

Released under the MIT License.

---

⭐ If you like this project, give it a star on GitHub!

---