# KIMOLIZER - Synthwave Audio Visualizer

by kimosabi | 2026

## Cómo usar

### 1. Tu propio audio
- Arrastra un archivo MP3 a la zona de drop
- O haz clic en "Seleccionar Archivo"

### 2. Micrófono
- Haz clic en "Usar Micrófono" para visualizar sonido ambiente

### 3. Demo
- Usa el botón "Demo Jamendo" para probar con música libre de derechos

### 4. URL externa (Dropbox, etc.)

#### Dropbox:
1. Sube tu MP3 a Dropbox
2. Crea un "Shared Link"
3. Pega el link en el campo de URL
4. Haz clic en "Cargar"

**Importante:** El link debe terminar en `?dl=0` o similar. 
El sistema lo convierte automáticamente a enlace directo.

#### Otros servicios compatibles:
- Cualquier URL directa a MP3 con CORS habilitado
- Internet Archive
- Servidores personales

#### Google Drive:
No funciona directamente por restricciones de CORS.
Alternativa: Descarga el archivo y súbelo a Dropbox o usa localmente.

## Para desarrolladores

### Estructura:
- `index.html` - Estructura y UI
- `style.css` - Estética synthwave (neon, scanlines, grid)
- `script.js` - Web Audio API + Canvas visualization

### Personalizar:
- Cambia colores en `:root` de style.css
- Modifica `draw()` en script.js para otros tipos de visualización
- Agrega más fuentes de audio en la función `loadTrack()`

## Roadmap futuro
- [ ] Integración con Suno/Udio (cuando tengan API)
- [ ] Más temas visuales
- [ ] Exportar video
- [ ] Modo fullscreen

Estructura de controles reorganizada:
Fila 1: Drop zone (arrastrar o buscar archivo MP3)
Fila 2: Micrófono | Demo | URL input (todos en línea)
Fila 3: Botón "Desenchufar Todo" (ancho completo, rojo oscuro)
Nuevos botones:
⏹ Stop - Al lado de play/pause, detiene y desenchufa
⏏ Desenchufar Todo - Rojo oscuro con hover/active, limpia todo el estado
⛶ Fullscreen - Esquina superior derecha del visualizador
Correcciones técnicas:
Función disconnectAll() completa que reinicia AudioContext, analizador y fuentes
Loop de animación se reinicia correctamente al cambiar de fuente
Ya no hay conflictos al cargar múltiples fuentes seguidas
Estética:
Drop zone más compacta (más espacio para visualizador)
Botón desenchufar con efectos hover/active en rojo intenso
Responsive: en móvil los controles se apilan verticalmente