Cómo probarla
- Selector de listas (primer botón a la derecha de la barra): hay una tarjeta por cada tipo de fuente. Al elegir una se carga esa lista.
- Panel de pistas (segundo botón): elegir una pista, buscar por nombre y desplazarse dentro del panel.
- Repetir alterna entre desactivado, toda la lista y la pista actual. Aleatorio recorre cada pista una vez antes de repetir ninguna.
- Temporizador (reloj): apaga la reproducción tras 15–90 minutos, bajando el volumen poco a poco, o al terminar la pista actual.
- Compartir: copia un enlace que abre esta página en la misma pista (opcionalmente en el minuto actual), o lo envía por X, Facebook, WhatsApp o correo.
- Visualizador: barras sobre el reproductor que reaccionan al sonido real. Solo aparece cuando el navegador puede analizar el audio (ver «Fuentes y requisitos»).
- Tus propios archivos y enlaces: en el selector de listas, «Añadir archivos del equipo» (o arrastrarlos) y el campo «Pega un enlace…». Para Google Drive hace falta una clave de API (ver «Fuentes y requisitos»).
- Error y recuperación: en «Lista mixta», la pista 7 no existe a propósito.
- Contraer: la X deja dos botones pequeños abajo a la derecha. La reproducción continúa.
- Teclado: Tab recorre los controles; flechas dentro de las listas; Escape cierra el menú o panel abierto.
Fuentes y requisitos
| Fuente | Requisitos y límites reales |
|---|---|
| MP3 / MP4 autoalojados | URL directa al archivo. El servidor debe aceptar peticiones Range para poder saltar. MP4 en H.264 + AAC para que funcione en todos los navegadores. |
| Archivos del equipo | Se reproducen en este navegador sin subirse a ningún sitio. Desaparecen al recargar y no se pueden compartir. |
| HLS (.m3u8) | Nativo en Safari, Edge y Chrome recientes; en Firefox se usa hls.js (incluido). Con hls.js, el servidor del stream debe permitir CORS. Los directos se muestran como «En directo», sin barra de progreso. |
| YouTube | API IFrame oficial: requiere Internet y servir la página por http/https. El video tiene que estar visible mientras suena (condición de YouTube). YouTube puede mostrar anuncios. Algunos propietarios no permiten insertar sus videos. Sin visualizador. |
| Listas de YouTube | Se leen sin clave de API: los ids, del reproductor oficial; los títulos, de oEmbed. Las listas privadas no se pueden leer. |
| Podcast (RSS) | El servidor del feed debe permitir CORS (muchos lo hacen: Megaphone, Simplecast…). Si no lo permite, el navegador no puede leerlo y no se usa ningún proxy. Los episodios se reproducen siempre. |
| Apple Podcasts / iTunes | Se usa la API pública de búsqueda de Apple (sin clave), que devuelve hasta 200 episodios recientes. Los podcasts de pago o solo para suscriptores no están disponibles. |
| Google Drive | Google bloquea la reproducción directa de Drive desde otras webs: responde 403 a las peticiones entre sitios. Por eso se usa la API oficial de Google Drive v3, que requiere una clave de API de Google, con la API de Drive activada y esta web permitida. El archivo debe estar compartido como «Cualquier persona con el enlace». En esta demo, añade ?googleApiKey=TU_CLAVE a la URL. Sin clave, la pista explica el motivo. |
| Amazon S3 | Objetos públicos o URL prefirmadas vigentes. Para listar un bucket hace falta permiso público de listado y CORS. Sin ellos, usa las URL de los objetos. |
| Visualizador | Necesita que el servidor del medio permita CORS (o que el medio sea del mismo sitio). Si no lo permite, el medio suena igual, pero sin visualizador. |
Lista declarada en HTML
La tarjeta «Lista HTML» lee este marcado de la página:
- Estudio Demo — Amanecer en cuarzo
- Estudio Demo — Ondas de prueba (HLS)
- Estudio Demo — Circuito azul
Consigue los dos reproductores
Esta demo muestra Sticky Player. El paquete incluye los dos reproductores.
Créditos de los medios externos
Los medios de media/ se crearon para este proyecto. Las fuentes externas solo se enlazan o insertan, sin copiarse:
- Películas abiertas de la Blender Foundation (CC BY) en YouTube.
- Stream de prueba de Mux.
- Podcast «Houston We Have a Podcast» de la NASA.
- Grabación «Pacific Sound» de MBARI (CC BY 4.0) en S3.
— Final de la página —