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

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

  1. Muchas gracias por toda la información que brindáis en este sitio.
    Tengo un problema con el widget de wordpress para el reproductor. Funciona bien en la computadora, pero no en el teléfono móvil.
    El sitio es radiocercedilla.com
    Y el código que uso es:
    Escuchar en directo
    ¿Me podríais ayudar?
    Muchas gracias y un saludo.

      1. hola Jorge!
        Pues quizás sí es el SO, cuál usas? Porque lo acabo de probar con varios navegadores (Chromium, Chrome, Firefox) en Gnu/Linux y anda sin problema, también en Android (Chrome y Firefox). De todas formas, esa opción de poner un enlace directo al streaming está buena, como alternativa para quién no pueda escuchar.
        La otra que me estoy fijando ahora es que parece que hay un problema con el certificado ssl https:// Quizás eso bloquea el contenido de la radio que es un http, sin la «s». Si eso te sucede, debería salirte un icono en la barra de la URL como el de la imagen. A mi no me sale, pero es otra posible fuente de problema.
        Imagen

        1. En mi computadora uso OS High Sierra 10.13.6, y me funciona en Safari, pero no con el Chrome.
          En el móvil, Android 8.1.0, y me funciona en Firefox, pero no con el Chrome.
          Me sorprende que a ti sí que te funciona con el Chrome; le he preguntado a compañeras y tienen el mismo problema que yo.

          1. La cosa es que tu wordpress está intentando llamar un https seguro, pero la URL de giss.tv no lo es, es solo http: y a veces wordpress lo bloquea porque considera que es un contenido inseguro. Pero es raro que en unos ande y en otros dos. Acabo de confirmar y en mi teléfono se escucha, es un Android 6.1, así que el navegador es más antiguo (versión 80.0.3987). La otra es que chrome en sus últimas versiones esté bloqueando algo, pero debería indicarlo. ¿El ícono que te mandé en la imagen anterior no te sale en la barra de la URL a la derecha? Muy raro…si adivinas me dices.
            certificado

        2. Hola, pues no me sale ese indicador de seguridad en la página de wordpress, ni en chrome ni con otros navegadores.

          Sí que me sale dicho indicador de aviso de seguridad si me voy al sitio web de giss, pero sí que entra y me permite escucharlo… seguiré investigando, aunque de momento así me arreglo. Si me averiguo más, te cuento.

          Gracias y un saludo.

          1. Hola Jorge, aunque no logro encontrar información oficial sobre el tema, pero me sospecho por lo que he leído en algunos foros que el problema es que tú tienes una página con protocolo seguro httpS y la URL de la radio no tiene ese protocolo seguro, es sólo «http». En los navegadores más antiguos como el que tengo yo en mi computadora y en el Android 6 que también tiene un Chrome más desactualizado se escucha y en el resto no. Te pido que hagas una prueba. Sustituye la URL de tu radio por esta otra (https://radio.latina.red/aguita) quizás ahora no están transmitiendo audio, pero el streaming funciona, es decir, se puede hacer play y el contador se poner a correr aunque sea en silencio. Prueba con ella en tu sitio y comprueba en los mismos dispositivos y navegadores a ver si funciona y con eso descartamos (o afirmamos) que el problema viene por ese lado. ¿Te parece? Saludos!

  2. Buenas tardes cambié de servidor de streaming y desde ese momento no funciona el reproductor. URL de mi streaming es http;//giss.tv:8001/radio-intag.mp3, No está funcionando en mi pag. web radiointag.com,

    Gracias

    1. Hola Paquita, pues el que está ahora se escucha, pero por lo que veo es otra url. Tendrías que poner algo igual pero con la nueva URL. Ojo porque la que mandaste tiene después del http un punto y coma, no dos puntos.
      <audio controls="" autoplay="on" preload="none" src="http://giss.tv:8001/radio-intag.mp3"></audio>

    1. Hola Juan, estuve viendo un poco la web, pero este es uno de los casos en que tienen un reproductor bastante particular y la URL está enmascarada en algún archivo, la verdad que pude descrubrirla. A ver si alguien que se pase por esta página logra descubrir y nos lo comparte. Abrazo.

    1. Hola Miguel Ángel! Acabo de entrar en la página que indicas y estoy viendo el reproductor y escuchando la transmisión. He probado en tres navegadores PC: Chromium, Chrome y Firefox y en los tres anda. También en Android y anda sin problemas. ¿Quizás estás probando con Mac y iPhone? A veces estos SO pueden dar problemas. Saludos!

    1. Hola Oscar, si el streaming es tuyo es una URL que debes de tener para configurar la conexión al servidor. Si es de otra radio, puedes probar algo así:

      Coloca el ratón sobre cualquier parte de la web y hacer clic con el botón derecho. Selecciona “Ver código fuente” o, como seguro usas Firefox para navegar, puedes también pulsar “Control + u” y verás el código interno de la web. En ese código fuente, busca una dirección web compuesta por números divididos por dos puntos. Por ejemplo: http://85.25.97.243:8072/ También la puedes encontrar con el dominio en vez de números, pero siempre con dos puntos seguido del número de puerto de conexión: http://dominio.net:8072/

      Depende del sistema de transmisión, es posible que tengas una dirección que termina en .mp3 o .ogg: http://dominio.net:8000/punto_montaje.mp3

      Saludos.

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

      1. Qué ayuda necesitas? Saber la URL? Estas páginas enmascaran con javascript las URL de transmisión para que uses sus propios reproductores. Se podría adivinar, pero hay que emplear bastante tiempo. De todas formas, esta en concreto, permite hacer un embed o inserto de su reproductor. En el player que sale en la parte inferior de la web, hay un ícono al lado del volumen que te ofrece un código iframe para insertar el reproductor en la web, más sencillo. Saludos!

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

  5. 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!

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

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

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

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

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

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

  12. 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!

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

  14. 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)

  15. 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/

Responder a Miranda Cancelar la respuesta

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