Cinematic 3D MP3 — JavaScript

Cinematic 3D MP3 — JavaScript

Un reproductor de música MP3 con presentación cinematográfica en archivos estáticos: sin WordPress, sin base de datos y sin servicios externos. Tus canciones aparecen en un carrusel 3D de carátulas, se abren en la vista «Ahora suena» y siguen sonando en el dock mientras el visitante explora.

Para quién: músicos, productores, estudios, sellos y cualquier web que quiera presentar canciones propias con un reproductor cuidado, integrándolo en una página HTML.

Qué incluye

• Carrusel 3D de carátulas: portada central destacada y laterales en perspectiva. Navegación con clic o toque, arrastre, trackpad o rueda horizontal y teclado (flechas, Inicio y Fin).
• Vista «Ahora suena»: al pulsar la portada central empieza la canción y se abre un panel con título, artista, álbum, descripción, barra de progreso y controles. Al cerrarlo, la música sigue sonando en el dock.
• Dock de controles: reproducir y pausar, detener, anterior, siguiente, barra de progreso para saltar a cualquier punto, volumen y silencio, lista y aleatorio.
• Avance automático, repetición y aleatorio: al terminar una canción pasa a la siguiente; repetir toda la lista o una canción; aleatorio sin repetir hasta acabar la lista.
• Lista con buscador: busca por título, artista o álbum sin distinguir tildes ni mayúsculas.
• Portadas leídas del propio MP3 (novedad 1.1.0): si el MP3 trae carátula incrustada (ID3v2.2, 2.3 o 2.4), se muestra sola. Prioridad: portada elegida → portada del MP3 → portada de respaldo. Acepta JPEG, PNG, GIF y WebP (nunca SVG) y lee solo la etiqueta, no la canción entera. Un MP3 alojado en otro dominio solo puede leerse si ese servidor lo permite (CORS); si no, se usa la portada de respaldo.
• Columna de acciones opcional: favoritos (guardados solo en el navegador del visitante), lista, repetir y compartir.
• Errores explicados: enlace inexistente, archivo que no es audio, archivo dañado o problema de red, con la carátula marcada con ⚠.
• Controles del sistema: integra Media Session, de modo que, donde el navegador lo admite, título, artista y carátula aparecen en los controles multimedia del dispositivo.
• Varios reproductores por página: cuando uno empieza a sonar, los demás se pausan.
• Apariencia: colores de fondo, texto y acento; imagen de fondo con contraste ajustable; columna de acciones visible u oculta; portada de respaldo. Adaptado a escritorio y móvil, manejable con teclado y respeta la preferencia «reducir movimiento».
• Configuración en un solo archivo: configuracion/lista.js, con claves en español para cada canción (MP3, título, artista, álbum, descripción, datos breves, etiqueta y portada opcional) y para la apariencia. Un comentario en el archivo explica cada campo.

Qué recibes

El ZIP cinematic-3d-mp3-web-v1.1.0.zip con index.html, la carpeta assets (CSS, JavaScript, tipografía y portada de respaldo), configuracion/lista.js, cinco pistas MP3 de demostración con su carátula incrustada (de uso libre), una guía (LEEME.md) y un lanzador para probarlo en Windows.

Instalación

Extrae el ZIP y edita configuracion/lista.js con cualquier editor de texto. Para publicarlo, sube la carpeta a tu hosting con HTTPS (sin Abrir demo MP3.bat ni servidor-local.js, que solo sirven para la prueba local) y abre index.html. Para probarlo en tu equipo, haz doble clic en «Abrir demo MP3.bat» (requiere Node.js solo para esa prueba). Para poner varios reproductores en una página, copia su bloque y apúntalo a otra lista.

Requisitos y funcionamiento

Hosting con HTTPS que admita peticiones por rangos (los hostings habituales lo hacen), necesarias para saltar dentro de una canción y leer las portadas. Navegador actual; probado en Brave (Chromium) en escritorio, tableta y móvil. Los MP3 alojados en otros dominios deben permitir su reproducción desde tu web. En iOS el volumen lo controla el sistema. El indicador de barras del dock es una animación de estado, no un analizador de audio. Usa música propia o con permiso para publicarla.

Demostración: cinematicmp3.creanexo.com (versión JavaScript).