Kentaro Koga

Tokyo, JAPAN

Experiment

Sample Sequencer: A Web‑Based Sample Playground

Sample Sequencer: A Browser‑Based Sample Playground Born from v0 AI Experiments

I built Sample Sequencer as a side project while playing with v0—an AI tool I wanted to test for how far I could push customization and UI/UX. Half fun, half experimentation, this byproduct lets you record, trim, sequence, and export loops right in your desktop browser.

Sample Sequencer

Note: Mobile and tablet support aren’t implemented yet (coming soon).

Experimental Workflow

  • AI‑Driven Prototype
    Started by experimenting with v0, exploring how to leverage AI to accelerate UI/UX development and customization.
  • Local Iteration
    Pulled the prototype into my local environment for rapid testing and refinement.
  • GitHub‑Backed
    Managed all source code on GitHub, with feature branches and frequent commits for each experiment.

Core Features

Record with Your Mic

  • Capture up to 10 seconds
  • Waveform preview and auto‑save via LocalStorage

recording waveform

Intuitive Trim UI

  • Drag yellow handles to isolate your sample
  • Instant playback of the trimmed region

trim editor

Mini Keyboard Test

  • Play chromatically (C4–B4) via clicks or your computer keyboard

keyboard

12×16 Step Sequencer

  • 12 notes × 16 steps grid
  • Click for single‑step notes, click‑drag for longer notes
  • Live looping with step highlighting
  • Variable note lengths by click‑drag

sequencer grid

sequencer grid

sequencer grid

Effector Panel

  • Low‑pass filter → feedback delay → reverb chain
  • Rotary knobs for cutoff, delay time, feedback, wet mix, decay

effector panel

Save & Export

  • Export project JSON (base64 audio + grid data)
  • Bounce loop to WAV for easy sharing

export panel

Under the Hood

  • Framework: Next.js (App Router)
  • Styling: TailwindCSS with a minimalist, high‑contrast look
  • Audio Engine: Tone.js for real‑time sampling, sequencing, and offline rendering
  • State Management: Zustand with LocalStorage persistence
  • Drag UI: Pointer events for smooth desktop drag‑and‑drop
  • Source Control: GitHub repo with feature branches and PR reviews

Why It Matters

Sample Sequencer is more than just a toy—it’s a proof‑of‑concept showing how AI tools like v0 can accelerate prototyping while keeping full customization in my hands.

It combines:

  • Playfulness: quick, zero‑install fun in your browser
  • UI/UX Experimentation: testing new interaction patterns
  • AI Exploration: learning the limits of v0 for developer workflows

I’m just getting started—expect more playful, AI‑powered experiments soon.

Give it a spin at Sample Sequencer