A Modern Digital Indian Classical Music Experience
Experience the magic of the traditional Indian harmonium in your browser! A responsive, feature-rich implementation with authentic sounds, modern UI, and mobile-first design.
- 🎶 High-quality audio samples – professional harmonium recordings
- 🎼 Dual notation system – Indian Sargam (Sa Re Ga Ma) + Western notes
- ⚡ Real-time audio processing – ultra-low latency via Web Audio API
- 🎹 Triple notation – keyboard shortcuts, Sargam, and Western notes
- 🌟 Animated loader – harmonium-themed loading experience
- 🧭 Compact header with logo, status badges & theme toggle
- 🎨 Music-inspired gradients & glassmorphism throughout
- 📱 Fully responsive – desktop, tablet & mobile
- ✨ Smooth animations and interactive hover effects
- 📝 Interactive guide system – with local storage memory
- 🖥️ Non-scrollable layout – perfect desktop fit
- 📏 Authentic proportions for realistic digital feel
- 🪕 Clean key design – focus on readability and playing
- 🎼 Triple notation system for easy learning
- 🔊 Gradient volume control with live feedback
- 🌌 Concert-hall quality reverb with instant toggle
- 🎵 Smart transpose system with semitone counter
- 🎚️ Full 7-octave range (0–6) with register descriptions
- 🎶 Reed layering system for rich harmonium sound
- 🎹 Full MIDI support – device selection, velocity sensitivity
- 📖 Popup guide on first visit + always accessible button
- 🎼 Detailed Sargam system + Western scale theory
- 🎶 Popular Ragas guide (Yaman, Bhairav, Kafi, Malkauns)
- 🎹 Advanced techniques – Meend, Gamak, Kan, Andolan
- 🎛️ MIDI & setup tips for learners and professionals
- Node.js 18+
- Browser with Web Audio API
- (Optional) MIDI keyboard
# 1. Clone
git clone https://github.com/mrakbari91/web-harmonium.git
cd web-harmonium
# 2. Install
npm install
# or yarn install
# or bun install
# or pnpm install
# 3. Start dev server
npm run dev
# or yarn dev
# or bun run dev
# or pnpm devOpen 👉 http://localhost:3000
npm run build
npm start
# bun run build
# bun run startBlack Keys: 1 2 4 5 7 8 9 - =
White Keys: ` q w e r t y u i o p [ ] \
- Sa (S) → Foundation / Tonic
- Re (R) → Movement / Emotion
- Ga (G) → Harmonic Color
- Ma (M) → Bridge to upper tetrachord
- Pa (P) → Dominant & stable
- Dha (D) → Subdominant depth
- Ni (N) → Leading tone → Sa
├── app/
│ ├── page.tsx # Main harmonium interface
│ ├── layout.tsx # App layout & theme
│ └── globals.css # Global styles & animations
├── components/
│ ├── ui/ # Shadcn UI components
│ └── theme-provider.tsx # Theme management
├── public/
│ ├── harmonium.wav # HQ harmonium sample
│ └── reverb.wav # Convolution reverb sample
└── README.md # Documentation- ⚡ Next.js 15 (App Router + server components)
- 🟦 TypeScript (strict mode)
- 🎨 Tailwind CSS (animations, gradients, responsive UI)
- 🎵 Web Audio API – low-latency sound engine
- 🎹 WebMIDI API – full MIDI controller support
✅ Chrome 66+ ✅ Firefox 60+ ✅ Safari 14+ ✅ Edge 79+
- 🎶 Traditional musicians preserving harmonium art
- 🎛️ Audio engineers for HQ sample recordings
- 🌐 Open-source community for tools & libraries
- 👨🏫 Music teachers & cultural preservationists
If you enjoy Web Harmonium: ⭐ Star the repo • 🐛 Report bugs • 💡 Suggest features • 🔄 Share with friends • 💻 Contribute code
Dhruv Akbari Full Stack Developer & Music Tech Enthusiast
🌍 GitHub • Codepen • LinkedIn • Instagram • Facebook • X
💌 Email: dhruvakbari303@gmail.com
© 2025 Web Harmonium Bridging Tradition with Technology, Built with ❤️ for Music Lovers
