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



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

[audio autoplay="on" src="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).

[audio autoplay="on" src="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.

[audio autoplay="on" src="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.

Última modificación: 3 de agosto de 2017 a las 06:43

Hay 10 comentarios

captcha
  • Image not available
    Por Pablo López / Venezuela / 26 de enero de 2017 a las 20:01

    Excelente como siempre, solo recordar que desde hace poco Muses radio player https://www.muses.org/ también da la posibilidad de crear reproductores en HTML5.
    Un gran saludo

    Responder

    • Image not available
      Por Radios Libres / Quito, Ecuador / 28 de enero de 2017 a las 07:56

      Pablo, gracias por el comentario, tienes todo la razón. Lo sumamos como recomendación al inicio del post y gran manual el que hiciste para enseñar cómo generar el reproductor de Muses:
      https://radioliberada.wordpress.com/2017/01/26/muses-radio-player-un-bonito-reproductor-html5-para-tu-radio/
      Abrazo!

      Responder

  • Image not available
    Por WILMER MONCADA / vALENCIA,VENEZUELA / 28 de enero de 2017 a las 09:27

    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

    Responder

    • Image not available
      Por Radios Libres / Quito, Ecuador / 30 de enero de 2017 a las 05:00

      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

  • Image not available
    Por Adolfo Fernandez / Asuncion / 17 de septiembre de 2017 a las 18:56

    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)

    Responder

    • Image not available
      Por Radios Libres / Quito, Ecuador / 30 de septiembre de 2017 a las 18:47

      Saludos Adolfo, lo probé y sí anda. Tarda un poco en arrancar, unos segundos, pero funciona:
      https://santiagogarciagago.wordpress.com/2017/09/30/prueba-abc/
      Cambia las comillas "" y escribe a mano una vez copiado el código. Copia como HTML:
      [audio autoplay="on" src="http://sc.abc.com.py:8000/;#.mp3"]
      Abrazo!

      Responder

  • Image not available
    Por Cristian Egüez / Rosario / 30 de octubre de 2017 a las 11:30

    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!

    Responder

    • Image not available
      Por Radios Libres / Quito, Ecuador / 2 de noviembre de 2017 a las 05:52

      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

      Responder

  • Image not available
    Por Rodrigo / Santa Fe - Argentina / 30 de noviembre de 2017 a las 11:02

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

    Responder

    • Image not available
      Por Radios Libres / Quito, Ecuador / 4 de diciembre de 2017 a las 13:00

      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!

      Responder