StreamPanel
Iniciar sesión Registrarse

API Pública de Reproductor

Integra tus streams en cualquier sitio web o aplicación. Una sola llamada JSON devuelve metadatos en tiempo real, URL de emisión y carátula del álbum. Sin autenticación. CORS abierto.

GEThttps://streampanel.online/api/player/{custom_id}
GEThttps://streampanel.online/api/cover/{custom_id}
GET

/api/player/{custom_id}

Devuelve todos los datos del reproductor en tiempo real con URLs absolutas listas para usar en cualquier dominio.

Petición

GET https://streampanel.online/api/player/mi-radio

Respuesta JSON — stream en marcha

{
  "ok":           true,
  "is_live":      true,
  "stream_name": "Radio Ejemplo",
  "custom_id":   "mi-radio",
  "stream_url":  "https://streampanel.online:8001/mi-radio",
  "title":       "Yellow",
  "artist":      "Coldplay",
  "listeners":   47,
  "cover_url":   "https://streampanel.online/img/album_art/Coldplay%20-%20Yellow.jpg",
  "updated_at":  1741789200
}

Respuesta JSON — stream parado

{
  "ok":           true,
  "is_live":      false,
  "stream_name": "Radio Ejemplo",
  "custom_id":   "mi-radio",
  "stream_url":  "https://streampanel.online:8001/mi-radio",
  "title":       "",
  "artist":      "",
  "listeners":   0,
  "cover_url":   "https://streampanel.online/img/default-album.jpg",
  "updated_at":  1741789200
}

Campos de la respuesta

CampoTipoDescripción
okbooleanSiempre true si el stream existe
is_livebooleantrue si el stream está emitiendo en este momento, false si está parado. Cuando es false, cover_url devuelve la imagen predeterminada y title/artist están vacíos
stream_namestringNombre del stream configurado en StreamPanel
stream_urlstringURL de emisión de audio lista para poner en <audio src>. Incluye host, puerto y punto de montaje. Compatible con SHOUTcast (SSL nativo) e Icecast-KH (SSL nativo).
titlestringTítulo de la canción en reproducción. Vacío si is_live es false
artiststringArtista de la canción en reproducción. Vacío si is_live es false
listenersintegerNúmero de oyentes conectados en este momento
cover_urlstringURL absoluta de la carátula del álbum. Cuando el stream está parado devuelve la imagen predeterminada. Listo para <img src>
updated_atintegerUnix timestamp de la respuesta
GET

/api/cover/{custom_id}

Redirect 302 a la URL de la carátula actual. Úsalo directamente en un <img> para mostrar siempre la carátula en tiempo real sin JS. Si el stream está parado redirige a la imagen predeterminada.

Uso en HTML

<!-- La imagen se actualiza automáticamente sin JavaScript -->
<img src="https://streampanel.online/api/cover/mi-radio"
     alt="Carátula"
     style="width:200px;height:200px;object-fit:cover;border-radius:8px">

Parámetro ?song= — Integración con players externos (pro.radio, etc.)

Algunos players externos como pro.radio añaden automáticamente ?song=artista-titulo-slug a la URL de metadatos para solicitar la carátula correspondiente. Este endpoint detecta ese parámetro y devuelve un redirect 302 a la imagen correcta (buscando en caché local → Last.fm → iTunes). No es necesario configurar ningún endpoint separado para la carátula en estos players. 

# URL que pro.radio construye automáticamente:
GET https://streampanel.online/api/player/mi-radio?song=coldplay-yellow

# Respuesta: HTTP 302 → /img/album_art/Coldplay%20-%20Yellow.jpg

ℹ️ En pro.radio basta con poner la misma URL del endpoint JSON en el campo «Now Playing URL». El sistema gestiona automáticamente tanto la respuesta JSON como las peticiones de carátula con ?song=.

Ejemplos de integración

La forma más sencilla. Añade un div con data-sp-stream y carga el script. El reproductor completo se genera automáticamente. 

<!-- Pon este div donde quieras el reproductor -->
<div data-sp-stream="mi-radio"></div>

<!-- Carga el script una vez al final del body -->
<script src="https://streampanel.online/js/sp-player.js"></script>

Atributos opcionales

AtributoValorDescripción
data-sp-color#2563ebColor de acento del reproductor opcional
data-sp-themelight / darkTema visual opcional
data-sp-autoplaytrueReproducir automáticamente al cargar opcional
data-sp-interval10000Intervalo de actualización en ms opcional

Llama a la API directamente y usa los datos como quieras en tu propio reproductor. Comprueba is_live para saber si el stream está emitiendo. 

async function updatePlayer() {
  const res  = await fetch('https://streampanel.online/api/player/mi-radio');
  const data = await res.json();

  if (!data.is_live) {
    document.getElementById('song-title').textContent = 'Stream offline';
    document.getElementById('cover').src = data.cover_url; // imagen predeterminada
    return;
  }

  document.getElementById('cover').src          = data.cover_url;
  document.getElementById('song-title').textContent = data.artist + ' — ' + data.title;
  document.getElementById('listeners').textContent = data.listeners + ' oyentes';
  document.querySelector('audio').src           = data.stream_url;
}

updatePlayer();
setInterval(updatePlayer, 10000); // actualizar cada 10 segundos

Tienes tu propio HTML y solo quieres que el script actualice los elementos específicos. Añade data-sp-bind al contenedor y marca cada elemento con su atributo. 

<div data-sp-stream="mi-radio" data-sp-bind>
  <img   data-sp-cover src="/default.jpg" style="width:80px;border-radius:6px">
  <span  data-sp-title></span>
  <span  data-sp-artist></span>
  <span  data-sp-listeners></span>
  <audio data-sp-audio controls></audio>
</div>
<script src="https://streampanel.online/js/sp-player.js"></script>

Recibe cada actualización en tu propia función y haz lo que necesites con los datos. 

<div data-sp-stream="mi-radio"
     data-sp-on-update="onStreamUpdate"></div>
<script src="https://streampanel.online/js/sp-player.js"></script>

<script>
function onStreamUpdate(data) {
  console.log('Canción:', data.artist, '-', data.title);
  console.log('Carátula:', data.cover_url);
  console.log('Oyentes:', data.listeners);
  // Tus propias acciones aquí...
}
</script>

Demo en vivo

Reproductor generado automáticamente usando el script. Cambia el stream con el selector de arriba.