Audio Alchemy Lab
A playful soundboard-and-remixer where users combine 6–12 tiny “audio ingredients” (beeps, chimes, rain, clicks) into looping mixes using a grid sequencer and simple knobs (volume, pan, filter, reverb). The app includes a visual waveform/level meter, one-click randomize and “mutate” buttons to generate new mixes, and a library to save/load creations via localStorage with shareable export/import JSON.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i lucide-react && npx shadcn@latest init -d
by system
Configure Tailwind content paths and add @tailwind directives plus CSS variables in src/index.css.
by system
Add shadcn/ui primitives (Button, Card, Slider, Switch, Tabs, Dialog, Tooltip, Input, Textarea, Select) via the CLI.
by system
Create src/App.tsx with a responsive shell (header/main) and placeholders for Sequencer, Mixer, Visualizer, and Library panels.
by system
Add src/types/audio.ts defining Track, StepPattern, MixParams, SavedMix, and ExportFormat types.
by system
Add src/data/ingredients.ts exporting 6–12 built-in ingredient definitions (name, color, default params, synth type).
by system
Implement src/audio/useAudioEngine.ts to create/resume a single AudioContext and expose engine lifecycle helpers.
by system
Implement src/audio/voices.ts with WebAudio generators for beep/chime/click/noise/rain using Oscillator/Noise nodes.
by system
Implement src/audio/trackNodes.ts creating per-track GainNode, StereoPannerNode, BiquadFilterNode, and send to reverb.
by system
Implement src/audio/reverb.ts to generate an impulse buffer and ConvolverNode with wet/dry control.
by system
Implement src/audio/scheduler.ts with a step-based clock (BPM, swing optional) that schedules events ahead of time.
by system
Implement src/audio/engine.ts that wires scheduler + tracks and exposes play(), stop(), setBpm(), setPattern(), setParams().
by system
Create src/state/useLabStore.ts using React context + reducer to manage tracks, patterns, bpm, and selection.
by system
Add src/state/defaultState.ts to build initial tracks/patterns from the ingredient catalog.
by system
Create src/components/TransportControls.tsx with Play/Stop, BPM control, and step length selector.
by system
Create src/components/SequencerGrid.tsx rendering a track-by-step grid with click/drag toggle behavior.
by system
Create src/components/TrackHeader.tsx showing track name, mute/solo, and color indicator.
by system
Create src/components/MixerPanel.tsx with sliders for volume, pan, filter cutoff, and reverb send for selected/all tracks.
by system
Implement mute/solo reducer actions in src/state/useLabStore.ts and propagate to engine params.
by system
Create src/components/Visualizer.tsx using a canvas + AnalyserNode to draw waveform and level meter.
by system
Wire App to create the audio engine, subscribe to store changes, and call engine setters on state updates.
by system
Add src/features/randomize.ts to generate a new pattern + params within sensible bounds.
by system
Add src/features/mutate.ts to slightly perturb current pattern/params with controllable intensity.
by system
Create src/components/RandomizeBar.tsx with one-click Randomize and Mutate buttons plus optional intensity slider.
by system
Implement src/lib/storage.ts with saveMix(), loadMixes(), deleteMix(), and migrate/version helpers.
by system
Create src/components/LibraryPanel.tsx listing saved mixes with load, rename, and delete actions.
by system
Create src/components/SaveMixDialog.tsx to name and store the current mix into localStorage.
by system
Implement src/lib/serialize.ts to export current mix to JSON and validate/import JSON back into state.
by system
Create src/components/ShareDialog.tsx that shows export JSON (copy) and allows paste-to-import.
by system
Add keyboard shortcuts (space play/stop, R randomize, M mutate) and small UX polish in src/App.tsx.
by system