Multitrack timelinePro

A DAW lite timeline: clips you drag, trim and move between tracks, a bar and beat ruler, snap, a loop region, zoom around the pointer and synced playback.

Markdown

On this page

ProSixteen bars on four tracks: drag and trim clips, drag the ruler for a loop, zoom around the pointer, play it all in sync.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/multitrack-timeline

Usage

tsx

import { MultitrackTimeline } from "@/components/ui/chatcn/pro/multitrack-timeline"

<MultitrackTimeline tracks={tracks} clips={clips} onClipsChange={setClips} bpm={92} />

A clip is { id, track, start, duration, offset, name, peaks, source } in seconds. Snap rounds to bars, beats or half beats. Drag across the ruler to set the loop, click it to move the playhead. Ctrl or Cmd and the wheel zoom around the pointer.

The examples play a demo synthesizer built on the Web Audio API (renderStem and renderSong in @/lib/chatcn-pro-music): drums, bass, keys and a sung line in a key and tempo, rendered offline. Pass your own audio as URLs or buffers instead.

Examples

States

ProEmpty, zoomed in with a clip selected and snap off and disabled.

Props

Prop	Type	Notes
`tracks`	`TimelineTrack[]`	Required
`clips`, `defaultClips`, `onClipsChange`	`TimelineClip[]`
`bpm`, `length`	`number`	Default 120; length follows the clips
`zoom`, `defaultZoom`, `onZoomChange`, `zoomRange`		Pixels per second
`snap`, `grid`		With their default and change props
`loop`, `defaultLoop`, `onLoopChange`	`TimelineLoop \| null`
`selected`, `defaultSelected`, `onSelectedChange`	`string \| null`
`labels`	`Partial<TimelineLabels>`	Every string the timeline shows or announces, for translation

Keyboard

Key	Action
`←` `→` on a clip	Move by one grid step; `Shift` for a bar
`Alt` + `←` `→`	Trim the clip's end
`↑` `↓`	Move to the track above or below
`Delete`	Remove the clip
`+` `-`	Zoom

Accessibility

Each track is a list of clips; a clip is a button named with its track and bars: "Bassline on Bass, bar 5.1 to 9.1".
Moves and removals are announced politely.

Motion

Clips follow the pointer and land on the grid; keys move them at once. Zoom keeps the moment under the pointer still.