A browser-based synthesizer and melody generator with a retro synthwave aesthetic. Generate melodic patterns, customize sounds with subtractive synthesis, and output via the built-in synth engine or external MIDI devices.
- 10 Melody Styles: Arpeggiate, Sequence, Jumping, Flowing, Staccato, Legato, Wandering, Pulsing, Climbing, and Random
- 6 Rhythm Patterns: Straight 16ths, Syncopated, Dotted, Triplet Feel, Sparse, and Dense
- 10 Musical Scales: Minor, Major, Harmonic Minor, Dorian, Phrygian, Lydian, Mixolydian, Pentatonic Minor, Pentatonic Major, and Blues
- All 12 Root Notes: C through B with flat notation
- Octave Selection: Octaves 2-6
- 16 Built-in Progressions: Classic minor and major progressions
- Scale-Aware: Progressions automatically filter to match selected scale
- Random Mode: Generates musically coherent random progressions
- Visual Feedback: Chord names displayed on piano roll
- Chord-Following Bass: Whole notes on chord roots when using chord mode
- Independent Basslines: Stepwise motion with chord tone gravity in scale mode
- Separate Channel Routing: Route bass to different MIDI channels (2-10) or same as melody
Full subtractive synthesis engine with:
| Section | Parameters |
|---|---|
| 3 Oscillators | Waveform (Sine, Triangle, Saw, Square), Octave (16', 8', 4', 2', 1'), Detune (±50 cents), Level |
| Filter | Cutoff frequency, Resonance (Q), Envelope amount, Keyboard tracking |
| Amp Envelope | Attack, Decay, Sustain, Release |
| Filter Envelope | Attack, Decay, Sustain, Release |
| LFO | Rate, Waveform, Destination (Filter/Pitch), Amount |
| Reverb | Wet mix, Decay time |
| Delay | Time, Feedback, Wet mix |
| Master | Volume |
- Dual Sound Sources: Independent routing for melody and bass
- Internal Synth: Built-in Web Audio synthesizer (works without any external hardware)
- MIDI Output: Send to external synths, DAWs, or virtual instruments
- Mix & Match: Use internal synth for melody and MIDI for bass, or any combination
- Full-Width Display: Dynamic sizing to fill available space
- Scale Highlighting: In-scale notes visually indicated
- Chord Labels: Current chord displayed above each bar
- Color-Coded Notes: Pink for melody, green for bass
- Real-Time Playhead: Follows playback with auto-scroll
- Active Note Highlighting: Notes light up during playback
- Modern web browser (Chrome, Firefox, Edge, Safari)
- No installation required!
- Open
index.htmlin your browser - Click ⟳ GENERATE to create a melody
- Playback starts automatically
- Adjust parameters and generate again!
The app works immediately with the built-in synthesizer—no MIDI device needed.
- Ensure INT is selected for Melody and/or Bass
- Click the ✎ button to open the Sound Design editor
- Adjust oscillators, filter, envelopes, and effects
- Use the test keyboard to preview sounds (mouse or computer keyboard A-K, Z/X for octave)
- Click DONE to save changes
- Connect a MIDI device or virtual MIDI port
- The status dot will turn green when connected
- Select your device from the dropdown
- Click MIDI for Melody and/or Bass routing
- Select MIDI channel (1-16 for melody, 2-10 for bass)
| Control | Description |
|---|---|
| KEY | Root note of the scale (C, Db, D, etc.) |
| OCT | Base octave for melody (2-6) |
| SCALE | Musical scale/mode |
| STYLE | Melody generation algorithm |
| RHYTHM | Rhythmic pattern |
| Control | Description |
|---|---|
| CHORDS | Toggle chord progression mode |
| Progression | Select chord progression (when enabled) |
| BASS | Toggle bass note generation |
| Bass Channel | MIDI channel for bass (Same, or 2-10) |
| MELODY | INT/MIDI routing + Edit button |
| BASS OUT | INT/MIDI routing + Edit button |
| BPM | Tempo (60-200) |
| ⟳ | Generate new melody |
| ▶ | Replay current melody |
| ■ | Stop playback |
| Loop | Toggle looping |
| Control | Description |
|---|---|
| Status Dot | Green = connected, Red = disconnected |
| Device | Select MIDI output device |
| CH | MIDI channel for melody (1-16) |
Access by clicking the ✎ button next to MELODY or BASS OUT.
- Enable: Toggle oscillator on/off
- Wave: Sine, Triangle, Saw, Square
- Octave: 16' (-2), 8' (-1), 4' (0), 2' (+1), 1' (+2)
- Detune: Fine-tune ±50 cents
- Level: Mix volume 0-100%
- Cutoff: Low-pass filter frequency (20-20,000 Hz)
- Resonance: Filter Q/emphasis (0.1-20)
- Env Amt: How much the envelope affects cutoff
- Key Track: Higher notes = brighter sound (0-1)
- A (Attack): Time to reach peak (1ms - 2s)
- D (Decay): Time to fall to sustain level (1ms - 2s)
- S (Sustain): Level while key held (0-100%)
- R (Release): Time to silence after release (10ms - 3s)
- Rate: Speed of modulation (0.1-20 Hz)
- Wave: Sine, Triangle, Square, Saw
- Dest: Target parameter (Filter or Pitch)
- Amount: Modulation depth (0-100)
- Reverb: Wet mix, Decay time
- Delay: Time, Feedback, Wet mix
- Mouse: Click keys to play
- Computer Keyboard: A-K keys play notes
- Z/X: Octave down/up
| Style | Description |
|---|---|
| Arpeggiate | Broken chord patterns, cycling through scale tones |
| Sequence | Repeating melodic motifs transposed through the scale |
| Jumping | Large interval leaps for dramatic effect |
| Flowing | Smooth, connected phrases with stepwise motion |
| Staccato | Short, detached notes with rests |
| Legato | Long, sustained notes that flow together |
| Wandering | Free-form exploration of the scale |
| Pulsing | Rhythmic repetition on single notes |
| Climbing | Generally ascending melodic motion |
| Random | Unpredictable note selection |
- i - iv - V - i (Classic minor)
- i - VI - III - VII (Dramatic)
- i - VII - VI - VII (Synthwave staple)
- i - iv - VII - III (Dark)
- i - III - VII - VI (Uplifting minor)
- i - v - VI - IV (Emotional)
- I - IV - V - I (Classic major)
- I - V - vi - IV (Pop progression)
- I - vi - IV - V (50s progression)
- I - IV - vi - V (Uplifting)
- I - ii - V - I (Jazz influenced)
- vi - IV - I - V (Axis progression)
- I - IV - V - IV (Pentatonic-friendly)
- Random (algorithmically generated)
synthwave-melodizer/
├── index.html # Main HTML structure
├── styles.css # All styling including sound editor
├── README.md # This file
└── js/
├── config.js # Constants, scales, chord definitions
├── midi.js # Web MIDI API handler
├── synth.js # Web Audio synthesizer engine
├── piano-roll.js # Visual piano roll display
├── generator.js # Melody generation algorithms
├── playback.js # Sequencer and playback control
├── sound-editor.js # Synth patch editor UI
└── app.js # Main application logic
- Web Audio API: Internal synthesizer, effects processing
- Web MIDI API: External device communication
- Vanilla JavaScript: No frameworks or dependencies
- CSS3: Animations, gradients, glassmorphism effects
- ✅ Chrome 43+ (full support)
- ✅ Firefox 108+ (full support)
- ✅ Edge 79+ (full support)
- ✅ Safari 14+ (Web Audio only, no MIDI)
- ❌ Internet Explorer (not supported)
Oscillators → Oscillator Gains → Amp Envelope → Filter → Voice Output
↓
Master Gain
↙ ↓ ↘
Reverb Dry Delay
↘ ↓ ↙
Destination
-
Quick Sound Design: Start with a preset-like setup—two detuned saws for classic synthwave leads
-
Fat Bass: Enable OSC 3 at 16' (two octaves down), use square wave, lower the filter cutoff
-
Plucky Sounds: Short attack, short decay, low sustain, moderate release
-
Pad Sounds: Long attack, long release, add reverb and delay
-
Chord + Bass Combo: Enable both for instant full arrangements
-
Tempo Sync Delay: Set delay time to match tempo (e.g., 300ms at 100 BPM for dotted eighth)
-
Layer with MIDI: Use internal synth for one part, MIDI out to a DAW/synth for the other
MIT License - Feel free to use, modify, and distribute.
- Inspired by the sounds of 80s synthwave and retrowave music
- Built with modern Web APIs for maximum compatibility
- Designed for musicians, producers, and synth enthusiasts
Made with 💜 and lots of neon