Este player es muy sencillo y versátil, sirve para redes sociales y navegadores de dispositivos móviles.

Como bien apunta Pablo López en los comentarios, desde hace unos meses Muses Radio Player ya ofrece sus reproductores en HTML5, antes sólo eran Flash. Son más elaborados que los genéricos de los que hablamos en este artículo, cosa que a unas radios les gusta y a otras no. Como para gustos están los colores (y los reproductores) puedes consultar este manual detallado de cómo usar ese otro reproductor que realizó Pablo en su página de Radio Liberada.

1. COMPRUEBA QUE EL STREAMING FUNCIONA

Evidentemente la radio debe estar activa y transmitiendo para que el reproductor funcione.

Pega el enlace de tu radio en línea en la barra de URL de un navegador y comprueba que está emitiendo. En la mayor parte de los navegadores verás que aparece un reproductor y la radio se escucha.

firefox

Ejemplo con la URL de Radio Kasandrxs en el navegador Firefox. http://stream.codigosur.org:8000/kasandrxs.mp3

chrome

Ejemplo con la URL de Radio UTTECAM en el navegador Chrome. http://198.50.212.178:8080/

Fíjate que en el primer ejemplo la dirección URL del streaming se construye con el nombre de un dominio y en la segunda son números (una dirección IP) pero ambas son direcciones de dos radios en línea.

2. AVERIGUA (SI NO LO SABES) QUÉ TECNOLOGÍA DE STREAMING ESTÁS USANDO

Si te fijas, en los dos ejemplos anteriores hemos usado dos direcciones diferentes para una radio en línea. Una tiene una terminación especial al final (/kasandras.mp3). El motivo es que existen principalmente dos tecnologías para hacer streaming:

Servidores con Shoutcast:

http://198.50.212.178:8080/

Servidores con Icecast: los distingues porque tienen “punto de montaje”, en este ejemplo es /kasandras.mp3

http://stream.codigosur.org:8000/kasandrxs.mp3

Cuidado, porque los server sobre Icecast versión 2 no vienen con punto de montaje o, si lo tienen, no le ponen extensión (.ogg o .mp3):

http://200.137.217.155:8010/radiouniversitaria

En caso de duda, pregunta al proveedor del servicio. Si es gratuito, los de Giss.tv son Icecast y Listen2MyRadio son Shoutcast.

3. CREA EL CÓDIGO

Tienes que elegir el tipo de tecnología y luego el tipo de web. Como verás, para los sitios con el CMS WordPress generan el código de forma diferente. [Más detalles].

Si dejas el autoplay=“on” la radio comienza a retransmitir al abrir la web. Si lo borras tendrán que pulsar play para comenzar a escuchar.

SERVIDORES CON ICECAST

WEBS, BLOGS O REDES SOCIALES (Punto de montaje con o sin extensión)

<audio controls="" autoplay="on" preload="none" src="http://XXX.XXX.XXX.XXX:XXXX/tu-punto-de-montaje"></audio>
  • Ejemplo (Icecast punto de montaje con extensión) de Radio Kasandrxs
<audio controls="" preload="none" src="http://stream.codigosur.org:8000/kasandrxs.mp3"></audio>

  • Ejemplo (Icecast punto de montaje sin extensión) con Radio Piratona
<audio controls="" preload="none" src="http://s1.streamaudio.de:8000/radio-piratona"></audio>

  • Ejemplo (Icecast codec aac+) con Radio Movimento
<audio controls="" preload="none" src="http://audio05.viaflux.com:9750/radio.aac"></audio>

WORDPRESS

"http://XXX.XXX.XXX.XXX:XXXX/tu-punto-de-montaje.ogg"

En caso de que sea Icecast v2 y el punto de montaje no incluya .ogg o .mp3 tendrás que añadirlo pero con el símbolo # antes de la extensión (#.ogg).

"http://XXX.XXX.XXX.XXX:XXXX/tu-punto-de-montaje#.ogg"

Ver ejemplos en detalle funcionando en wordpress.

SERVIDORES CON SHOUTCAST

WEBS, BLOGS O REDES SOCIALES ¡No te olvides del punto y coma después de la barra (/;)!

<audio controls="" autoplay="on" preload="none" src="http://XXX.XXX.XXX.XXX:XXXX/;"></audio>
<audio controls="" preload="none" src="http://198.50.212.178:8080/;"></audio>

