Transport Bar

Component Integration

• Combines TransportButton, TimeDisplay, and BPMControl
• Uses useTransportSync hook for audio timing
• Supports both autonomous and controlled modes

Autonomous vs Controlled Mode

• Autonomous: Pass audioContext to manage its own audio engine
• Controlled: Pass callbacks and state props for external control

Redux Integration Example

// Using with Redux store
const dispatch = useAppDispatch();
const isPlaying = useAppSelector(selectIsPlaying);
const bpm = useAppSelector(selectBpm);

<TransportBar
  transportState={isPlaying ? "playing" : "stopped"}
  bpm={bpm}
  onPlay={() => dispatch(play())}
  onStop={() => dispatch(stop())}
  onBPMChange={(bpm) => dispatch(setBpm(bpm))}
/>

Keyboard Shortcuts

• Space - Play / Pause
• Enter - Stop
• L - Toggle Loop
• M - Toggle Metronome