Reproductor de audio local que se ejecuta 100% en el navegador. Sin servidores, sin cuentas, sin telemetría. Tus archivos se quedan siempre contigo.
Sitio web y Demo en vivo: https://hugoadama.github.io/BeatNest/
BeatNest resuelve la dependencia de la nube en los reproductores modernos. Permite seleccionar colecciones de archivos de audio locales o carpetas completas del dispositivo del usuario, extraer sus metadatos (título, artista, álbum, carátula, duración), organizarlos en una biblioteca persistente y reproducirlos con controles completos, ecualizador paramétrico de 5 bandas, visualizador dinámico en Canvas, transiciones cruzadas (crossfade), letras sincronizadas y listas de reproducción.
Todo se procesa en el cliente utilizando APIs nativas del navegador web: File System Access API, Web Audio API e IndexedDB.
- Privacidad Local: No se envían archivos ni datos de escucha a servidores. La interfaz usa fuentes del sistema y el modo offline solo almacena recursos del propio BeatNest.
- Acceso a Archivos Locales: Selección de carpetas directas con la File System Access API y fallback automático de entrada HTML5 para compatibilidad multiplataforma (Chrome, Edge, Firefox, Safari, Brave).
- Extracción de Metadatos Completa: Extracción automática de ID3v1, ID3v2, FLAC Vorbis Comments y contenedores MP4 con
music-metadata-browser, además de cálculo de duración y obtención de carátulas en alta resolución. - Transición Suave (Crossfade) y Zero-Click Audio: Arquitectura de doble canal con nodos
GainNodepara fundir suavemente canciones sin cortes abruptos; la siguiente pista respeta el orden activo de la cola y se descartan eventos atrasados del canal anterior. - Gestor de Carátulas y Generador de Arte Procedural: Asignación de fotos mediante selector de archivos o arrastrar y soltar, generador algorítmico de carátulas abstractas en Canvas HTML5 y persistencia completa en IndexedDB.
- Experiencia de Playlists Estilo Spotify: Portada dinámica tipo collage 2x2 basada en las canciones de la lista, soporte para carátula propia personalizada, botones directos de «Reproducir todo» y «Aleatorio», y sección integrada para añadir nuevas pistas con un clic.
- Pack Demo Integrado con Síntesis de Estudio: Generador offline de 3 pistas completas («Aurora Synthwave», «Velvet Horizon», «Cyber Pulse») con portadas de alta definición y creación automática de lista de reproducción inicial.
- Diseño Liquid Glass y Dock Rebalanceado: Interfaz oscura obsidiana con efectos de desenfoque de fondo (backdrop-blur), dock inferior en rejilla de 12 columnas y herramientas de audio (ecualizador y visualizador) organizadas en popover flotante sin colisión visual.
- Navegación de Biblioteca con Historial: Inicio con accesos a escuchas recientes, música añadida y playlists; rutas internas para playlists, artistas y álbumes, compatibles con Atrás/Adelante y enlaces directos.
- Búsqueda Contextual y Filtros Compartibles: La búsqueda se adapta a la sección activa y conserva texto y filtros de género/formato en la URL para restaurar la vista.
- Letras Sincronizadas (.LRC): Analizador integrado con resaltado interactivo estilo karaoke, desplazamiento centrado automático (auto-scroll) y salto temporal al hacer clic sobre cualquier verso.
- Ecualizador Paramétrico de 5 Bandas: Filtros Web Audio Biquad a 60 Hz, 250 Hz, 1 kHz, 4 kHz y 16 kHz con rango de ganancia de -12 dB a +12 dB, presets integrados y capacidad de guardar presets personalizados del usuario.
- Visualizador de Audio en Tiempo Real (Canvas 60fps): 4 modos de visualización reactiva (Barras de frecuencia, Osciloscopio, Radial 360° y Pulso reactivo), con soporte para pantalla completa.
- Waveform Scrubber Interactivo: Barra de progreso con silueta de onda de audio, previsualización de tiempo al pasar el cursor y búsqueda de posición suave.
- Persistencia Completa en IndexedDB: Almacenamiento local mediante Dexie.js para biblioteca, pistas de audio (blobs), favoritos, metadatos y listas de reproducción.
- Reanudación de Sesión: Guarda localmente la pista activa, su posición, cola e historial reciente; al volver a abrir BeatNest, la reproducción espera a que el usuario pulse Reanudar.
- Respaldo JSON de metadatos: Exporta playlists, favoritos, letras y metadatos. El archivo no incluye audio; para restaurar la reproducción hay que volver a importar los archivos locales.
- Listas Inteligentes Dinámicas: «Más reproducidas» se ordena por actividad, «Añadidas recientemente» por fecha de importación y «Pistas largas» filtra duraciones superiores a cinco minutos.
- Cola de Reproducción Avanzada: Panel lateral deslizable para reordenar canciones, guardarla como playlist y limpiar pistas siguientes; los controles también están disponibles en pantallas táctiles.
- Edición Masiva y Bibliotecas Grandes: Selecciona varias pistas para actualizar artista, álbum o género; las listas extensas virtualizan filas y cargan carátulas de forma diferida.
- Exportación Estándar .M3U: Descarga de listas de reproducción en formato
.m3ucon metadatos extendidos para interoperabilidad con reproductores externos como VLC. - Filtros por Formato y Género: Filtrado instantáneo por contenedor de audio (MP3, FLAC, WAV, OGG, M4A) y chips de género interactivos.
- Mini Reproductor Flotante: Modo compacto para mantener el control de la música mientras trabajas en otras pestañas.
- Atajos de Teclado Globales y Paleta de Comandos: Control inmediato mediante teclado y paleta universal accesible con
Ctrl + K. - PWA Lista para Instalación: Soporte sin conexión a internet y manifiesto web.
| Capa | Tecnología |
|---|---|
| Entorno y Build | Vite 8 + TypeScript |
| Framework UI | React 19 |
| Estilos y Tema | Tailwind CSS v4 |
| Gestión de Estado | Zustand |
| Motor de Audio | Web Audio API + HTMLAudioElement |
| Visualización | HTML5 Canvas + AnalyserNode (FFT) |
| Extracción de Metadatos | music-metadata-browser |
| Persistencia Local | Dexie.js + IndexedDB |
| Acceso al Sistema de Archivos | File System Access API |
| Iconografía | Lucide React |
Para profundizar en el diseño técnico, la API interna y las funcionalidades, consulta los documentos de la carpeta docs/:
- docs/APRENDIZAJES_Y_TECNOLOGIAS.md: Justificación técnica exhaustiva de cada herramienta del stack y desafíos de ingeniería superados (Web Audio API, Canvas a 60fps, IndexedDB, etc.).
- docs/ARCHITECTURE.md: Diagrama de flujo, separación de stores, servicios de dominio, composición de la biblioteca, pipeline de audio y modelo de persistencia.
- docs/FEATURES.md: Detalle exhaustivo de cada funcionalidad, bandas del ecualizador, crossfade, letras y atajos de teclado.
- docs/API_REFERENCE.md: Modelos de datos (
Track,Playlist), singletonAudioEngine, stores y componentes de biblioteca. - docs/DEVELOPMENT.md: Configuración de desarrollo local, responsabilidades de módulos y convenciones de diseño.
git clone https://github.com/HugoAdama/BeatNest.git
cd BeatNest
npm installnpm run devAbre tu navegador en http://localhost:5173/.
npm run build| Tecla | Acción |
|---|---|
Espacio |
Reproducir / Pausar |
← / → |
Rebobinar / Avanzar 5 segundos |
↑ / ↓ |
Subir / Bajar volumen (+/- 5%) |
M |
Silenciar / Activar sonido |
L |
Marcar / Desmarcar favorito |
S |
Alternar modo aleatorio (Shuffle) |
R |
Ciclo de repetición (Off / All / One) |
V |
Abrir / Cerrar visualizador Canvas |
E |
Abrir / Cerrar ecualizador paramétrico |
T |
Abrir / Cerrar letras sincronizadas |
? |
Ver modal de atajos de teclado |
Esc |
Cerrar modales o ventanas activas |
El proyecto incluye el flujo de trabajo automatizado de GitHub Actions en .github/workflows/deploy.yml. Cada push a la rama main compila y publica automáticamente la versión más reciente en:
https://hugoadama.github.io/BeatNest/
Distribuido bajo la licencia MIT. Tus archivos y tu música pertenecen exclusivamente a tu dispositivo.