<audio controls="" preload="none" src="http://162.252.57.90:9848/;"></audio>

WORDPRESS

Tendrás que añadir al final, después del /; la extensión de esta forma #.mp3 o si es #.ogg.

"http://XXX.XXX.XXX.XXX:XXXX/;#.mp3"

Ver ejemplos en detalle funcionando en wordpress.

4. COPIA EL CÓDIGO EN TU PÁGINA O BLOG

Todos los blogs o páginas permiten crear módulos o widget HTML o elegir el modo texto/HTML a la hora de crear una página o entrada (post). No lo hagas en modo “Visual”.

Para colocarlo en Facebook es necesario instalar una app para crear contenido HTML. [Revisa el manual]

5. COMPRUEBA QUE FUNCIONA

Abre tu página web, tanto en una computadora como en los dispositivos móviles y verifica que la radio se escucha.

Este reproductor es genérico. Es decir, se verá de forma diferente en cada navegador. Si quieres adaptarlo para que se vea siempre igual tienes que tener conocimientos de diseño en CSS. Estamos preparando un manual sobre este tema.

IMPORTANTE: en diciembre de 2016 el navegador Chrome se actualizó a su versión 55. Desde entonces, el reproductor HTML5 dejó de funcionar en ese navegador para quienes tienen Shoutcast versión 1.XX. Lee este artículo para saber cómo solucionarlo.

Si has leído el tutorial y seguiste al detalle los 5 pasos y aún así no te funciona puedes escribir en los comentarios al final de este artículo. Si lo haces, manda el enlace de tu radio y de la web donde lo quieres colocar para que podamos ayudarte.

Reproductor HTML5 para tu radio en línea en 5 pasos

También te puede interesar

