• English

      • @muse-player/component

      Pre-built UI components for Muse Player, styled with StyleX.

      pnpm add @muse-player/component
      Warning

      You must import the stylesheet for component styles to work:

      import '@muse-player/component/style.css';

      PlaybackControls

      A full playback control bar with progress seeking, play/pause/stop, time display, and tempo slider.

      import { PlaybackControls } from '@muse-player/component';
import '@muse-player/component/style.css';

<PlaybackControls
  playing={playing}
  currentTime={currentTime}
  totalDuration={totalDuration}
  currentMeasure={currentMeasure}
  tempo={tempo}
  onPlay={play}
  onPause={pause}
  onStop={stop}
  onSeek={seek}
  onTempoChange={updateTempo}
/>

      Props

      All props are required.

      PropTypeDescription
      playingbooleanWhether audio is currently playing
      currentTimenumberCurrent playback time in seconds
      totalDurationnumberTotal duration in seconds
      currentMeasurenumberCurrent measure index (0-indexed, displayed as +1)
      temponumberCurrent BPM
      onPlay() => voidPlay button handler
      onPause() => voidPause button handler
      onStop() => voidStop button handler
      onSeek(time: number) => voidSeek handler — receives time in seconds
      onTempoChange(tempo: number) => voidTempo change handler — receives new BPM

      UI Features

      • Progress bar — clickable track with fill indicator. Click position is converted to a time ratio.
      • Play/Pause button — circular orange button, toggles icon between play and pause states.
      • Stop button — bordered circle with stop icon.
      • Time display — monospace M:SS / M:SS format, plus current measure number.
      • Tempo slider — range input from 40 to 240 BPM with current value display.