Este proyecto implementa un reproductor de música web moderno e interactivo con características avanzadas que rivalizan con aplicaciones profesionales como Spotify y Apple Music. Desarrollado con HTML5, CSS3 y JavaScript ES6+, la aplicación ofrece una experiencia de usuario premium con sincronización de letras, efectos de audio, temas visuales y controles avanzados.
- 🎵 Reproducción de Audio: Soporte completo para archivos MP3 con controles avanzados
- 📝 Letras Sincronizadas: Visualización de letras en tiempo real con sincronización perfecta
- 🎬 Videos de Fondo: Videos de fondo dinámicos que cambian con cada canción
- 🎨 Temas Visuales: 4 temas diferentes (Default, Dark, Neon, Sunset)
- 🎛️ Efectos de Audio: Reverb, Bass Boost y Treble en tiempo real
- ✨ Efectos Visuales: Partículas animadas y waveform de audio
- ⌨️ Atajos de Teclado: Control completo desde el teclado
- 📱 Diseño Responsive: Adaptable a todos los dispositivos
- ✅ Reproducción de múltiples formatos de audio
- ✅ Sincronización perfecta de letras con timestamps
- ✅ Videos de fondo dinámicos por canción
- ✅ Controles de reproducción avanzados (play, pause, next, prev)
- ✅ Control de volumen y velocidad de reproducción
- ✅ Modos de repetición (none, one, all) y shuffle
- ✅ Sistema de Temas: 4 temas visuales completamente personalizables
- ✅ Efectos de Audio Profesionales: Web Audio API para efectos en tiempo real
- ✅ Sistema de Partículas: Efectos visuales animados
- ✅ Waveform en Tiempo Real: Visualización del audio que se mueve con la música
- ✅ Atajos de Teclado: Control completo desde el teclado
- ✅ Persistencia de Configuración: Las configuraciones se guardan automáticamente
- ✅ Modal de Configuración Épico: Interfaz completa de personalización
- HTML5: Estructura semántica y moderna
- CSS3:
- Grid y Flexbox para layouts complejos
- Variables CSS (Custom Properties)
- Animaciones y transiciones avanzadas
- Diseño responsive con media queries
- Efectos visuales y gradientes
- JavaScript ES6+:
- Web Audio API para efectos de audio
- Canvas API para visualizaciones
- LocalStorage para persistencia
- Event handling avanzado
- DOM manipulation moderna
- Git y GitHub: Control de versiones y despliegue
- Font Awesome: Iconografía moderna
- Google Fonts: Tipografía Poppins
arutia-music/
│
├── 📄 index.html # Archivo HTML principal
├── 📁 style.css # Estilos CSS modernos y responsivos
├── 📁 script.js # Lógica JavaScript completa
├── 📁 audio/ # Archivos de audio MP3
├── 📁 videos/ # Videos de fondo MP4
├── 📄 README.md # Documentación en español
├── 📄 README_EN.md # Documentación en inglés
└── 📄 LICENSE # Licencia MIT
- Haz clic en "Enter Music World" para comenzar
- Selecciona una canción de la biblioteca
- Usa los controles de reproducción (play, pause, next, prev)
- Ajusta el volumen y velocidad según prefieras
- 📝 Letras: Toggle el botón de ojo para mostrar/ocultar letras
- 🎨 Temas: Abre configuración para cambiar el tema visual
- 🎛️ Efectos: Ajusta reverb, bass y treble en tiempo real
- ✨ Visuales: Activa partículas y waveform para efectos épicos
- Space: Play/Pause
- ←/→: Anterior/Siguiente canción
- ↑/↓: Subir/Bajar volumen
- L: Mostrar/Ocultar letras
- M: Mute/Unmute
- Primario: #e94560 (Rosa vibrante)
- Secundario: #533483 (Púrpura)
- Acento: #16213e (Azul oscuro)
- Fondo: Gradientes dinámicos por tema
- 🎯 Glassmorphism: Efectos de cristal y transparencias
- 🎨 Animaciones Suaves: Transiciones de 0.3s en todos los elementos
- 📱 Responsive Design: Layout adaptativo con CSS Grid y Flexbox
- 🎭 Efectos Hover: Interacciones visuales avanzadas
- ♿ Accesibilidad: Contraste adecuado y navegación por teclado
// App State Management
let currentSongIndex = 0;
let isPlaying = false;
let settings = {
theme: 'default',
audioEffects: { reverb: 0, bass: 0, treble: 50 },
visualEffects: { particles: false, waveform: false, blur: true },
playback: { autoplay: true, crossfade: false, lyricsAuto: true }
};
// Core Functions
- init() // Inicialización completa
- loadSong() // Carga de canciones
- playTrack() // Reproducción
- renderLyrics() // Renderizado de letras
- applySettings() // Aplicación de configuraciones- 🔧 Modular: Código organizado en funciones específicas
- 🛡️ Robusto: Manejo completo de errores y estados
- ⚡ Eficiente: Optimizado para performance
- 📖 Legible: Comentarios detallados y nombres descriptivos
- 🔄 Mantenible: Estructura clara y extensible
El reproductor incluye una colección diversa de canciones con letras sincronizadas:
- Bandida - C.R.O (Bardero)
- Hotel - Montel Fish (÷ Divide)
- One of the Girls - The Weeknd (The Highlights)
- SleepMode - Bones (TSoftwareUpdate1.0)
- Let Go - Ark Patrol (Soundcloud EPs)
- I Wanna Be Yours - Arctic Monkeys (AM)
- Coffee for Your Head - Powfu feat. beabadoobee
- Ginseng Strip 2002 - Yung Lean
| Nombre | Info |
|---|---|
| 🧑 Daniel Santiago | Estudiante de Campuslands |
| 🎓 Formación | Desarrollo Web Full Stack |
| 💻 Enfoque | JavaScript, React, Node.js |
| 📍 Ubicación | Piedecuesta, Santander - Colombia |
:root {
--primary-color: #e94560;
--secondary-color: #533483;
--accent-color: #16213e;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
--transition: all 0.3s ease;
}
.music-player-box {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
border-radius: 20px;
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
}function applyAudioEffects() {
if (!audioContext || !reverbNode || !bassNode || !trebleNode) {
return;
}
try {
reverbNode.gain.value = settings.audioEffects.reverb / 100;
bassNode.frequency.value = 100 + (settings.audioEffects.bass * 2);
trebleNode.frequency.value = 2000 + (settings.audioEffects.treble * 20);
} catch (error) {
console.log('Error applying audio effects:', error);
}
}Este proyecto representa la evolución del desarrollo web frontend hacia aplicaciones de nivel profesional. La implementación de un reproductor de música con características avanzadas como sincronización de letras, efectos de audio en tiempo real y visualizaciones dinámicas demuestra el potencial de las tecnologías web modernas para crear experiencias de usuario premium.
- ✅ Arquitectura Sólida: Código bien estructurado y mantenible
- ✅ UX Premium: Interfaz profesional y visualmente atractiva
- ✅ Performance Optimizada: Reproducción fluida y efectos en tiempo real
- ✅ Responsive Design: Funciona perfectamente en todos los dispositivos
- ✅ Características Avanzadas: Efectos de audio, visualizaciones y temas
- Web Audio API para efectos de audio profesionales
- Canvas API para visualizaciones en tiempo real
- Gestión avanzada de estado en aplicaciones web
- Implementación de efectos visuales complejos
- Sincronización de contenido multimedia
- Persistencia de datos con LocalStorage
El proyecto no solo cumple con los requisitos funcionales de un reproductor de música, sino que también establece un estándar de calidad en términos de diseño, usabilidad y experiencia de usuario, rivalizando con aplicaciones comerciales del mercado.
Repositorio: GitHub – daaaaaniel Music Player
Despliegue: GitHub Pages – daaaaaniel Music
- 📧 Email: vinascodaniel9@gmail.com
- 📱 Teléfono: 315 6990555
"La música y el código son el mismo lenguaje universal. Ambos crean experiencias que conectan con las emociones humanas y transforman la forma en que interactuamos con la tecnología." - Daniel Santiago
✔️ 🎵 Reproducción Profesional: Controles avanzados y efectos de audio
✔️ 📝 Letras Sincronizadas: Visualización perfecta con timestamps
✔️ 🎬 Videos Dinámicos: Fondo que cambia con cada canción
✔️ 🎨 4 Temas Visuales: Personalización completa de la interfaz
✔️ 🎛️ Efectos de Audio: Reverb, Bass y Treble en tiempo real
✔️ ✨ Efectos Visuales: Partículas y waveform animados
✔️ ⌨️ Atajos de Teclado: Control completo desde el teclado
✔️ 💾 Persistencia: Configuraciones guardadas automáticamente
✔️ 📱 100% Responsive: Optimizado para todos los dispositivos
✔️ 🚀 Performance: Código optimizado y reproducción fluida
Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.
Desarrollado con ❤️ por Daniel Santiago Vinasco
🔥 Visita mi GitHub 🚀