Audio Clip Player

audio-clip-playerControls

Play, pause and seek a clip through its waveform.

$ pnpm dlx shadcn@latest add @pluginui/core-audio-clip-player
Loading 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

audio-clip-waveform
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-audio-clip-player.json

Usage

Connect the documented props to your application or host.

example.tsx
import { AudioClipPlayer } from "@/components/ui/audio-clip-player"

<AudioClipPlayer label="source audio" waveform={{ min: negativePeaks, max: peaks }}
  durationSeconds={duration} currentTimeSeconds={position} playing={playing}
  waveformStyle="detailed" waveformHeight={80} compact playButtonVariant="solid"
  playLabel="Preview audio" pauseLabel="Pause audio"
  onToggle={toggleHostPlayback} onSeek={fraction => seekHost(fraction * duration)} />
About Audio Clip Player

Also exports AudioClipTransport, AudioClipTime and AudioClipWaveform for composing aligned timeline lanes. A controlled audio preview extracted from the product demo player. The host supplies peaks, duration, playback position and actions. The component opens no audio devices, fetches no files and creates no audio engine, so the same UI works in module faces and product pages. Click or drag to scrub the continuous envelope. Arrow keys seek by 1%, Shift by 10%; Home and End jump to the ends.

Props

PropTypeDefaultDescription
labelstring—Accessible clip name for playback and seeking.
waveform{ min, max, encoding? }—Normalized peak arrays or the product preview's signed-int8/base64 peaks.
durationSeconds / currentTimeSecondsnumber—Duration and current position from the host clock.
playing / disabledboolean—Host playback state and optional unavailable state.
onToggle / onSeek() => void / (fraction: number) => void—Host actions. Seek receives a normalized 0..1 position.
playLabel / pauseLabelstring—Optional visible action text beside the play/pause icon; also names the button for assistive technology.
waveformHeight / compact / playButtonVariantnumber / boolean / "outline" | "solid"—Waveform height, compact 28px transport and optional solid play button.
waveformStyle"bars" | "detailed""bars"Rounded peak bars or a continuous envelope.

Interaction

  • Playback Play/pause calls the host; the host reports when playback starts, ends or fails.
  • Seek Click or drag the waveform, or focus it and use arrow keys, Shift, Home or End.
All controlsStart building