SONIC OBJECTS / 05MUSIC APP / KIDS / WEB AUDIO2026

PLAYFUL MUSIC MAKER / 05

KIDS STUDIO

TAP
PLAY
MIX
Kids Studio live browser workspace with synth, drums, effects, mixer and song sequencer playing togetherWEB AUDIO / LIVE APP / 05

Tap a beat. Build a song. Make it yours.

DEVELOPMENT SYSTEM / 05

ONE AUDIO GRAPH.
MANY SMALL MOVES.

Kids Studio is a React and TypeScript browser app built with Vite. A single Web Audio graph synthesizes drums, bass, chords and melody, then routes them through track gains, delay, generated convolution reverb and the master output.

TypeScriptStudio state + audio logicReactInteractive studio interfaceViteDevelopment + production buildWeb Audio APISynthesis + mixer + effectsVitestSequencer + state logic testsHTMLApplication surfaceCSSToy-like visual systemCloudflareLive web deploymentCodexAI development agentGitHubSource + version historyCursorAgentic code editingVisual StudioNative IDE + debuggerVS CodeCode editor + tooling
WHAT MADE THE BUILD DIFFERENT

The audio context is created only after the first interaction. Creative edits keep an undo history and a local browser snapshot, while playback state deliberately resets instead of pretending the song is still running after refresh.

THE APP / 05

Kids Studio is a browser-based music-making app that turns the structure of a real studio into a colorful creative toy. Kids can program drums, write chords, bass and melody, arrange clips, balance the mixer and shape the final sound with delay and reverb.

KEY FEATURES

01Four-voice 16-step drum machine

02Piano-roll writers for chords, bass and melody

03Sixteen-bar clip sequencer with drag, copy and loop tools

04Five-channel mixer, Web Audio effects, undo and local saving

THE FLOWTAP → WRITE → ARRANGE → MIX
  1. 01TAP

    Light steps for kick, snare, hat and clap, then hear the four-voice beat run across sixteen steps.

  2. 02WRITE

    Place chords, bass and melody on the piano roll with chord, root-following and scale-lock helpers.

  3. 03ARRANGE

    Make colored clips and move, copy, resize or remove them across the sixteen-bar song.

  4. 04MIX

    Balance five channels, mute or solo parts and add delay and reverb before playing the loop again.

PLAY SYSTEM / 01

A REAL STUDIO.
SMALL ENOUGH TO PLAY.

Kids Studio keeps the language of music production—patterns, clips, tracks, mixing and effects—but turns every step into a bright, immediate action. A starter song is ready from the first screen, so making changes begins before setup gets in the way.

OPEN KIDS STUDIO ↗
TAP / PLAY / MIX

START WITH SOUND.
END WITH A SONG.

Kids Studio main music workspace with synth, drums, effects, mixer and song sequencer
THE WHOLE STUDIO / ONE ROOM

Synth, drums, effects, mixer and the sixteen-bar song live together, so every sound stays connected to the arrangement.

REAL PRODUCT / STARTER SONG
MAKING MUSIC / 01—04

FOUR SMALL TOOLS.
ONE MUSICAL IDEA.

The workflow follows a real music studio without turning the experience into a lesson or a professional DAW.

01

BEAT MAKER

Tap kick, snare, hat and clap into a 16-step pattern and hear every hit immediately.

02

SYNTH WRITER

Draw chords, bass and melody on a compact piano roll, with scale lock and friendly chord helpers.

03

SONG BUILDER

Turn patterns into colored clips, then move, copy, resize, loop or remove them across sixteen bars.

04

MIX + MAGIC FX

Balance drums, bass, chords, melody and master, then shape the result with delay and generated reverb.

BEAT MAKER / 02

TAP FIRST.
HEAR IT NOW.

Each drum step toggles with one press and previews the selected voice immediately. Press Play and the lighted column moves across the pattern while the same beat runs inside the song.

Kids Studio mascot playing a colorful beat pad
THE MASCOT SAYSTAP A PAD.
MAKE A BEAT.
BUILD THE POCKET

LIGHT THE GRID.
LOCK THE GROOVE.

Kids Studio drum machine with an active four-voice step pattern
16 STEPS / FOUR VOICES

Kick, snare, hat and clap remain readable inside the full arrangement, with an active playhead and instant audible feedback.

PATTERN / LIVE PLAYBACK
Kids Studio mascot arranging colorful musical clips into a song
SONG BUILDER / 03

MAKE A CLIP.
MOVE THE STORY.

Chords, bass and melody are written as notes, then compressed into friendly colored clips. Select, drag, duplicate, delete or change a clip’s length to build a sixteen-bar arrangement.

  • CHORDSEasy triads establish the harmony.
  • BASSFollow visible chord roots with one helper.
  • MELODYScale lock keeps notes inside C major.
SHAPE THE FINISH

BALANCE THE PARTS.
ADD SOME MAGIC.

Kids Studio mixer showing live levels while the starter song plays
FIVE CHANNELS / LIVE LEVELS

Drums, bass, chords, melody and master each keep a clear fader, mute and solo state while the song is playing.

MIXER / DELAY / REVERB
LOCAL PROJECT / 04

IDEAS STAY.
PLAYBACK RESETS.

Composition changes carry an undo history and the project snapshot is saved in the browser. Refreshing preserves the creative work, while playback deliberately starts stopped and waits for the first interaction.

Colorful Kids Studio music workstation with drum pads, keyboard and mixer controls
16-STEP PATTERNS16-BAR SONG4 MUSICAL TRACKS5-CHANNEL MIXERWEB AUDIOLOCAL SAVE
PROJECT ACCESSBROWSER / WEB AUDIO / LIVE

MAKE SOME MUSIC

Kids Studio is live in the browser. Open it on desktop, press Play to unlock audio, then change the starter song or clear the arrangement and begin with a new beat.

OPEN KIDS STUDIO ↗
BACK TO / SONIC OBJECTSSONIC OBJECTS←