Demo

Time Display

Audio-synchronized time display with bars:beats:ticks and minutes:seconds formats. Uses direct DOM manipulation for perfect sync with audio timing.

Live Audio Transport

A working transport with audio-synchronized time display. Click Play to see the display update in real-time.

BARS
1:1:000
Stopped

Display Modes

Two display modes: bars:beats:ticks (musical time) and minutes:seconds.milliseconds (clock time).

BARS
1:1:000
Bars Mode (1:1:000)
TIME
00:00.000
Time Mode (00:00.000)

Sizes

Time display in small, medium (default), and large sizes.

BARS
1:1:000
Small (12px)
BARS
1:1:000
Medium (16px)
BARS
1:1:000
Large (24px)

Transport States

Visual feedback based on transport state: stopped (default), playing (green), recording (red), paused (dimmed).

BARS
1:1:000
Stopped
BARS
1:1:000
Playing
BARS
1:1:000
Recording
BARS
1:1:000
Paused

Mode Label

Show or hide the mode label (BARS/TIME) above the display.

BARS
1:1:000
With Label
1:1:000
Without Label

Click to Cycle Modes

Enable clickToCycle to allow users to switch modes by clicking the display.

BARS
1:1:000
Current mode: bars - Click display to switch

Separator Animation

The separator (: or .) can animate (blink) when playing.

BARS
1:1:000
Animated
BARS
1:1:000
Static

Architecture

How the audio-synchronized time display works.

Audio Synchronization

  • Uses useTransportSync hook for audio timing
  • Direct DOM manipulation via refs bypasses React render cycle
  • Updates at 60fps using requestAnimationFrame
  • Eliminates drift between audio and visual display

Usage Pattern

const transport = useTransportSync({ initialBpm: 120 });

<TimeDisplay
  refs={transport.refs}
  mode="bars"
  transportState={transport.transportState}
/>

Time Formats

  • Bars mode: Bar:Beat:Tick (e.g., 1:1:000)
  • Time mode: MM:SS.mmm (e.g., 00:00.000)