Meet SLIKSYNTH - ORION.
A simple yet semi-advanced browser-based polyphonic synthesizer and sequencer built with Tone.js.
SLIKSYNTH - ORION allows you to create melodies and harmonies directly in your web browser, featuring a powerful piano roll, live keyboard input, and a versatile sound engine.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✨ Features
🎹 Live Performance & Sequencing
✶ Piano Roll Sequencer: A 16-step grid sequencer with a 2-octave (24-note) range. Simply click to add or remove notes and build complex patterns.
✶ Live Keyboard: Play notes in real-time using your computer keyboard (A through K for white keys, W through I for black keys) or by clicking the on-screen piano.
✶ Visual Playhead: A clear, synchronized playhead moves across the piano roll, highlighting the current step being played.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔊 Sound Engine
✶ Polyphonic Synthesizer: Play multiple notes at once to create chords and rich harmonies.
✶ Wavetable Oscillator: Choose from a curated list of 9 distinct wavetable presets to define the core character of your sound. Presets include:
✶ Sine, Square, Sawtooth, Triangle
✶ Fat Saw, Fat Square, Fat Triangle
✶ Pulse, PWM
✶ ADSR Envelope: Shape the volume of your sound over time with full control over Attack, Decay, Sustain, and Release.
✶ Low-Pass Filter: Sculpt the tone of your synth by removing high frequencies. Includes controls for both Cutoff frequency and Resonance.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎛️ Modulation & Control
✶ Filter LFO (Low-Frequency Oscillator): Modulate the filter cutoff to create rhythmic interest and movement. Choose from several LFO shapes including Sine, Square, Ramp Down, and Triangle.
✶ Play/Stop: Full control over sequence playback.
✶ Spacebar Shortcut: Start and stop the sequencer with the spacebar for a fast workflow.
✶ BPM Control: Easily adjust the tempo from 40 to 240 BPM with a dedicated slider.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🚀 How to Use
✶ Start the Synth: Open synthesizer_game.html in your browser and click the "Start Synthesizer" button to initialize the audio context.
✶ Play Notes: Use your computer keyboard or click the on-screen piano keys to play sounds live.
✶ Sequence a Melody: Click on the cells in the Piano Roll to add notes to the sequencer. Click an active note again to remove it.
✶ Start Playback: Press the "Play" button or the spacebar to hear your sequence.
✶ Shape Your Sound: Use the SYNTH CONTROLS sliders and the Wavetable/LFO preset dropdowns to design your own unique patch.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🛠️ Tech Stack
✶ HTML5
✶ Tailwind CSS for styling and layout.
✶ JavaScript (ES6+) for all application logic.
✶ Tone.js for the Web Audio framework and synthesis engine.
✶ Orbitron Font for the futuristic user interface design.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
NOTES: This project is very early in developement, expect bugs and what-not however with that being said I will focus on tackling every bug I manage to encounter as I test this myself.
Do not hessitate to leave any bug reports you find while trying out ORION, I will check through tickets and sort out what I can, Thank you!