Reproductor de música MP3 · versión 1.1.0
Tus canciones en un carrusel de carátulas en perspectiva, con una vista «Ahora suena» que crece desde la portada y un dock de controles que sigue sonando mientras exploras. Disponible como versión JavaScript para cualquier web y como plugin para WordPress.
Demostración
Lo que ves debajo es la versión JavaScript 1.1.0 funcionando con sus cinco pistas de demostración. Pulsa la carátula central para escucharla y abrir «Ahora suena». Las carátulas no están configuradas aparte: se leen de la imagen incrustada en cada MP3.
Audio de demostración original, creado por programa para este producto y de uso libre (licencia de la demo). Cada pista dura unos 30 segundos. Los favoritos se guardan solo en tu navegador.
Características
Las dos versiones comparten exactamente el mismo motor, estilos y tipografía, así que se comportan igual en una web estática y en WordPress.
Las portadas se colocan en perspectiva. Pulsa una lateral para traerla al centro, arrastra o desliza con el dedo, usa el trackpad o la rueda horizontal, o las flechas del teclado (Inicio y Fin van al principio y al final).
Al pulsar la carátula central, la canción empieza y un panel crece desde la portada con título, artista, álbum, descripción y controles. Al cerrarlo, la música sigue sonando.
Reproducir y pausar, detener (vuelve al inicio), anterior y siguiente, barra de progreso para saltar a cualquier punto, volumen y silencio. Las barras animadas indican el estado de reproducción; no analizan el sonido.
Al terminar una canción pasa a la siguiente. Repetir alterna entre desactivado, toda la lista y una canción. El modo aleatorio recorre la lista sin repetir hasta acabarla.
Una lista lateral con todas las canciones y un buscador por título, artista o álbum que no distingue tildes ni mayúsculas: «neon» encuentra «Neón». Intro reproduce el primer resultado.
Cada visitante puede marcar favoritos, que se guardan solo en su navegador. «Compartir» usa el menú de compartir del dispositivo o, si no existe, copia el enlace de la página.
Integra la API Media Session: donde el navegador la admite, el título, el artista y la carátula aparecen en los controles multimedia del sistema, con reproducir, pausar, detener, anterior, siguiente y saltar.
Si un enlace falla, explica el motivo: enlace inexistente (404), no es un archivo de audio, archivo dañado, problema de red o reproducción bloqueada. La carátula se marca con ⚠ y no se inventa una duración (--:--).
Puedes poner más de un reproductor en la misma página, cada uno con su lista. Cuando empieza a sonar uno, los demás se pausan: solo suena uno a la vez.
Nuevo Versión 1.1.0
Muchos MP3 llevan la carátula guardada dentro del archivo, en su etiqueta ID3. Desde la versión 1.1.0 el reproductor la encuentra y la muestra, así que no hace falta subir las portadas aparte.
Si la portada manual no carga, se intenta la del MP3 antes de pasar a la de respaldo.
Dos versiones
Mismo reproductor, dos formas de instalarlo. La demo de esta página es la versión JavaScript; no es una instalación de WordPress.
Para cualquier web con HTTPS: sin WordPress, sin base de datos y sin servicios externos. Toda la configuración está en un archivo de texto.
cinematic-3d-mp3-web-v1.1.0.zip.configuracion/lista.js con cualquier editor de texto (por ejemplo, el Bloc de notas).index.html. No subas Abrir demo MP3.bat ni servidor-local.js: solo sirven para probar en local.lista.jscanciones: [
{
mp3: 'musica/mi-cancion.mp3', // obligatorio
titulo: 'Mi canción',
artista: 'Mi grupo',
album: 'Primer disco',
datos: '2026 • Pop',
etiqueta: 'SENCILLO'
// portada: 'portadas/mi-portada.jpg' (opcional)
}
]mp3 es obligatorio; también admite descripcion. Si no pones portada, se usa la del MP3.fondo, texto, acento, imagenFondo, contraste (0 a 0.9), columnaAcciones y portadaRespaldo.<section class="c3m"…>, cambia su id y apunta data-config a otra lista.Abrir demo MP3.bat (necesita Node.js).Las listas se crean y se editan en el escritorio de WordPress, con la Biblioteca de Medios, y se insertan donde quieras con un shortcode.
cinematic-3d-mp3-wordpress-v1.1.0.zip.https://…/cancion.mp3. Desde la Biblioteca se completan título, artista y álbum si el archivo los trae.[cinematic3d_mp3 id="123"]https:// terminadas en .mp3.Los paquetes de instalación no se descargan desde esta página.
Galería
Tomadas del reproductor funcionando, sin retoques. Pulsa una imagen para ampliarla.
Las capturas de WordPress proceden de una instalación de prueba local (WordPress Playground).
Compatibilidad
Separamos lo que se ha comprobado de lo que todavía no.
Preguntas frecuentes
El reproductor es el mismo (mismos archivos de estilo y de lógica). Cambia cómo se gestionan las canciones: en la versión JavaScript se escriben en configuracion/lista.js; en WordPress se crean listas en el escritorio, con la Biblioteca de Medios, y se insertan con [cinematic3d_mp3 id="…"].
No. La versión JavaScript funciona en cualquier hosting con HTTPS, sin base de datos. La demo de esta página es esa versión.
Sí, con direcciones https://. Ese servidor debe permitir que el audio se reproduzca desde tu web. Para leer la portada incrustada, además tiene que permitir CORS; si no lo permite, se usa la portada de respaldo y la canción suena con normalidad.
Solo si el archivo trae una imagen incrustada válida (JPEG, PNG, GIF o WebP) y se puede leer. Si no, se muestra la portada de respaldo. Puedes indicar una portada manual, que siempre tiene prioridad.
Permiten pedir solo una parte del archivo. El reproductor las usa para saltar a otro punto de la canción y para leer la etiqueta ID3 sin descargar el MP3 entero. Los hostings habituales las admiten.
Sí, cada uno con su lista. Cuando uno empieza a sonar, los demás se pausan.
Solo en el navegador de cada visitante. No se envían a ningún servidor.
Sí. Las cinco pistas y sus carátulas se crearon por programa para este producto y son de uso libre. Para tu web, usa música propia o con permiso para publicarla.