A modern web-based harmonium application built with Next.js, React, and Tailwind CSS. Play harmonium using your computer keyboard or connect a MIDI keyboard for a more authentic experience.
- Interactive visual keyboard with white and black keys
- Keyboard mapping for easy playing using computer keys
- Indian classical music notation display
- High-quality harmonium samples
- Web Audio API for low-latency audio playback
- Looping audio sources for sustained notes
- Reverb effects with impulse response
- Volume Control: Adjust overall volume (1-100%)
- Reverb Toggle: Enable/disable reverb effects
- Transpose: Change the root key (-11 to +11 semitones)
- Octave Shift: Change playing octave (0-6)
- Additional Reeds: Add harmonic layers for richer sound
- Connect external MIDI keyboards
- Automatic device detection
- MIDI volume control support
- Multiple device selection
- All settings automatically saved to browser storage
- Restored on page reload
```
Black Keys: 1 2 4 5 7 8 9 - =
White Keys: q w e r t y u i o p [ ] \ \``
- White Keys: ` q w e r t y u i o p [ ] \
- Black Keys: 1 2 4 5 7 8 9 - =
- Each key corresponds to a specific note in the harmonium scale
- Volume: Use the slider or MIDI controller (CC7)
- Transpose: Change the root key to match your preferred scale
- Octave: Shift the entire keyboard up or down by octaves
- Additional Reeds: Add harmonic layers for fuller sound
- Node.js 18+
- npm or yarn
-
Clone or download the project ```bash git clone cd web-harmonium ```
-
Install dependencies ```bash npm install
yarn install ```
-
Run the development server ```bash npm run dev
yarn dev ```
-
Open your browser Navigate to
http://localhost:3000
```bash npm run build npm start ```
The application requires two audio files:
harmonium-kannan-orig.wav- Main harmonium samplereverb.wav- Reverb impulse response
These files should be placed in the public directory.
- Chrome 66+
- Firefox 60+
- Safari 14+
- Edge 79+
- Web Audio API
- ES6+ JavaScript
- Local Storage
- MIDI API (optional, for MIDI keyboard support)
- Frontend: Next.js 14 with React 18
- Styling: Tailwind CSS with shadcn/ui components
- Audio: Web Audio API with AudioContext
- MIDI: Web MIDI API for external keyboard support
- Uses AudioBufferSourceNode for sample playback
- GainNode for volume control
- ConvolverNode for reverb effects
- Real-time pitch shifting using detune property
- Efficient audio node management
- Minimal latency audio playback
- Optimized for real-time performance
-
No Sound
- Check browser audio permissions
- Ensure volume is not muted
- Try clicking on the page first (browser autoplay policy)
-
MIDI Not Working
- Check if your browser supports Web MIDI API
- Ensure MIDI device is connected before loading the page
- Try refreshing the page after connecting MIDI device
-
High Latency
- Close other audio applications
- Try using Chrome for better Web Audio performance
- Reduce browser tab count
- The app may request microphone permissions (for Web Audio API)
- MIDI access permissions will be requested when connecting devices
``` ├── app/ │ ├── page.tsx # Main harmonium component │ ├── layout.tsx # App layout │ └── globals.css # Global styles ├── components/ui/ # shadcn/ui components ├── public/ │ ├── harmonium-kannan-orig.wav │ └── reverb.wav └── README.md ```
- WebHarmonium: Main component with all functionality
- Audio Engine: Web Audio API integration
- MIDI Handler: MIDI device management
- UI Controls: Volume, reverb, transpose controls
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is open source and available under the MIT License.
- Original harmonium sample: Kannan
- Reverb impulse response: Various sources
- Built with Next.js, React, and Tailwind CSS
- UI components from shadcn/ui
For issues and questions:
- Check the troubleshooting section
- Open an issue on the repository
- Ensure your browser supports required web APIs
Enjoy playing the Web Harmonium! 🎵