Soundless Sampler
A playful browser-based "music" maker that builds looping tracks using only text-based patterns (e.g., kick/snare/hat grids) and Web Audio synthesis—no audio files required. Users can create multiple 8–32 step patterns, adjust tempo/swing/volume per track, and save/load their grooves from localStorage with a simple preset system. The UI is split into clear components: transport controls, track list, step sequencer grid, synth/mixer panel, and a preset library modal, all styled with Tailwind and shadcn/ui.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init && npx shadcn@latest add button card dialog dropdown-menu input label slider switch tabs tooltip separator
by system
Configure Tailwind content paths and base styles in tailwind.config.* and src/index.css.
by system
Create src/types.ts with Track, Pattern, StepGrid, Preset, and Transport type definitions.
by system
Create src/defaults.ts exporting an initial project with 2–3 starter tracks and patterns.
by system
Add src/audio/engine.ts with AudioContext lifecycle, master gain, and time utilities.
by system
Add src/audio/voices.ts implementing kick/snare/hat/clap simple synth functions using Web Audio nodes.
by system
Add src/audio/scheduler.ts for step-based scheduling with lookahead and swing support.
by system
Create src/audio/useAudioEngine.ts hook to init/cleanup engine and expose play/stop/trigger.
by system
Create src/state/ProjectContext.tsx with reducer-based state for tracks, patterns, and transport.
by system
Add src/state/actions.ts defining action creators for play/stop, tempo, swing, and step updates.
by system
Create src/state/persist.ts to save/load project state and presets to localStorage with versioning.
by system
Add src/state/presets.ts for CRUD helpers (create, rename, delete, load) on stored presets.
by system
Implement src/App.tsx layout with header, main split panes, and providers wired up.
by system
Create src/components/TransportControls.tsx with play/stop, BPM, swing, and current step display.
by system
Create src/components/TrackList.tsx showing tracks with select, add, duplicate, and delete actions.
by system
Create src/components/TrackRow.tsx for per-track name, mute/solo, volume, and pattern length.
by system
Create src/components/AddTrackDialog.tsx to add a new track with instrument type and step count.
by system
Create src/components/StepGrid.tsx rendering an interactive 8–32 step sequencer for active track.
by system
Create src/components/StepCell.tsx handling toggle/velocity UI states and pointer interactions.
by system
Create src/components/PatternLengthControl.tsx to change active pattern steps (8/16/24/32).
by system
Create src/components/SynthPanel.tsx with instrument-specific parameters (tone/decay/noise) controls.
by system
Create src/components/MixerPanel.tsx with master volume plus per-track volume and pan controls.
by system
Connect TransportControls/TrackList/StepGrid panels to ProjectContext actions and selectors.
by system
Add playhead step highlighting in StepGrid synced to scheduler callback ticks.
by system
On scheduler ticks, trigger active steps for all tracks using voices and per-track volume/mute/solo.
by system
Create src/components/PresetLibraryModal.tsx using shadcn Dialog to browse, save, load, and delete presets.
by system
Create src/components/PresetRow.tsx for preset name display with load/rename/delete buttons.
by system
Add src/hooks/useHotkeys.ts enabling space play/stop and arrow keys to move selected step/track.
by system
Add minimal empty/loading states, disable controls appropriately, and finalize responsive Tailwind styling.
by system