CompositionDisponible

Playback Settings

Controles compactos de velocidad y lecturas con preferencia de reproducción automática.

Loading example…

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/playback-settings.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

"use client";
import { useState } from "react";
import { PlaybackSettings } from "@/components/ui/playback-settings";
export default function Demo() {
  const [speed, setSpeed] = useState(1);
  const [repetitions, setRepetitions] = useState(2);
  const [autoPlay, setAutoPlay] = useState(true);
  return (
    <PlaybackSettings
      speed={speed}
      repetitions={repetitions}
      autoPlay={autoPlay}
      onSpeedChange={setSpeed}
      onRepetitionsChange={setRepetitions}
      onAutoPlayChange={setAutoPlay}
    />
  );
}

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
speed / onSpeedChange	number / callback	See example	Playback rate from 0.5 to 2 in increments of 0.25.
repetitions / onRepetitionsChange	number / callback	See example	One to five readings per playback sequence.
autoPlay / onAutoPlayChange	boolean / callback	See example	Consumer owns persistence and audio scheduling.
labels / disabled	object / boolean	See example	Localized names and disabled state.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Los controles tienen etiquetas accesibles, foco visible y soporte de teclado.