A professional-grade virtual piano application built with HTML5, CSS3, and JavaScript. Experience realistic piano sounds with multiple harmonics, octave-dependent characteristics, and a beautiful modern interface.
- Multiple Harmonics: Each note uses 5 oscillators (fundamental, 2nd, 3rd, 5th harmonics, plus slight detuning)
- Octave-Dependent Characteristics: Lower notes emphasize fundamental frequency, higher notes have more prominent harmonics
- Dynamic Audio Processing: Low-pass filtering and compression for authentic piano sound
- Natural Envelopes: Attack, decay, and sustain times vary by octave to match real piano behavior
- Keyboard Input: Full keyboard mapping for white and black keys
- Mouse/Touch Support: Click or tap piano keys directly
- Octave Shifting: Change octave range with buttons or arrow keys
- Volume Control: Real-time volume adjustment with visual feedback
- Responsive Design: Works seamlessly on desktop and mobile devices
- Professional Design: Gradient backgrounds and modern typography
- Realistic Piano Keys: 3D-styled keys with hover and press animations
- Smart Notifications: Non-intrusive feedback for user actions
- Comprehensive Instructions: Clear key mapping guide and controls
- Simple Method: Open
index.htmldirectly in your web browser - With Java Server (optional):
Then open
javac PianoServer.java java PianoServer
http://localhost:8080in your browser
- Modern web browser with Web Audio API support
- Chrome, Firefox, Safari, or Edge (latest versions recommended)
- JavaScript enabled
| Keys | Notes |
|---|---|
Z X C V B N M |
C3 - B3 |
, . / Q W E R |
C4 - B4 |
T Y U I O P |
C5 - G5 |
| Keys | Notes |
|---|---|
S D G H J |
C#3 - A#3 |
L 1 3 4 5 |
C#4 - A#4 |
7 8 0 |
C#5 - F#5 |
- Arrow Keys:
↑/↓to change octave - Volume Slider: Adjust sound level (0-100%)
- Octave Buttons: Click
Octave +/Octave -for octave control
Oscillators (5 per note) → Individual Gains → Master Gain →
Low-pass Filter → Dynamic Compressor → Audio Output
- Fundamental Frequency: Triangle wave for rich base tone
- Harmonics: Sine waves at 2x, 3x, 5x fundamental frequency
- Detuning: Slight frequency offset for natural richness
- Envelope Shaping: ADSR envelope with octave-specific timing
piano-java-html-v2/
├── index.html # Main HTML file with UI
├── piano.js # Core piano logic and audio processing
├── PianoServer.java # Optional Java HTTP server
├── run.bat # Windows batch file to run server
└── README.md # This documentation
The piano covers 3 octaves from C3 to G5:
- Octave 3: C3 - B3 (12 notes)
- Octave 4: C4 - B4 (12 notes)
- Octave 5: C5 - G5 (7 notes)
Total: 31 keys (19 white keys, 12 black keys)
Modify the getHarmonicLevels() and getPianoEnvelope() methods in piano.js to customize:
- Harmonic content ratios
- Attack/decay/sustain timings
- Octave-specific sound characteristics
Edit the CSS in index.html to customize:
- Color schemes and gradients
- Key dimensions and spacing
- Animation effects and transitions
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✅ Full | Recommended |
| Firefox | ✅ Full | Excellent performance |
| Safari | ✅ Full | May require user interaction to start audio |
| Edge | ✅ Full | Good performance |
| Mobile Browsers | ✅ Partial | Touch support, may have audio latency |
- Check browser support: Ensure Web Audio API is supported
- User interaction required: Click anywhere on the page first
- Volume settings: Check both app volume and system volume
- Browser permissions: Allow audio playback if prompted
- Close other audio applications
- Use latest browser version
- Reduce number of simultaneous notes
- Lower volume if experiencing distortion
This project welcomes contributions! Areas for improvement:
- Additional sound synthesis methods
- More octave ranges
- Recording/playback functionality
- MIDI input support
- Additional instrument sounds
This project is open source and available under the MIT License.
- Inspired by real piano acoustics and Web Audio API capabilities
- Built with modern web technologies for optimal performance
- Designed for both casual users and music enthusiasts
Enjoy playing! 🎵
For questions or suggestions, please open an issue or submit a pull request.