Capítulo 4.2. Sencillo 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.
IMPORTANTE: Desde las actualización del navegador Chorme a inicios de 2020, los reproductores de las radios que no tienen una dirección de streaming bajo protocolo seguro https:// han dejado de funcionar. En este artículo explicamos cómo solucionarlo.
Si buscas comprar un streaming, o usar uno comercial gratuito, o uno libre para organizaciones sociales y medios comunitarios esta nota te interesa.
Básicamente, para colocar un reproductor HTML5 y que se escuche una radio online en la web, usa el código de más abajo con tus datos y pégalo en tu página. En source colocas la URL de tu streaming (la misma que usas para enviar la señal al servidor) y el type de transmisión. Si es mp3 escribes type="audio/mpeg" si es ogg será type="audio/ogg".
Si quieres que la radio comience a escucharse al abrise la página web deberás indicarlo con la palabra autoplay. Si lo borras tendrán que pulsar play para comenzar a escuchar.
<audio autoplay controls="controls"> <source src="https://radios.yanapak.org/radio_trama" type="audio/ogg" /> </audio> Si estás usando un servidor Shoutcast, tendrás que añadir un punto y coma (;) al final de la URL, tal como se indica a continuación. Si tuviera "punto de montaje" como /stream o /live no hará falta el punto y coma.
<audio autoplay controls="controls"> <source src="http://185.85.29.166:8000/;" type="audio/mpeg" /> </audio> [audio src="https://radios.yanapak.org/radiozapote.ogg" ]Con este código debería funcionar cualquier tipo de streaming. Recuerda que, tal como indicamos más arriba, si el streaming no es https:// el reproductor no funcionará en Chrome.
Revisa aquí otros ejemplos.
A contuniación entramos en detalles por si no te queda claro qué URL debes colocar o qué tipo de plataforma de streaming estás usando.
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.
Ejemplo con la URL de Radio Kasandrxs en el navegador Firefox. http://stream.codigosur.org:8000/kasandrxs.mp3
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/En la versión 2 de Shoutcast puedes encontrar detrás de la barra la palabra /live o /stream.
Servidores con Icecast:
Los distingues porque tienen “punto de montaje”, en este ejemplo es /kasandras.mp3
http://stream.codigosur.org:8000/kasandrxs.mp3Cuidado, 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/radiouniversitariaEn 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
Tal como dijimos al inicio de este artículo el código sirve para cualquier tipo de URL de streaming, ya sea Shoutcast o Icecast y tenga o no punto de montaje o extensión en la URL.
Si el reproductor lo vas a usar en WordPress el código es diferente. [Más detalles].
¡No te olvides del punto y coma después de la barra (/;) si estás usando Shoutcast y no tienes un /stream o /live al final!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.
