A browser-based musical arpeggiator with real-time synthesis, effects, and recording capabilities.
Web Arpeggiator is an interactive music tool that generates flowing musical patterns (arpeggios) from note sequences you provide. Combine it with customizable synthesizers, professional effects, and multiple pattern directions to create evolving soundscapes—all in your browser. It ships as an installable PWA with offline shell caching and browser-backed preset storage.
Try it now: Open index.html in any modern web browser.
- Multiple Synth Types: Basic (Sine, Square, Sawtooth, Triangle), FM (Frequency Modulation), AM (Amplitude Modulation)
- Envelope Control: ADSR (Attack, Decay, Sustain, Release) on all synths
- Advanced Parameters: Harmonicity, modulation index, duty cycle for waveform shaping
- 11 Pattern Directions: Up, Down, Up-Down, Down-Up, Random, Octave Cycle, Random Walk, and more
- Configurable Notes: Define any note sequence (e.g., "C4 E4 G4")
- Octave Control: Shift by -3 to +3 octaves or expand across 1-5 octaves
- Tempo Control: 40-240 BPM with swing adjustment
- Note Intervals: 64th notes through 2nd notes (1/64 to 2 bars)
- Filter: Lowpass filter with cutoff (100-10,000 Hz) and resonance
- Delay: Feedback delay synced to the beat
- Reverb: Room reverb with adjustable mix
- Limiter: Master limiter to prevent clipping
- Scale Quantization: Snap notes to scales (Major, Minor, Blues, Chromatic, etc.)
- Virtual Keyboard: Interactive two-octave piano interface
- Real-Time Visualizer: Waveform display during playback
- Preset System: Save and load complete configurations, with optional browser persistence for offline use
- Randomize Notes: Generate musically coherent, scale-quantized note sequences with a single click
- Installable: Add the app to your desktop or home screen
- Offline Shell: The app shell and curated assets are cached for offline launch
- Editable Cache List: Cached assets are defined in
js/asset-manifest.jsfor easy updates during development
- Real-Time Recording: Capture your performance with parameter changes
- Perfect Loop Export: Render exact loops offline (1-100 loops)
- Dual Format Export: WAV (lossless) and MP3 (compressed)
- Timestamped Files: Automatic naming for organized exports
- Modern web browser with Web Audio API support (Chrome, Firefox, Safari, Edge)
- JavaScript enabled
- User gesture required to start audio (click "Start Audio" button)
- Open the app: Double-click
index.htmlor open it in your browser - Initialize audio: Click "Start Audio" (required for browser autoplay policy)
- Enter notes: Type notes in the "Notes" field (e.g.,
C4 E4 G4) - Play: Click the play button to start the arpeggiator
- Adjust: Change BPM, pattern direction, synth type, and effects in real-time
1. Select a Synth Type (Basic Synth, FM Synth, AM Synth)
2. Enter Notes (space-separated, e.g., "C4 E4 G4 B4")
3. Choose Pattern Direction
4. Set BPM and Note Interval
5. Press Play
6. Adjust effects and parameters in real-time
7. Record or export your creation
Notes follow standard musical notation:
- Pitch: C, C#/Db, D, D#/Eb, E, F, F#/Gb, G, G#/Ab, A, A#/Bb, B
- Octave: 0-8 (middle C = C4)
- Examples:
C4,D#5,Ab3
Use spaces to separate multiple notes: C4 E4 G4
| Direction | Behavior |
|---|---|
| Up | Ascending order |
| Down | Descending order |
| Up-Down | Up then down (skip endpoint) |
| Down-Up | Down then up (skip endpoint) |
| Up-Down (Repeated) | Up then down (include endpoint) |
| Down-Up (Repeated) | Down then up (include endpoint) |
| Random | Random selection each step |
| Octave Cycle | Each note across 3 octaves, ascending |
| Octave Cycle Reverse | Each note across 3 octaves, descending |
| Octave Cycle Ping-Pong | Octave cycle with reversal |
| Random Walk | Constrained random (adjacent notes) |
For detailed pattern descriptions, see Pattern Directions Guide.
- Records live audio during playback
- Changes to parameters are captured in real-time
- Use on HTTPS for best browser compatibility
- Falls back to
Tone.Recorderon HTTP or non-HTTPS contexts
- Renders loops offline without real-time variations
- Produces perfectly quantized audio
- Supports 1-100 loop repetitions
- Best for creating clean, production-ready audio
- WAV: Lossless 16-bit PCM (larger file size, highest quality)
- MP3: Compressed 128kbps (smaller file size, suitable for web)
Save and load your complete setup:
- Configure all parameters (synth, effects, pattern, etc.)
- Click "Save Preset"
- A JSON file downloads with auto-generated timestamp
- Click "Load Preset"
- Select a saved JSON file
- All settings restore instantly
- Click "Load Saved Preset"
- The most recent preset saved in the browser is restored
- Use this when you want to keep working without re-importing a file
Presets store:
- Synth type and waveform selection
- ADSR envelope and all synthesis parameters
- Transport settings (BPM, swing)
- Pattern configuration
- Scale quantization settings
- Effects parameters (filter, delay, reverb)
Saving a preset also keeps a copy in browser storage so it can be restored offline later.
Snap all input notes to a musical scale:
- Enable Scale Quantization: Toggle the checkbox
- Select Root Note: Choose the tonal center (C, D, E, F, G, A, B, etc.)
- Select Scale Type: Major, Minor, Harmonic Minor, Dorian, Blues, Chromatic, etc.
- Input Notes: Any notes you enter will snap to the nearest scale degree
Example: With C Major selected, the note "C#4" becomes "D4"
- Tone.js (v14.8.49): Web Audio API framework for synthesis and effects
- Tonal.js (v6.4.2): Music theory library for scale operations
- LameJS (v1.2.1): Client-side MP3 encoding
- Tailwind CSS: Utility-first CSS styling
- AGENTS.md: Detailed architecture, development guide, and technical reference
- Pattern Directions Guide: Visual and descriptive guide to all 11 pattern types
- Tone.js Transport Docs: Reference for timing and synchronization
- Changes Log: Development history and improvements
| Browser | Status |
|---|---|
| Chrome/Chromium | ✅ Full support |
| Firefox | ✅ Full support |
| Safari | ✅ Full support |
| Edge | ✅ Full support |
- HTTPS: Full functionality with
MediaRecorderfor real-time recording - HTTP/Canvas: Real-time recording uses
Tone.Recorderfallback; offline export works everywhere
- Touch events supported on all controls
- Responsive design adapts to smaller screens
- Keyboard stacks vertically on screens < 768px
- Play/Stop: Use the Play/Stop button (no keyboard shortcut currently assigned)
- Virtual Piano: Click keys to play notes during performance
- Start with 3-4 notes in your sequence
- Try the "Octave Cycle" pattern to hear notes across multiple octaves
- Use "Random Walk" for less predictable but still musical progressions
- Combine octave shift with pattern direction for variations
- Set a root note and scale to constrain notes to musical keys
- Blues scale works great for expressive, bent-note sounds
- Switch scales in real-time while playing
- Start with light reverb (0.2-0.3 mix) for spaciousness
- Add delay (0.3-0.5 mix) for rhythmic interest synced to tempo
- Use filter cutoff to shape the overall tone
- Use real-time recording for performance captures
- Use offline export for clean, loopable audio
- Record multiple takes and compare MP3 and WAV exports
- MP3 Encoding: Client-side encoding is CPU-intensive; larger exports may take time
- Recording Length: Limited by available browser memory
- Pattern Complexity: Patterns are predefined; custom patterns require code modification
- Click "Start Audio" button first (browser autoplay policy)
- Check system volume
- Verify Web Audio API support in your browser
- On Safari iOS: Ensure the browser is not in silent mode
- HTTPS contexts use
MediaRecorder(most reliable) - HTTP contexts fall back to
Tone.Recorder(still works) - If browser denies permission, check privacy settings
- Ensure the JSON file is a valid preset (from "Save Preset" function)
- Check browser console for error messages
- Try saving a new preset and loading it as a test
- Reduce number of active voices or simplify pattern
- Lower filter resonance (Q) value
- Check system CPU usage
When modifying the codebase:
- Maintain the single-file architecture (all code in HTML file)
- Test audio on both HTTPS and HTTP contexts
- Verify preset save/load functionality
- Check responsive design on mobile
- Update AGENTS.md with architectural changes
- Save working versions to
Previous Versions/before major changes
Web Arpeggiator/
├── README.md # This file
├── AGENTS.md # Architecture & development guide
├── index.html # Main application shell
├── styles.css # External styles (optional)
├── presets/ # Saved configurations
├── exports/ # Generated audio
│ ├── realtime-recordings/
│ └── perfect-loops/
├── guides/ # Documentation
├── images/ # Assets
└── Previous Versions/ # Archive of working versions
- Responsive UI: 30 Hz update rate for real-time feedback
- Optimized Rendering: Canvas visualizer scales for high-DPI displays
- Efficient Synthesis: Tone.js optimizations for polyphony
- Master Limiter: Prevents audio clipping at any parameter setting
Potential features for future versions:
- MIDI input/output support
- Additional synth types (Noise, Membrane, Metal)
- Per-step velocity and probability controls
- Multi-track recording and mixing
- Chord voicing suggestions
- Browser local storage for auto-save
- Dark mode theme
- Additional effects (chorus, flanger, distortion)
Built with:
- Tone.js for Web Audio synthesis
- Tonal.js for music theory
- LameJS for MP3 encoding
- Tailwind CSS for styling
This project is provided as-is for personal use and experimentation.
Have questions or feedback? Check AGENTS.md for technical details, or review the code in index.html directly - it's extensively documented!
Ready to create? Open index.html and start making music!