MIDI Playback
midi-playbackControlsOne timeline for host playback, tracks and MIDI export.
$ pnpm dlx shadcn@latest add @pluginui/core-midi-playbackLoading interactive preview…
Install
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
timeline-rollconsole-buttonplayback-clock
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-midi-playback.jsonUsage
Connect the documented props to your application or host.
import { MidiPlayback } from "@/components/ui/midi-playback"
import { usePlaybackClock } from "maruaudio/ui/shared/playback-clock"
const clock = usePlaybackClock(host.playbackTimeline)
<MidiPlayback data={{ notes, tracks }} durationSeconds={duration} cycles={bars}
clock={clock} controls={transportControls} onToggleMute={toggleHostTrack}
onExport={exportMidi} onExportDrag={dragMidi} onExportDragEnd={endDrag} />
// notes: { startSeconds, endSeconds, midi, velocity: 0..1, track: trackId }
// tracks: { id, name, channel: 1..16, colorIndex, muted?, noteCount? }
// Optional registry hook: use-midi-file-export; inject your existing MIDI encoder,
// download and drag adapters. UI-kit never converts a model's output itself.About MIDI Playback
The playback panel shared by Code Sequencer and PitchRead. Feed notes in seconds, stable track IDs and color indices, plus a host PlaybackClock. Track mute/solo callbacks must update the host's audible sequence as well as the display. The scroll toggle appears from 20 measures and follows long sequences; manual scrolling temporarily suspends follow. Export and drag callbacks use the same prepared notes as playback. This documentation demo illustrates the display clock and track controls without producing sound.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | MidiPlaybackData | null | — | Notes, tracks and optional section bands. Convert model durations to endSeconds in the producer; retain full precision and all notes. |
| clock | PlaybackClock | — | Display clock anchored when the host starts playback. It never schedules notes. |
| durationSeconds / cycles | number | — | Timeline duration and musical cycle count for the ruler. |
| rulerUnit | "cycles" | "seconds" | — | Defaults to musical cycle numbers. Use seconds for arbitrary audio clips with no known tempo; both modes retain the same timeline coordinates. |
| view / onViewChange | "fit" | "detail" / callback | — | Optional controlled fit or scrolling view; sequences under 20 measures stay fitted and hide the scroll toggle. |
| onToggleMute / onToggleSolo / soloed | callbacks / string[] | — | Host mix actions and selected track IDs. Colors remain stable through track colorIndex. |
| onExport / onExportDrag / onExportDragEnd | callbacks | — | MIDI download and drag lifecycle; reuse the same encoder and note data as the host. |
| leadingLane | { height, label?, content } | — | Optional waveform or other time-aligned lane above the notes, inside the same scroll area and playhead. Its full width represents durationSeconds; height is included in the total roll height. |
| spectrogram | PreparedSpectrogramData | — | Optional bounded, host-prepared spectral grid beneath the notes. Explicit frame times and bin frequencies map to the same seconds and semitone coordinates as the note roll. Omit it for Notes mode; no PCM, FFT, model or separate playhead enters the face. |
| noteOpacity | number | — | Visual opacity for the note layer, from 0 to 1. Use it to reflect an audio/MIDI audition blend while retaining a readable minimum; the host still owns audible gain. |
| restingPositionSeconds / showNoteCounts | number / boolean | — | Optional stopped cursor for scrubbing, and a note-count pill beside each track name. |
| controls / trailing / height | ReactNode / ReactNode / number | string | — | Left transport slot, secondary actions on the right, and roll height (default 220px). Dock integrations may use MidiPlaybackToolbar and MidiPlaybackDisplay separately. |
Interaction
- Scroll Switch between fitting the sequence and following its playhead.
- Tracks Mute or solo a colored track; Alt-click its name to solo.
- Export Click to download or drag from the same MIDI export button.