CompositionDisponible
Audio Controls
Reproducción controlada, velocidad y disponibilidad del audio. Conecta cualquier motor de audio.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/audio-controls.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu 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>
);
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
- Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| 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. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Fieldset, botones y selector nativos accesibles por teclado.
Los estados de error y disponibilidad se anuncian con role=status.
Traduce las etiquetas. El audio nunca se inicia automáticamente.