1. Introducción y Motivación
En muchas ocasiones, las aplicaciones multimedia de terceros vienen saturadas de rastreadores, publicidad o interfaces pesadas. Con el objetivo de disponer de una herramienta propia, rápida y completamente bajo mi control para la gestión de URLs de audio y video online, desarrollé un reproductor web modular enfocado en la experiencia de usuario y la ligereza.
El proyecto prescinde por completo de frameworks pesados, apostando por HTML5, CSS3 y Vanilla JavaScript optimizados para ejecutarse de forma instantánea en cualquier navegador moderno.
2. Arquitectura y Características Clave
La aplicación se estructuró bajo un modelo de componentes lógicos ligeros:
- Control de Medios Nativo: Integración directa con las etiquetas multimedia de HTML5 para garantizar compatibilidad total con códecs de audio y video en streaming.
- Gestión Dinámica de Playlists: Capacidad para crear, organizar y alternar múltiples listas de reproducción de manera fluida.
- Persistencia Local (LocalStorage): Almacenamiento automático del estado de las listas y pistas recientes directamente en el navegador del usuario, evitando pérdida de datos al recargar la página.
- Portabilidad JSON: Funcionalidad nativa para exportar listas de reproducción completas a un archivo JSON local y volver a importarlas en cualquier otro dispositivo.
3. Desafíos Técnicos y Soluciones
A. Persistencia Robusta sin Backend
Al tratarse de una aplicación puramente estática, el almacenamiento dependía exclusivamente de los recursos del navegador.
Solución: Implementación de una capa de abstracción sobre localStorage con serialización JSON estructurada, manejando excepciones de cuota superada y validación de esquemas al recuperar los datos.
B. Importación y Validación de Archivos JSON
Permitir al usuario cargar ficheros de listas externos presentaba riesgos de errores de sintaxis o estructuras de datos incompatibles.
Solución: Creación de un validador previo en JavaScript que comprueba la presencia de las claves obligatorias (como títulos y URLs válidas) antes de fusionar los datos con el estado actual.
C. Interfaz Limpia y Adaptable
Mantener una estética coherente con el resto del ecosistema del portafolio.
Solución: Diseño basado en CSS Grid y Flexbox con una paleta oscura moderna, garantizando una excelente usabilidad tanto en escritorios como en dispositivos móviles.
4. Conclusiones y Código
Este desarrollo demuestra que es posible construir herramientas web potentes, útiles y con total soberanía sobre los datos propios utilizando únicamente tecnologías web nativas, sin dependencias de terceros.
¿Te ha resultado útil este artículo?
☕ Invítame a un café en Ko-fi