Soundbite Scrambler
A playful client-side audio sampler where users record short “soundbites” (via microphone) or upload small audio clips, tag them, and arrange them into a simple grid-based sequencer to create looping mini-beats. The app includes a lightweight waveform preview, per-cell trim/volume controls, and one-click “Shuffle Mix” that randomly rearranges clips while keeping tempo. Projects are saved in localStorage, with export options to download the mix as a single WAV (rendered in-browser) and share a compact JSON preset.
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
by system
Configure src/index.css with Tailwind directives and basic CSS variables for shadcn/ui.
by system
Create src/App.tsx with a simple shell (header/main/footer) and placeholder panels.
by system
Add src/components/Header.tsx with app title and primary action buttons placeholders.
by system
Create src/lib/types.ts defining Soundbite, ClipAsset, SequencerCell, Project, and ExportPreset types.
by system
Create src/lib/storage.ts with load/save/list project utilities and versioned schema key.
by system
Create src/lib/useProjectStore.ts as a React hook managing current project, undo-safe updates, and dirty flag.
by system
Create src/lib/audioContext.ts to lazily create/resume a shared AudioContext and handle user-gesture unlock.
by system
Create src/lib/decodeAudio.ts to decode ArrayBuffer into AudioBuffer with error handling.
by system
Create src/lib/renderWav.ts to render a project mix offline and return a WAV Blob for download.
by system
Create src/lib/exportPreset.ts to serialize/deserialize compact JSON preset without embedding raw audio.
by system
Create src/lib/assetRegistry.ts to store/retrieve audio clip blobs in IndexedDB-like fallback using localStorage chunks.
by system
Add src/components/RecorderPanel.tsx with start/stop recording via MediaRecorder and save as new clip asset.
by system
Add src/components/UploadPanel.tsx with file input, size/type checks, and import into clip assets.
by system
Create src/components/TagEditor.tsx for adding/removing tags on a selected soundbite.
by system
Add src/components/SoundbiteList.tsx showing clips, tags, duration, and selection handling.
by system
Create src/components/Waveform.tsx that draws a lightweight waveform to canvas from an AudioBuffer.
by system
Add src/components/TrimControls.tsx with start/end trim sliders normalized to buffer duration.
by system
Add src/components/VolumeControl.tsx with per-cell gain slider and mute toggle.
by system
Create src/components/SequencerGrid.tsx rendering a rows×steps grid with clickable cells and selection state.
by system
Implement src/lib/assignToCell.ts to place selected soundbite into a grid cell and set default trim/volume.
by system
Add src/components/Transport.tsx with play/stop, BPM input, steps per bar, and loop toggle.
by system
Create src/lib/scheduler.ts to schedule cell playback with lookahead timing using AudioContext currentTime.
by system
Create src/lib/playCell.ts to play a trimmed AudioBuffer segment through a GainNode at a scheduled time.
by system
Add src/components/Playhead.tsx to visually highlight the current step while playing.
by system
Create src/lib/shuffleMix.ts to randomly rearrange assigned clips across cells while keeping grid size and tempo.
by system
Add src/components/ProjectManager.tsx with new/save/load/delete actions wired to localStorage helpers.
by system
Add src/components/ExportWavButton.tsx to render offline WAV and trigger a file download.
by system
Add src/components/SharePresetDialog.tsx to export/import JSON preset via textarea and file upload.
by system
Add src/components/Toaster.tsx and a small src/lib/toast.ts wrapper for consistent user-facing errors.
by system