39 comentarios sobre «Reproductor HTML5 para tu radio en línea en 5 pasos»

  1. Hola tengo un gusto especial por la radio pero de un tiempo a esta parte mis reproductores no me van , se queda en gris no se activan ha estado funcionando bien pero cuando ahora quiero escuchar y no van el primero q hay si va pero lleva problemas pq otras personas no escuchan , yo tengo el progrma sam gratis de radio y escucho radio y mis amigas tmb lo hacen , puedes decirme q se puede hacer para q se escuche todos por igual como antes.

    1. Hola Carmen, habría que comprobar que todas las URL/Streaming funcionan y no es problema de eso. Si nos mandas la página web podemos darle un vistazo.

  2. Hola tenemos una radio online y llevamos varios años trasmitiendo pero a hora último Emos tenido dificultades de transición por que el reproductor se para transmite unos 10 VB minutos y se para de trasmitir y años pocos segundo vuelve a funcionar lo malo que en la página al poner play al reproductor se vuelve a repetir todo lo pasado…probamos cambiando el computador y el internet por uno de más potencia y sigue igual nesecitamos una ayuda que nos orienten para poder tramitar por nuestra radio y no tener esos cortes el extrimix que contratamos es un plan de 7000 mensuales pf un consejo gracias

    1. Hola Daniel, pues por lo que cuenta me temo que no es un problema del reproductor, sino del servidor de streaming, lo de los cortes hablo. Lo de que se repita suele ser un problema de la caché. Has probado con qué este reproductor: https://www.muses.org/setup Funciona bastante bien, pero como te digo, me temo que quizás tienes que preguntar al servicio al que le tienes contratado el servicio. Saludos.

    2. Coloca el computador bien cerca del módem con cable corto que esté sano. Es una prueba infalible. Los cables largos de red de baja calidad dan ese problema. 10 metros da problemas de ese tipo. Buen día.

    1. Hola Néstor, pues todo parece que está ok en el reproductor, pero lo que parece no estar bien es la URL. Lo primero que debes confirmar es que el server funciona, para eso debes colocar la URL en el navegador y comprobar que sale un reproductor y se escucha y si lo haces ahora comprobarás que no está activa esa dirección: http://62.210.25.63:57129/live
      Soluciona esa parte porque el resto parece correcto.
      Saludos.

  3. Hola, ante todo, muy buen post, ojalá lo hubiera visto antes de colocar mi radio!. Ahora va mi consulta, yo utilicé winamp con edcast a icecast, luego la plataforma de zeno live conectado a un reproductor de muse en mi página html, cuando configuro zeno live para transmitir desde mi winamp funciona perfecto, pero cuando cargo la lista de canciones dentro de zeno live para que se reproduzca de modo automático no pasa nada, en el reproductor de la pagina html aparece el cartel de fallo en la red, he consultado a la gente de zeno live pero no recibo respuesta, podrían aconsejarme qué puedo hacer? Desde ya muchas gracias

    1. Hola Miranda! Te cuento que no sé bien cómo funciona Zeno Live, pero me imagino que si transmites desde la misma plataforma, quizás cambie la IP y el puerto. Y si tienes configurado en el reproductor los datos que usas en Winamp, entonces no sonaría si son otros. Porque además, algunas de esas plataformas obligan a pasar por su página para ganar visitas. Lo que se me ocurre es que nos mandes algunos enlaces, por ejemplo la web donde tienes el muses instalado y la web de ZenoLive donde se puede escuchar tu transmisión, si es que hay alguna, a ver si descubrimos algo más. Saludos!

  4. Saludos,
    Excelente, me ayudo para publicar mi radio en la web y me funciona bien para android y en las pc, pero cuando se intenta reproducir de un iphone envía error y no permite reproducir nada. Yo use este «http://XXX.XXX.XXX.XXX:XXXX/;#.mp3», me podrías ayudar el porque iphone no lo reproduce .

    Muchas gracias,
    Saludos..,

    1. Hola Antonio, siempre es un problema hacer que ande en los iphone, no suelen respetar algunos estándares o codecs, es ultraprivativo todo y por eso es complicado. La verdad que nunca me puse a investigar, porque hay que invertir demasiado tiempo, no por culpa del reproductor, sino por culpa del sistema de iphone. Intenta con algo así, sin poner el http: en la parte del src, desde el //, a ver si anda así. He leído que así podría andar, pero no te aseguro. Saludos.
      <audio autoplay controls=»true» width=’100%’ height=’100%’ src=’//XXX.XXX.XXX.XXX:XXXX/;#.mp3′ type=’audio/mp3’></audio>

    1. Hola Luis, si nos puedes mandar algún dato más, por ejemplo, cómo estás poniendo el código, qué IP usas, tú página en webnode para corroborar cómo se ve…Saludos.

  5. Saludos, muy buena guía, se me presenta el siguiente problema, tengo configurada la radio con winamp + shoutcast, a la etiqueta audio le asigno la src con la forma http://xxx.xx.xxx.xxx:8080/; y cuando cargo la web no me reproduce y noto que me cambia el http por https. cómo se puede resolver ese detalle? Gracias….

  6. Excelente trabajo e información. Muchas gracias por su aporte y ayuda. He estado buscando esta información tan precisa que no he podido encontrar en ninguna de las paginas que por meses he buscado. Invito a todos los usuarios a si les funciono que compartan su experiencia ya que yo tengo mi pagina y al ver los resultados motiva a seguir subiendo información valiosa como la de esta pagina.

      1. Hola Santiago, tienes que decirnos la IP desde la cuál transmites, si es Icecast o Southcast, son datos que te proporciona el proveedor de servicios. Sin esos datos es imposible. Saludos.

  7. saben si es posible poner una radio https ? ya que los navegadores han estado castigando el standar http y se ve poco profesional las alertas de los navegadores frente a enlaces http de cualquier tipo en nuestras web.-

  8. Buen día, hay alguna manera de lograr colocar el reproductor ( <audio controls=»» preload=»none» autoplay src=»http://EUGDL.mp3:c4xmk@giss.tv:8001/EUGDL.mp3″></audio> ) y que logre que aparezca la información de la pista que estoy transmitiendo? Que apareciera una pantalla o un simple recuadro con la información del audio que se transmite. Me sirvió bastante tu post, como podrás ver.

  9. Un favor he conseguido un reproductor que me gusta de una pagina x y que me muestra la imagen y el titulo de la canción que esta reproduciendo una de mies radios. Pero el problema es que me pide el IP y Puerto. De la radio que emito en vivo funciona por que es claro utiliza los códigos de Listen2myradio pero de mis otras radios trabajo con ZenoLive y no puedo ubicar el IP y el puerto para cambiar de reproductor al que me gusta…como puedo ubicar el IP y el Puerto…!!!! Le mando una de las URLS de una de mis radios en ZenoLive:

    http://stream.zenolive.com/sv3v4c3x1vduv Quiero saber cual es el IP y cual el puerto…!!!

    Gracias…!!!

    Atte:

    Adolfo Durán.

  10. Buenas: Tengo una radio en una pagina de Jimdo. y el servidor de streaming es listen2myradio, ahi me generan el reproductor con el codigo para colocar en mi web y la direccion en http. Cuando copio el codigo me dice que no es seguro y me sugiere poner la letra «s» para hacerlo seguro. Cumplo con este paso y guarda la configuracion pero nunca se muestra el reproductor. Lo mismo realice pruebas con diferentes paginas que ofrecen los reprodutores y el resultado es el mismo. Cuando quito toda la seguridad de la pagina aparece y funciona, pero me queda mostrando la pagina como insegura. Consulte en Jimdo y ellos dicen que no es un problema de la plataforma web. No se realmnte qu pasa. Cuento con su experiencia buena gente…trabaje un monton y no la puedo tener al aire…

    1. Hola Rodrigo, es por los protocolos de seguridad https, al importar páginas externas deben ser también seguras. Por eso lo mejor es que coloques un reproductor html5, no deberías tener problema, si nos pasas la web o la ip de la radio podemos ver cuál sería el código y alternativas para que te ande en tu plataforma.
      Abrazo!

  11. Hola, buenas tardes.

    Buenisimo el tutorial, pero tengo una consulta.
    Coloque un reproductor en una app web, o sea toma el reproductor desde una pagina que tiene HTML y JS, pero este reproductor cachea demasiado, vuelve a un tema que estaba anteriormente, ¿hay algún codigo para que cuando cachee, se elimine y vuelva a donde estaba? Porque desde la app no es posible borrar el cache.

    Ojala me puedas ayudar.

    Saludos!

    1. Saludos Cristian, buen punto. Nunca me pasó, pero cierto que se puede dar el caso. Me puse a investigar y parece que tiene que ver más con el buffer previo que hace que queda en la cache y lo reproduce de nuevo. Hay varios hilos en Internet al respecto, este es el que más consenso tiene. Pero debes usar un pequeño script que recomiendan. Lo usan para video, pero es un repro HTML5, así que debe andar en Audio. Prueba y nos cuentas si funciona porfa. https://stackoverflow.com/questions/4071872/html5-video-force-abort-of-buffering/13302599#13302599

  12. Hola Amigos de Radios LIbres
    Tengo una web en la que recopilo todas las radios de mi país. Y hace un mes migre de blogger a wordpress. Y para sorpresa mía hay radios que han dejado de funcionar. En este post me enteré que el código de implementación es diferente.

    En mi caso concreto, tengo una de Abc Cardinal, la cual se reproduce perfectamente en blogger.com pero al pasarla a wordpress no funciona:

    Este es el código en blogger:
    <audio autoplay=»1″ controls=»1″ src=»http://sc.abc.com.py:8000/;» type=»audio/mpeg»></audio>

    Y este el que puse en wordpress
    [audio autoplay="on" src="http://sc.abc.com.py:8000/;#.mp3" ]

    No se si tengo que agregar algún reproductor o scrip.

    También leí el artículo de la versión de showcast 1 ya no funciona en chrome desde dic 2016. Pero la versión que usa esta radio es SHOUTcast Server v2.4.7.256/posix(linux x64)

  13. Excelente, en mi experiencia con estos reproductores han funcionado correctamente con mp3, de giss.tv…pero con el codec acccplus, no he logrado tanto exito,pregunto a que se debe que no se oye nada…aun cuando estamos transmitiendo…Gracias

    1. Saludos Wilmer!

      Pues depende mucho del navegador, más que del reproductor. Ahora, en las nuevas versiones de Chrome y Firefox sí funciona el AAC+. Hemos sumado dos ejemplos con ese codec. Para estar seguro te recomendamos dos cosas:
      Verificar en la lista de formatos soportados de HTML5:
      https://developer.mozilla.org/es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5

      Hacer un test con tu propio navegador. Abres esta web y revisa en los formatos de audio si está soportado el formato:
      http://html5test.com/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *