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