Pocket Circuit.
A 16-pad browser sampler and beat looper with a playable demo kit, waveform slicing, and local saving.
- Role
- Creator & frontend engineer
- When
- 2026
- Built with
- Next.js, React, TypeScript, Web Audio API, IndexedDB
Pocket Circuit is a personal browser-based sampler and beat looper. It starts with a synthesized kit so someone can play immediately, then lets them import audio, slice a waveform, assign sounds to pads, and record patterns.
- Playable demo kit with no setup
- Sample slicing and pad assignment
- Patterns and audio saved in the browser
How it works.
Choose sounds
A synthesized demo kit plays instantly; local files or permitted tab audio can be imported and sliced.
Play & record
Sixteen pads with keyboard and pointer input, and a two-bar sequencer timed against the audio clock.
Save locally
Project state and imported audio persist in IndexedDB—no account or backend required.
The challenge
A sampler should feel playable on first use without requiring an account, a backend, or a folder of audio files. Imported sounds and recorded patterns also need to remain available when the browser reloads.
What I did
I built a 16-pad interface around a ready-to-play demo kit, keyboard and pointer input, waveform-based sample editing, and a two-bar sequencer. Local file import and a user-controlled tab-audio capture flow feed the same slicer; tab capture depends on the browser's sharing permission.
Under the hood
A gesture-activated Web Audio engine handles synthesis, playback, and effects. The transport schedules events against AudioContext time using a short look-ahead window, while IndexedDB stores project state and imported audio. The waveform is drawn from decoded samples.
Where it landed
The result is a responsive, browser-local instrument that supports immediate demo playback, imported samples, recorded loops, and restoration of saved projects. Audio capture and codec support remain dependent on the browser and the user's permissions.