Plugin de WordPress · sin Flash ni Java
El reproductor multimedia que se queda en tu web mientras navegas
Una barra fija de audio y video que reproduce MP3, MP4, streams HLS, YouTube y podcasts, organiza listas con buscador, y ahora cambia de skin o sale flotando de la página sin cortar el sonido.
- 1 plugin y un shortcode, sin código
- 13 listas de demostración
- 5 skins incluidos
Las imágenes son capturas reales del reproductor que incluye el plugin, tomadas por sus pruebas automáticas.
Funciones
Todo lo que hace, explicado por lo que te permite hacer
Cada función de esta página existe en el código del reproductor y se puede probar en la demo.
Una sola barra para casi cualquier origen
Mezcla en la misma lista tus propios archivos, streams y contenido de plataformas públicas. El reproductor deduce el tipo por la URL y, si un MP4 o un HLS resulta ser solo audio, lo detecta al cargarlo.
- MP3 y MP4Autoalojados, con salto si el servidor acepta Range.
- Archivos del equipoSe reproducen en el navegador sin subirse.
- HLS (.m3u8)Nativo o con hls.js; directos como «En directo».
- YouTubeVideos y listas públicas con la API IFrame oficial.
- Podcasts RSSEpisodios de audio o video de un feed.
- Apple PodcastsHasta 200 episodios recientes del catálogo público.
- Amazon S3Objetos públicos o URL prefirmadas; listado de buckets.
- Google DriveCon una clave de la API de Drive v3.
- Listas XML, M3U y HTMLDesde archivos o desde el propio marcado de la página.
Escuchar y navegar sin fricción
Reproducir, pausar, pasar de pista, saltar en la barra de progreso y ajustar o silenciar el volumen. El panel de pistas tiene un buscador que ignora acentos, y las duraciones se leen sin reproducir los archivos.
- Repetir toda la lista o la pista actual.
- Aleatorio que recorre cada pista una vez antes de repetir.
- Sin repetir, al terminar la lista se detiene en lugar de saltar a otra.
Temporizador de apagado
Detiene la reproducción a los 15, 30, 45, 60 o 90 minutos, o al terminar la pista. Antes de pausar baja el volumen durante 8 segundos y luego lo restaura. El botón muestra el tiempo restante.
Compartir una pista exacta
Genera un enlace que abre la página en esa pista y, si quieres, en el segundo actual, preparada sin sonar. Se copia, se envía con el menú nativo del sistema o por X, Facebook, WhatsApp y correo.
Visualizador real
Las barras sobre el reproductor se calculan en tiempo real con el analizador de Web Audio. No es una animación: si el audio no se puede analizar (sin CORS, YouTube o file://), no aparece.
Video, streams y YouTube
Los MP4 y los streams HLS se ven en un recuadro sobre la barra; un clic en el video lo pausa. Donde el navegador no reproduce HLS por sí mismo (por ejemplo, Firefox), se carga hls.js solo en ese momento. Con YouTube el video se mantiene visible incluso con la barra contraída, porque así lo exigen sus condiciones.
Cinco skins, un cambio instantáneo
Cada skin es un conjunto de variables CSS que cubre todo el reproductor: barra, controles, portada, progreso, volumen, lista, filas alternas, pista activa, foco, buscador, scrollbar y modo flotante. Cambiarlo no reinicia la pista. Con el selector activado, el visitante elige el suyo y se recuerda en su navegador.
Estos botones cambian el skin del reproductor real de la demo.
Sácalo de la página y sigue escuchando
El último icono de la barra convierte el reproductor en flotante. La pista, el segundo, la pausa, el volumen, el silencio, repetir, aleatorio y la lista se conservan: no se crea un segundo reproductor ni suena nada dos veces.
- Ventana independiente
- En Chrome y Edge 116+ de escritorio, y en Firefox con la API (comprobado en Firefox 157), se abre una ventana Document Picture-in-Picture que queda encima de las demás, también al cambiar de pestaña.
- Panel flotante
- En Safari, móviles o si el navegador bloquea la ventana, se convierte en un panel dentro de la página que se arrastra por su cabecera (o con las flechas del teclado) y nunca sale de la pantalla.
«Volver a la página», o cerrar la ventana, lo devuelve a su sitio. En la ventana independiente el video, si lo hay, se sigue viendo en la página.
Pensado también para el móvil y el teclado
En pantallas estrechas la barra pasa a tres filas, el botón de volumen abre un deslizante y los menús se ajustan al ancho. Con el teclado, Tab recorre los controles, las flechas se mueven por las listas y Escape cierra el menú o el panel y devuelve el foco. Los cambios se anuncian a los lectores de pantalla.
Predecible y honesto con los errores
- Nada suena al cargar: siempre hace falta pulsar reproducir.
- Un solo medio a la vez: al cambiar de pista o de proveedor, el anterior se detiene y se vacía. Con varios reproductores en la página, al empezar uno se pausan los demás.
- Errores explicados: se muestra el motivo, la pista queda marcada y basta con elegir otra. Una lista importada que falla ofrece «Reintentar».
- Contraer: la X deja solo dos botones pequeños y la reproducción continúa.
Demo en vivo
Pruébalo aquí mismo
Este es el reproductor del plugin, cargado por WordPress con sus archivos originales y las 13 listas de su demo. Pulsa reproducir: nada suena hasta entonces.
Atajos de la demo
Activan los mismos controles del reproductor:
Estado del reproductor
- Estado
- —
- Lista
- —
- Pista
- —
- Tiempo
- —
- Skin
- —
- Flotante
- —
Qué necesita cada lista
- Sin Internet: Sesión sintética, Videos de prueba, los dos HLS propios y las listas XML, M3U y HTML. Son medios creados para el proyecto y servidos desde esta misma web.
- Con Internet: YouTube, podcast de la NASA (RSS y Apple), stream de prueba de Mux y grabación pública de MBARI en Amazon S3.
- Errores a propósito: la pista 7 de «Lista mixta» no existe, y «Lista vacía» no tiene pistas.
- Google Drive: esta demo no tiene clave de API, así que un enlace de Drive explica por qué no puede reproducirse.
- Tus archivos: en «Elegir lista» puedes añadir archivos de tu equipo o pegar un enlace. Se reproducen en tu navegador y no se suben a ningún sitio.
Capturas
Así se ve en escritorio, móvil y modo flotante
Capturas reales tomadas por las pruebas automáticas del reproductor. Selecciona una para ampliarla.
Cómo funciona
De la primera pista a tu propia web
Elige una lista
El primer botón a la derecha de la barra abre el selector de listas. Cada tarjeta indica su tipo y cuántas pistas tiene; las importadas (RSS, Apple, YouTube, XML, M3U) se cargan al abrirlas.
Reproduce y busca
Pulsa reproducir. El segundo botón abre el panel de pistas: elige una, búscala por nombre o recórrelas con las flechas del teclado.
Ajusta la escucha
Repetir alterna entre desactivado, toda la lista y la pista actual. Aleatorio, temporizador, compartir y skin están en el mismo grupo de iconos.
Hazlo flotante o contráelo
El último icono lo saca de la página; la X lo deja reducido a dos botones. En ambos casos sigue sonando.
Integrarlo en WordPress
Sin código ni compilación: activa el plugin, elige las opciones en Ajustes → FLASH PLAYER PLUGINS WP y añade el código corto en un bloque «Código corto». WordPress carga la hoja de estilos y los cinco scripts, en su orden, solo en las páginas que lo usan.
[creanexo_player]
[creanexo_player skin="dark-blue" floating="1"]
[creanexo_player layout="inline" demo="completa"]
[creanexo_player ids="12,34" allow_user_sources="1"]Por defecto es una barra fija abajo con tus listas; skin elige el skin (o light, graphite-emerald, dark-amber…), layout="inline" lo integra en el contenido, como en esta demo, demo="completa" añade sus 13 listas, ids crea una lista con audio y video de la biblioteca de medios y allow_user_sources deja añadir archivos del equipo o enlaces. Tus listas se escriben en los ajustes con el mismo formato JSON que la versión JavaScript. También tiene API: CNSP.players da acceso a cada reproductor (play(), next(), setSkin('light'), openFloating()…) y el filtro cnsp_player_config cambia su configuración.
Una lista declarada en HTML
La tarjeta «Lista HTML» de la demo lee este marcado de la página:
- Estudio Demo — Amanecer en cuarzo
- Estudio Demo — Ondas de prueba (HLS)
- Estudio Demo — Circuito azul
Compatibilidad y requisitos
Lo que necesita, y lo que se ha comprobado
No usa Adobe Flash ni Java. «FLASH PLAYER PLUGINS WP» es el nombre del proyecto: el reproductor es JavaScript estándar que funciona en navegadores actuales sin plugins ni instalación.
| Navegador | Estado |
|---|---|
| Microsoft Edge 155 (Windows) | Verificado Pruebas automáticas completas: reproducción, fuentes, skins, ventana y panel flotantes, móvil emulado. |
| Firefox 157 (Windows) | Verificado Reproducción, skins, ventana y panel flotantes, HLS con hls.js y dos reproductores. |
| Google Chrome | Mismo motor Comparte motor con Edge; no se probó por separado. |
| Safari (macOS, iOS) | Sin verificar HLS nativo; modo flotante como panel. En iOS el volumen no se puede cambiar por código, así que el temporizador pausa sin fundido. |
| Móviles | Emulado Diseño comprobado a 360 y 390 px de ancho; sin pruebas en dispositivos reales. |
- WordPress 5.8 o posterior y PHP 7.4 o posterior. Mejor con HTTPS: la ventana flotante, el portapapeles y YouTube necesitan un origen seguro.
- Peticiones Range en el servidor de los medios, para poder saltar dentro de MP3 y MP4.
- CORS en el servidor del medio para el visualizador; en el del feed para los podcasts RSS; en el del stream para HLS con hls.js. Sin CORS, el audio suena igual, pero sin visualizador.
- YouTube: Internet, el video visible mientras suena y posibles anuncios. Los videos con la inserción desactivada muestran un error claro.
- Google Drive: una clave de la API de Drive v3 con tu dominio permitido y el archivo compartido con «Cualquier persona con el enlace».
- Dependencias: ninguna obligatoria. Incluye hls.js 1.7.3 (licencia Apache-2.0), que solo se descarga si el navegador no reproduce HLS por sí mismo.
Preguntas frecuentes
Dudas habituales
¿Necesito tener instalado Flash o Java?
No. El reproductor está escrito en JavaScript y usa las funciones de audio y video estándar del navegador. El nombre «FLASH PLAYER PLUGINS WP» es solo el del proyecto.
¿Por qué no suena nada al abrir la página?
Es intencionado: el reproductor nunca inicia la reproducción por su cuenta. Los navegadores bloquean el audio automático y, además, es más respetuoso con el visitante.
Si añado archivos de mi equipo, ¿se suben a algún servidor?
No. Se reproducen dentro de tu navegador y desaparecen al recargar la página. Por eso tampoco se pueden compartir.
¿Por qué el visualizador no aparece con algunas fuentes?
Solo se muestra cuando el navegador puede analizar el audio: el medio debe ser del mismo sitio o su servidor debe permitir CORS. Con YouTube nunca aparece, porque el audio de su reproductor no es accesible.
¿Qué ocurre con el video en la ventana flotante?
En el panel flotante el video se ve dentro del panel. En la ventana independiente los controles y la lista pasan a la ventana, pero el video sigue en la página: moverlo obligaría a recargarlo y se cortaría el sonido.
¿Puedo poner más de un reproductor en la misma página?
Sí. Solo puede haber una barra fija abajo; los demás se integran en el contenido con layout="inline" (el plugin lo hace solo a partir del segundo). Cada uno tiene su lista, su volumen y su skin, y al empezar uno se pausan los demás.
¿Cómo cambio los colores?
Elige uno de los cinco skins en los ajustes o con el atributo skin del shortcode, o crea uno propio definiendo sus variables CSS y registrándolo con el filtro cnsp_skins.
¿Por qué la lista de Google Drive da error en la demo?
Google no permite reproducir enlaces de Drive desde otras webs. La vía oficial es su API, que necesita una clave que esta demo no tiene. El reproductor explica el motivo en lugar de fallar en silencio.