simpleplayer-svelte

Un reproductor de audio Svelte 5 con track custom, drag con pointer events, sincronización entre players y persistencia de progreso.

Características

• 📱 Mobile-first: Diseño responsivo con Container Queries.
• 🎚️ Track custom con drag: Barra de progreso basada en divs con eventos de pointer (sin <input type="range">).
• 🔄 Sincronización entre players: Si hay múltiples players en la misma página, solo uno puede reproducir a la vez.
• 💾 Persistencia de progreso: Si proporcionas episodeId, el progreso se guarda en localStorage y se restaura al recargar.
• ⚙️ Selector de velocidad: Soporta tasas de reproducción 0.5x, 0.8x, 1.0x, 1.25x, 1.5x y 2.0x.
• ⌨️ Controles de teclado: ←/→ para buscar ±5 segundos, Home/End para inicio/fin, Espacio para reproducir/pausar.
• 🎨 Fácil personalización: Controla los colores, bordes y tipografías usando variables CSS.
• ♿ Accesibilidad: Roles ARIA integrados, soporte para navegación por teclado y lectores de pantalla.

Instalación

npm install simpleplayer-svelte

Uso en Astro

---
import { AudioPlayer } from 'simpleplayer-svelte';
---

<div class="podcast-card">
  <!-- Recuerda usar client:load para activar la interactividad en Astro -->
  <AudioPlayer
    client:load
    src="/audio/podcast-episodio-1.mp3"
    title="Título del Episodio"
    subtitle="Nombre del Podcast"
    episodeId="ep-1"
    duration="00:32:15"
  />
</div>

<style>
  .podcast-card {
    --player-accent: #8b5cf6;
    --player-accent-foreground: #ffffff;
    --player-bg: #110e28;
    --player-text: #e0e7ff;
    --player-border: rgba(139, 92, 246, 0.15);
    --player-track-bg: rgba(139, 92, 246, 0.2);
    --player-error: #ef4444;
  }
</style>

Props

| Prop | Tipo | Por defecto | Descripción | | :--- | :--- | :--- | :--- | | src | string | — | URL del archivo de audio (MP3, WAV, etc.) | | title | string | "Podcast Episode" | Título de la pista para accesibilidad | | subtitle | string | "Podcast Series" | Nombre de la serie o podcast | | episodeId | string | undefined | ID único del episodio. Si está presente, se guarda/restaura el progreso en localStorage y se activa la sincronización entre players. | | duration | string | "00:00:00" | Duración inicial mostrada antes de cargar los metadatos |

Store de sincronización

Puedes importar el store y las funciones de control para manejar la sincronización manualmente:

import { claimPlayback, releasePlayback, activePlayerId } from 'simpleplayer-svelte';

// Obtener el player activo
activePlayerId.subscribe((id) => {
  console.log('Player activo:', id);
});

// Forzar la pausa de otros players
claimPlayback('mi-player-id');

// Liberar el control
releasePlayback('mi-player-id');

Variables CSS personalizables

| Variable | Valor por defecto | Descripción | | :--- | :--- | :--- | | --player-accent | #7c3aed | Color principal (botones, barra activa, thumb) | | --player-accent-foreground | #ffffff | Color del icono de play | | --player-bg | #ffffff | Fondo del reproductor | | --player-text | #2d1a4a | Color del texto e iconos | | --player-border | rgba(124, 58, 237, 0.08) | Color del borde de la cápsula | | --player-track-bg | rgba(124, 58, 237, 0.12) | Fondo de la barra de progreso | | --player-shadow | 0 8px 30px rgba(124, 58, 237, 0.06) | Sombra del reproductor | | --player-font-family | system-ui, -apple-system, sans-serif | Tipografía | | --player-error | #ef4444 | Color del mensaje de error |

Desarrollo Local / Pruebas

1. Empaqueta el paquete localmente:

   npm pack

2. Instálalo en tu proyecto:

   npm install /ruta/a/este/directorio/simpleplayer-svelte-2.0.0.tgz

Licencia

MIT