JavaScript puro · 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.

Probar reproductor Ver funciones
  • 5 scripts + 1 CSS, sin compilación
  • 13 listas de demostración
  • 5 skins incluidos
Demo del reproductor en escritorio: barra fija sonando con el visualizador de barras rojas sobre ella
El reproductor en un móvil de 390 px con el panel de pistas abierto

Las imágenes son capturas reales del reproductor 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.
Selector de listas: una tarjeta por lista, con su tipo, descripción y número de pistas.

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.
Panel de pistas con la pista activa resaltada y el buscador.

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.

Video MP4 sobre la barra.
YouTube con la API IFrame oficial.

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.

Skin Original Dark / Pink (el predeterminado).

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.

Panel flotante, arrastrable por la cabecera.
Ventana independiente (captura real de la ventana).

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.
Error de medio explicado y pista marcada.

Demo en vivo

Pruébalo aquí mismo

Este es el reproductor del proyecto, 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

  1. 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.

  2. 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.

  3. 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.

  4. 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 una web

Sin compilación: una hoja de estilos, cinco scripts en este orden y una llamada. Necesita servirse por http o https.

<link rel="stylesheet" href="src/sticky-player.css">
<script src="src/sticky-player-icons.js"></script>
<script src="src/sticky-player-core.js"></script>
<script src="src/sticky-player-adapters.js"></script>
<script src="src/sticky-player-sources.js"></script>
<script src="src/sticky-player-ui.js"></script>
<script>
  const player = StickyPlayer.create({
    playlists: [{ title: 'Mi lista', tracks: [
      { src: 'audio/tema.mp3', title: 'Tema', artist: 'Artista', cover: 'img/portada.jpg' }
    ] }],
    skin: 'dark-blue',     // o light, graphite-emerald, dark-amber…
    floating: true         // botón del reproductor flotante
  });
</script>

Por defecto es una barra fija abajo; con layout: 'inline' se integra en un contenedor, como en esta demo. También tiene API: player.play(), player.next(), player.setSkin('light'), player.openFloating()…

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 Java» es el nombre del proyecto: el reproductor es JavaScript estándar que funciona en navegadores actuales sin plugins ni instalación.

Navegadores
NavegadorEstado
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 ChromeMismo 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óvilesEmulado Diseño comprobado a 360 y 390 px de ancho; sin pruebas en dispositivos reales.
  • Servir por http o https. Abierto como archivo (file://) solo funcionan los MP3/MP4 locales: YouTube, las listas XML/M3U/HTML y el visualizador quedan limitados por el navegador.
  • 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 Java» 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'. 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 con la opción skin, o crea uno propio definiendo sus variables CSS y registrándolo con StickyPlayer.registerSkin().

¿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.