Carrusel 3D de emisoras
Cada tarjeta muestra el logo, el nombre, el género y el país (si los indicas) y un distintivo «EN VIVO». Se recorre con clic, arrastre o las flechas del teclado.
En vivo · versión 1.0.1
Cinematic 3D Radio
Tus emisoras en directo, presentadas en un carrusel 3D cinematográfico. Cada tarjeta es una emisora: la eliges, pulsas «Escuchar» y suena, con un panel propio y una barra de controles que sigue contigo. Disponible como versión web (HTML, CSS y JavaScript) y como plugin para WordPress.
Un solo paquete con las dos versiones: web (HTML, CSS y JavaScript) y plugin de WordPress.
- Streams en directo por HTTPS
- Sin servicios externos ni cookies
- Escritorio y móvil
01Qué es
Un reproductor pensado para la radio en directo
Cinematic 3D Radio reproduce emisoras en directo a partir de la dirección de su stream (Icecast, SHOUTcast…). No es un reproductor de canciones: no hay duración, barra de avance ni «repetir pista». Al pausar se corta la conexión y al reanudar vuelves al directo.
Se presenta con el diseño de la familia Cinematic 3D: tarjetas en perspectiva con el logo de cada emisora, un panel que se abre desde la tarjeta y una barra inferior que mantiene la emisora sonando mientras exploras.
Versión webHTML, CSS y JavaScript. Las emisoras se escriben en un archivo de configuración.
Plugin WordPressLas emisoras se gestionan en el escritorio y se insertan con un shortcode.
Mismo reproductorAmbas versiones comparten exactamente los mismos estilos y lógica.
Sin inventar datosMuestra el nombre de la emisora y «EN VIVO», no la canción que suena.
02Características
Todo lo que hace, comprobado
Cada función de esta lista está en las dos versiones y se ha verificado en pruebas reales del reproductor.
Panel de la emisora
Al pulsar «Escuchar» se abre un panel con el logo, el nombre, los datos de la emisora, su estado y los controles. Al cerrarlo, la emisora sigue sonando.
Barra de controles
Escuchar o pausar, emisora anterior y siguiente, emisora aleatoria, lista, volumen y silencio. El volumen elegido se recuerda.
Estados en directo
Siempre sabes qué pasa: conectando, en directo, en pausa, reconectando o error. Si la emisora tarda en responder, también lo indica.
Reconexión automática
Si la señal se cae, reintenta tres veces con esperas crecientes. Sin conexión a Internet, espera a que vuelva la red y reconecta.
Errores explicados
Si una emisora falla, explica por qué: dirección inexistente, página web en lugar de audio, lista .m3u/.pls, HLS, stream http en una web https o dirección con usuario y contraseña.
Lista con búsqueda
Busca por nombre, país o género, sin importar tildes ni mayúsculas. Intro sintoniza el primer resultado.
Emisoras favoritas
Cada visitante marca sus favoritas y las filtra en la lista con «Solo favoritas». Se guardan en su navegador.
Escritorio y móvil
Se adapta al ancho disponible sin desplazamiento horizontal. Con la opción «reducir movimiento» del sistema, el panel se abre sin animación 3D.
03Demostración en vivo
Escúchalo con una emisora real
Las dos demos usan la misma emisora en directo, XY905. No son capturas: es el reproductor funcionando.
HTML · CSS · JavaScript
Demo Web
La página de ejemplo del paquete web, con su archivo de configuración apuntando a la emisora.
Probar demo Web
Plugin · WordPress
Demo WordPress
Un WordPress real con el plugin 1.0.1 instalado desde su paquete. La emisora se dio de alta en el escritorio y se muestra con el shortcode [cinematic3d_radio].
La radio empieza cuando tú lo pides. Los navegadores no dejan que una página suene sola: pulsa la tarjeta central o «Escuchar». Comprueba también el volumen de tu dispositivo. La emisora de la demo es un servicio externo: si en algún momento no emite, el reproductor lo indicará.
04Dos versiones independientes
¿Web o WordPress?
El reproductor es el mismo. Cambia cómo se instala y cómo se gestionan las emisoras.
| Aspecto | Versión web | Plugin WordPress |
|---|---|---|
| Para quién | Webs estáticas, landing pages y proyectos propios, sin WordPress ni base de datos | Sitios WordPress 6.2 o superior (PHP 7.4 o superior) |
| Dónde se añaden las emisoras | En configuracion/emisoras.js, con cualquier editor de texto | En el escritorio: «Cinematic 3D Radio → Añadir emisora» |
| Logo de la emisora | Ruta o dirección de la imagen | Biblioteca de Medios o dirección de la imagen |
| Mostrar el reproductor | Bloque <section class="c3r"> en tu HTML | Shortcode [cinematic3d_radio], con ids, genero y limite opcionales |
| Apariencia | Colores, imagen de fondo, contraste, logo de respaldo y columna de acciones en la configuración | Página «Apariencia»: colores, imagen de fondo, oscurecimiento, logo de respaldo y columna de acciones |
| Comprobaciones al configurar | Avisos en la consola del navegador | Botón «Probar stream» y avisos al guardar (dirección no válida, lista, HLS, http en web https, credenciales) |
| Varios reproductores por página | Sí, cada uno con su configuración; solo suena uno a la vez | Sí, varios shortcodes; solo suena uno a la vez |
| Prueba local | Demo con emisoras de prueba en Windows («Abrir demo Radio.bat», requiere Node.js) | — |
| Desinstalación | Borrar la carpeta | Desactivar conserva los datos; borrar elimina emisoras y ajustes (también en multisitio) |
05Cómo funciona
De la instalación a la primera emisora
En tres pasos
- Extrae el paquete de la versión web.
- Escribe tus emisoras en
configuracion/emisoras.js: el nombre y la dirección directa del stream son obligatorios; logo, país, género y descripción son opcionales. - Sube a tu hosting con HTTPS
index.html,assets/yconfiguracion/.
emisoras: [
{
nombre: 'Mi Radio',
stream: 'https://mi-servidor.com:8000/stream',
genero: 'Pop',
pais: 'España'
}
]En cuatro pasos
- Plugins → Añadir nuevo → Subir plugin, elige el ZIP y actívalo.
- Cinematic 3D Radio → Añadir emisora: escribe el nombre, pega la dirección del stream y pulsa Probar stream.
- Si quieres, elige el logo, el género, el país y el orden. Después publica la emisora.
- Pega el shortcode en un bloque «Código corto» de cualquier página:
[cinematic3d_radio]06Galería
Capturas reales de la versión 1.0.1
Sin retoques. Pulsa una imagen para ampliarla.
Las capturas con varias emisoras se tomaron con las emisoras de prueba locales que incluye el paquete web (audio original de uso libre). Las del escritorio de WordPress proceden de una instalación de prueba. El panel de la demo pública no está abierto a visitantes.
07Compatibilidad y límites
Lo que funciona, y lo que depende de cada emisora
Requisitos y formatos
- La dirección directa del stream (Icecast, SHOUTcast…), no la página web de la radio.
- En una web
https://, el stream también debe serhttps://: los navegadores bloquean la mezcla, y el reproductor lo explica. - MP3 y AAC en los navegadores actuales; Ogg/Opus según el navegador.
- Versión web: hosting con HTTPS. Plugin: WordPress 6.2+ y PHP 7.4+.
Límites conocidos
- No se garantiza que cualquier URL de radio funcione: depende del servidor, del formato y de su disponibilidad.
- Los streams HLS (
.m3u8) no son compatibles. Las listas.m3u/.plshay que abrirlas y copiar la dirección que contienen. - No muestra la canción ni el artista que suenan: solo el nombre de la emisora y «EN VIVO».
- Probado en Brave y Microsoft Edge (motor Chromium). Firefox y Safari aún no se han probado.
08Preguntas frecuentes
Dudas habituales
¿Por qué no suena nada al abrir la demo?
Los navegadores no permiten que una página reproduzca audio sin una acción del visitante. Pulsa la tarjeta central o «Escuchar». Si aun así no oyes nada, revisa el volumen y el modo silencio de tu dispositivo.
¿Funciona con cualquier emisora de radio?
Con la mayoría de las que emiten en MP3 o AAC desde una dirección directa, pero no se puede garantizar con todas: depende del servidor de la emisora. En una web https://, el stream también debe ser https://. Los streams HLS (.m3u8) no son compatibles. Si una emisora no funciona, el reproductor explica el motivo.
¿Muestra la canción que está sonando?
No. Muestra el nombre de la emisora, «EN VIVO» y los datos que tú indiques (logo, género, país y descripción). No inventa canciones, artistas ni carátulas.
¿Qué pasa si la emisora se corta?
El reproductor intenta reconectar tres veces, con esperas crecientes. Si no hay conexión a Internet, espera a que vuelva la red. Si no consigue recuperar la señal, lo indica para que puedas intentarlo de nuevo.
¿Puedo poner muchas emisoras?
Sí. Cada emisora es una tarjeta del carrusel. En WordPress, un shortcode puede mostrar hasta 100 emisoras, y puedes filtrarlas con ids o genero. La demo pública usa una sola emisora real.
¿Necesito WordPress?
No. La versión web funciona en cualquier hosting con HTTPS, sin base de datos.
¿Dónde se guardan las favoritas y el volumen?
Solo en el navegador de cada visitante. El reproductor no usa cookies ni analítica, y no envía nada a tu servidor.
¿Puedo usar una dirección de stream con usuario y contraseña?
No. Quedaría a la vista de cualquier visitante, así que el reproductor no la usa y el plugin no la guarda. Usa la dirección pública de tu emisora.
¿Puedo entrar al panel de la demo de WordPress?
No. El panel de administración de la demo es privado. Puedes ver el editor de emisoras en la galería.
¿Ya se puede comprar?
Sí. Se vende como un solo paquete de US$60 que incluye las dos versiones, web y plugin de WordPress, en un único ZIP. Ver el paquete en la tienda.
09Comprar
Las dos versiones, en un solo paquete
Cinematic 3D Radio — Web + WordPress (Paquete Completo): un solo ZIP con las dos versiones 1.0.1 y las instrucciones para empezar, por US$60.
Cinematic 3D Radio — Web
Para webs sin WordPress. Incluye la demo local con emisoras de prueba.
✓ Incluida en el paquete
Cinematic 3D Radio — WordPress
Gestiona tus emisoras desde el escritorio e insértalas con un shortcode.
✓ Incluida en el paquete