Crea reproductores personalizados con tu marca
Encuentra la URL de tu transmisión y crea reproductores personalizados para tu sitio web.

El kit de creación de reproductores DIY está pensado para aquellos familiarizados con el desarrollo web y se proporciona "tal como está". La cobertura de soporte de Radio.co es limitada.

El kit de construcción DIY está diseñado para desarrolladores familiarizados con el desarrollo web y se proporciona “tal cual”. El soporte de Radio.co para este kit es limitado.

Para una lista completa de herramientas, consulta la documentación de la API de Radio.co.

Radio.co API

Código de cabeza y cuerpo

Entre las etiquetas <HEAD></HEAD> de tu página web, pega el siguiente código:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://public.radio.co/playerapi/jquery.radiocoplayer.min.js"></script>

Después de la etiqueta de cierre </BODY>, pega lo siguiente:

<script>
  $('.radioplayer').radiocoPlayer();
</script>

Elemento del Reproductor

Define dónde quieres ubicar el reproductor pegando este código:

<div class="radioplayer"
     data-src="https://streaming.radio.co/your_station/listen"
     data-autoplay="false"
     data-playbutton="true"
     data-volumeslider="true"
     data-elapsedtime="true"
     data-nowplaying="true"
     data-showplayer="true"
     data-volume="50"
     data-showartwork="false">
</div>

Puedes cambiar las opciones con el prefijo data-. Aunque hay opciones predeterminadas, puedes personalizarlas. A continuación, se detallan todas las opciones disponibles.

Opciones del Reproductor

URL de transmisión:

Configura la URL de transmisión de Radio.co necesaria para el reproductor.

data-src="https://streaming.radio.co/your_station/listen"

Reproducción automática:
Inicia la transmisión automáticamente cuando se carga la página.

 data-autoplay="true|false"

Botón de reproducción/pausa:
Muestra el botón de reproducción y pausa.

data-playbutton="true|false"

Control de volumen:
Muestra el control deslizante de volumen

data-volumeslider="true|false"

Información “Now Playing”:
Muestra información de la pista que se está reproduciendo.

data-nowplaying="true|false"

Tiempo transcurrido:
Muestra el tiempo total transcurrido de la transmisión.

data-elapsedtime="true|false"

Mostrar/Ocultar Reproductor:
Decide si el reproductor completo aparece en la página.

data-showplayer="true|false"

Volumen inicial:
Ajusta el volumen inicial entre 0 y 100.

data-volume="0-100"

Mostrar solo la portada de la pista:
Úsalo junto con data-showplayer="false" para mostrar únicamente la portada.

data-showartwork="true|false"

Cambiar imagen personalizada:
Cambia la imagen cuadrada del reproductor por una fuente personalizada.

data-image="path/to/image.jpg"

Fondo personalizado:
Añade una imagen de fondo detrás del reproductor.

data-bg="path/to/image.jpg"

Métodos

Los métodos te permiten un mayor control sobre la funcionalidad y los eventos del reproductor:

Cargar el stream

player.load(callback);

Reproducir la transmisión:

player.play(callback);

Pausar la transmisión:

player.pause(callback);

Alternar reproducción/pausa:

player.playToggle(playCallback, pauseCallback);

Obtener estado del stream:

player.getStreamState();

Obtener/ajustar el volumen:

player.volume(volume);

Eventos

Los eventos se pueden capturar usando player.event('event_name', callback) para ejecutar la devolución de llamada cuando se activa el evento.

Cuando el audio se ha cargado en la reproductor con éxito.

audioLoaded

Se disparó después de que pasaba cada segundo mientras se escuchaba la transmisión.

timeChanged

Cuando el usuario reproduce la transmisión

audioPlay

Cuando el usuario hace una pausa en la transmisión.

audioPause

No es una fuente de transmisión válida.

invalidStream

La canción que se está reproduciendo actualmente ha cambiado en la estación.

songChanged

No se recibió información de transmisión.

streamInfoError

Ejemplo de Reproductor Funcional

Este ejemplo muestra cómo un reproductor puede implementarse y adaptarse a tus necesidades. ¡Experimenta con las opciones y personaliza el diseño de tu reproductor!

<div class="radioplayer"
     data-src="https://streaming.radio.co/your_station/listen"
     data-playbutton="true"
     data-volumeslider="true"
     data-elapsedtime="true"
     data-volume="75">
</div>
<script>
  var player = $('.radioplayer').radiocoPlayer();
</script>