Reproductor de archivos MP3 · versión 1.1.0
Tus canciones en un carrusel de carátulas en perspectiva, con una vista «Ahora suena» y una barra de controles que sigue sonando mientras exploras. Las carátulas se leen del propio MP3. Pruébalo de verdad en sus dos versiones: web (HTML, CSS y JavaScript) y plugin para WordPress.
Demostraciones en vivo
No son capturas ni vídeos: cada enlace abre el reproductor funcionando con sus cinco pistas de demostración. Pulsa la carátula central para escuchar.
La página de demostración que incluye el paquete web, publicada tal cual: un archivo HTML, sus estilos y scripts, y la lista de canciones en configuracion/lista.js.
Un WordPress real con el plugin 1.1.0 instalado desde su paquete original. La lista se inserta en la página con su shortcode. Incluye una segunda página con los MP3 subidos a la Biblioteca de Medios.
El sonido empieza cuando tú lo pides. Los navegadores no permiten que una página reproduzca audio por sí sola, así que la música arranca al pulsar la carátula o el botón de reproducir. Comprueba también el volumen de tu dispositivo.
Características
Las dos versiones comparten exactamente los mismos archivos de estilo y de lógica del reproductor, así que se ven y se comportan igual en una web y en WordPress.
Las portadas se colocan en perspectiva. Pulsa una lateral para traerla al centro, arrástralas o usa las flechas del teclado.
Al pulsar la carátula central, la canción empieza y se abre un panel con carátula, 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 avanzar o retroceder dentro de la canción, volumen y silencio.
Al terminar una canción empieza 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 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 canciones como favoritas. Se guardan en su navegador y siguen marcadas cuando vuelve.
Se adapta al ancho disponible: en móvil, los controles y el panel se reorganizan sin desplazamiento horizontal.
Lee la imagen incrustada en el MP3 (ID3v2.2, v2.3 y v2.4, marcos APIC y PIC). Si no hay ninguna, usa una portada de respaldo. Cómo funciona.
Si un enlace falla, explica el motivo (por ejemplo, que el archivo no existe o no es audio), marca la carátula con ⚠ y permite seguir con las demás canciones.
1.1.0 Carátulas automáticas
Muchos MP3 llevan la carátula guardada dentro del archivo, en su etiqueta ID3. El reproductor la encuentra y la muestra, así que no hace falta subir las portadas aparte. En las dos demos, las carátulas salen de los propios MP3.
Si la portada manual no carga, se intenta la del MP3 antes de pasar a la de respaldo.
Dos versiones independientes
El reproductor es el mismo; cambia cómo se instala y cómo se gestionan las canciones.
Para integrar en cualquier proyecto web con HTTPS: sin WordPress, sin base de datos y sin servicios externos. Las canciones y la apariencia se configuran en un archivo de texto.
Un plugin con su propio menú «Listas MP3»: creas y editas listas en el escritorio de WordPress, eliges los MP3 y las portadas de la Biblioteca de Medios e insertas cada lista con un shortcode.
Cómo funciona
configuracion/lista.js: solo la dirección del MP3 es obligatoria; título, artista, álbum y portada son opcionales.index.html.canciones: [
{
mp3: 'musica/mi-cancion.mp3',
titulo: 'Mi canción',
artista: 'Mi grupo'
// portada: 'portadas/mi-portada.jpg' (opcional)
}
]https://…/cancion.mp3).[cinematic3d_mp3 id="123"]Galería
Tomadas del reproductor funcionando, sin retoques. Pulsa una imagen para ampliarla.
Las capturas del editor de WordPress proceden de una instalación de prueba; el panel de administración de la demo pública no está abierto a visitantes.
Preguntas frecuentes
Los navegadores limitan la reproducción automática: una página no puede empezar a sonar sin una acción del visitante. Pulsa la carátula central o el botón de reproducir y la música empezará. Si aun así no oyes nada, revisa el volumen y el modo silencio del dispositivo.
El reproductor es el mismo (mismos archivos de estilo y de lógica). En la versión web, las canciones 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 web funciona en cualquier hosting con HTTPS, sin base de datos.
No. La demo muestra el reproductor tal como lo ven los visitantes de una web; el panel de administración es privado. El editor de listas aparece en la galería.
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. Una portada manual siempre tiene prioridad.
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, se usa la portada de respaldo y la canción suena con normalidad.
Solo en el navegador de cada visitante. No se envían a ningún servidor.
No. Este sitio es una demostración. Las dos versiones están disponibles en la tienda: versión web y versión WordPress.
Las cinco pistas y sus carátulas son originales, creadas por programa para este producto y de uso libre (licencia de la demo). Cada pista dura unos 30 segundos.