Waveform player
Pixel waveform player that fills as it plays, previews ahead of the playhead on hover and ripples from wherever you click.
Installation
pnpm dlx shadcn@latest add @lumesec/px-playerFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-player.jsonUsage
import { PxPlayer } from "@/components/lumesec/px-player";
export function Example() {
return (
<PxPlayer />
);
}Behaviour
A pixel waveform that fills as it plays, previews ahead of the playhead on hover and sends a ripple out from wherever you click. The track is silent.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
playReact proponPlayDetail{}Fires when playback starts.
pauseReact proponPauseDetail{}Fires when playback pauses, including when the track reaches the end.
Methods
Call them on the element, for example through a React ref.
toggle()Starts or pauses playback and fires play or pause.
seek(position: number)Moves the playhead to a position from 0 to 1 of the track.
Keyboard
| Keys | Action |
|---|---|
| ArrowRight / ArrowLeft | Seek forward or back by 5 seconds. |
| Space | Play or pause. |
Accessibility
- The play button is a native button whose
aria-labelswitches between "Play" and "Pause". - The waveform canvas is focusable with
role="slider",aria-label="Seek",aria-valuemin="0"andaria-valuemax="222"(seconds). aria-valuenowis the position in seconds andaria-valuetextreads like "1:11 / 3:42". The hover time tooltip is pointer-only.- Reduced motion: the bars around the playhead stop pulsing during playback; click ripples still play.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --card, --foreground, --lumesec, --lumesec-foreground and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-mono, --ui-muted, --ui-on-accent and --ui-surface.
Notes
- The track is demo content: "Night Drive", 3:42 long, with a generated waveform and no audio. There is no attribute for a source. Playback starts at 32%.
- The waveform canvas is 64px tall.
Related
Was this page helpful?