CompositionAvailable
Audio Controls
Controlled playback, speed selection and audio availability. Connect it to any audio engine.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/audio-controls.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
"use client";
import { useState } from "react";
import { AudioControls, type AudioStatus } from "@/components/ui/audio-controls";
export default function Demo() {
const [status, setStatus] = useState<AudioStatus>("idle");
const [speed, setSpeed] = useState(1);
return (
<div className="grid gap-4">
<AudioControls
status={status}
speed={speed}
onSpeedChange={setSpeed}
onPlay={() => setStatus("speaking")}
onStop={() => setStatus("idle")}
/>
<p className="bl-type-small">
Controlled UI example. Connect callbacks to your audio player; this preview does not produce
sound.
</p>
</div>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
- Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | loading | idle | speaking | error | unavailable | required | Current state supplied by the audio adapter. |
| speed / onSpeedChange | number / (speed: number) => void | required | Controlled playback rate: 0.75, 1 or 1.25. |
| onPlay / onStop | () => void | required | User-initiated playback callbacks. |
| labels | Partial<AudioControlsLabels> | English | Localized labels for buttons, group, speed and status. |
| disabled | boolean | false | Disables interaction with the entire control. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Native fieldset, buttons and select support keyboard input.
Unavailable and error states are announced with role=status.
Provide translated labels; the component never starts audio automatically.