componentes / audio-player

AudioPlayer

Reproductor de audio accesible con play/pausa, barra de búsqueda, tiempo, velocidad y volumen.

Cómo usar

Envuelve un `<audio>` nativo con controles propios. La barra de búsqueda y el volumen usan el `Slider` de la biblioteca. Teclado en el reproductor: Espacio o K play/pausa, las flechas buscan 5s y cambian el volumen, M silencia. Todo texto interno se puede cambiar en `labels`. Con `variant="waveform"` se convierte en una tarjeta compacta de mensaje de voz: el archivo se descarga y decodifica en memoria para dibujar las barras según el volumen (pulsando mientras tanto; un patrón si falla, p. ej. sin CORS en otro origen), y la onda es un slider (clic o arrastre para buscar, las flechas mueven 5s). Para audio largo, pasa los picos en `waveform`.

preview

0:00

AudioPlayer.tsx

import { AudioPlayer } from "vaiperui";
 
<AudioPlayer
  src="/audio/roar.mp3"
  label="Nota de voz"
  onEnded={() => console.log("done")}
/>

Variantes

`waveform` es una tarjeta compacta de mensaje de voz: onda clicable, tiempo actual / total y botón de velocidad.

preview

0:00

default

0:00 / 0:00

waveform

0:00 / 0:00

waveform + speeds

0:00 / 0:00

waveform + peaks

variantes.tsx

<AudioPlayer src="/audio/roar.mp3" />
<AudioPlayer src="/audio/roar.mp3" variant="waveform" />
<AudioPlayer src="/audio/roar.mp3" variant="waveform" speeds={[0.75, 1, 1.25, 1.5]} />
// peaks from 0 to 1, computed on the server: skips the download and analysis
<AudioPlayer src="/audio/roar.mp3" variant="waveform" waveform={[0.1, 0.4, 0.9, 0.6, 0.2]} />

Colores

preview

0:00

primary

0:00

success

0:00

warning

0:00

danger

colores.tsx

<AudioPlayer src="/audio/roar.mp3" variantColor="primary" />
<AudioPlayer src="/audio/roar.mp3" variantColor="success" />
<AudioPlayer src="/audio/roar.mp3" variantColor="warning" />
<AudioPlayer src="/audio/roar.mp3" variantColor="danger" />

Tamaños

preview

0:00

tamanos.tsx

<AudioPlayer src="/audio/roar.mp3" size="sm" />
<AudioPlayer src="/audio/roar.mp3" size="md" />
<AudioPlayer src="/audio/roar.mp3" size="lg" />

Color personalizado

preview

0:00

Rosa

0:00

Por tema

color-personalizado.tsx

<AudioPlayer src="/audio/roar.mp3" customColor="#db2777" />
<AudioPlayer src="/audio/roar.mp3" customColor={{ light: "#7c3aed", dark: "#c4b5fd" }} />

Props

Prop	Valores	Predeterminado	Descripción
variant	default \| waveform	default	default: barra de búsqueda, volumen y silencio. waveform: una tarjeta compacta como un mensaje de voz, con onda clicable, tiempo actual / total y botón de velocidad
bars	number	52	variante waveform: cantidad de barras
waveform	number[]	—	variante waveform: picos de 0 a 1, remuestreados a las barras. Omite la descarga y el análisis del audio
src	string	—	URL del audio
label	string	Audio	Nombre accesible del reproductor
preload	none \| metadata \| auto	metadata	Cuánto carga el navegador antes del play
loop / autoPlay	boolean	false	Comportamientos nativos
speeds	number[]	[1, 1.5, 2]	Velocidades por las que alterna el botón; una lista vacía lo oculta
labels	Partial<{ play, pause, mute, unmute, seek, volume, speed }>	textos en inglés	Reemplaza los textos internos (aria-labels de los botones y sliders)
onPlay / onPause / onEnded	() => void	ninguno	Llamados por los eventos de medios correspondientes
onTimeUpdate	(currentTime: number) => void	ninguno	Llamado durante la reproducción, con la posición en segundos
variantColor	primary \| success \| warning \| danger	primary	Color de acento (botón play, progreso, indicadores)
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema). Reemplaza a variantColor
size	sm \| md \| lg	md	Tamaño de los controles y del texto
radius	none \| sm \| md \| lg \| full	lg	Redondeo de las esquinas
animation	none \| smooth \| fast \| bounce	smooth	Transición de los controles

Accesibilidad

El reproductor es un `role="group"` nombrado por `label`, así que los lectores de pantalla lo anuncian como un solo control.
El botón de play cambia su nombre entre `labels.play` y `labels.pause`; el de silenciar, entre `labels.mute` y `labels.unmute`.
La barra de búsqueda y el volumen son `Slider`s (`role="slider"`) nombrados por `labels.seek` y `labels.volume`; el botón de velocidad anuncia la tasa actual (p. ej. `Playback speed: 1.5x`).
Con `variant="waveform"`, la onda es un `role="slider"` con `aria-valuemin`, `aria-valuemax`, `aria-valuenow` y un `aria-valuetext` como `0:12 of 0:40`; solo recibe foco cuando se conoce la duración y está `aria-disabled` antes.
Las barras de la onda son `aria-hidden`, así que solo se anuncia el slider.
Mientras se analiza la onda las barras pulsan, y el pulso se desactiva con `prefers-reduced-motion`; si el análisis falla (p. ej. sin CORS) se dibuja un patrón y el reproductor sigue funcionando.

Teclado

Tecla	Acción
Space / K	Play o pausa (cuando el foco no está en un botón o slider)
ArrowLeft / ArrowRight	Retroceder / avanzar 5s
ArrowUp / ArrowDown	Volumen +/- 10%
M	Silenciar o activar el sonido
Home / End	En el slider de la onda: ir al inicio / final (las flechas mueven 5s ahí)
Tab	Recorre botones y sliders

Ten en cuenta

No hay subtítulos ni transcripción: ofrece una alternativa en texto para el contenido hablado (p. ej. una transcripción junto al reproductor).
Pasa un `label` significativo y traduce `labels` al idioma de la página; los predeterminados están en inglés. `autoPlay` inicia el sonido sin acción del usuario, evítalo.