Tu radio con WordPress capítulo uno: el reproductor

En este primer tutorial de la serie tu radio con WordPress te mostraremos como insertar un prolijo reproductor para la radio online, que funciona tanto en streamings bajo https o http y en cualquier navegador.

AudioIgniter un plugin para tu radio con WordPress

Cuando hablamos de la radio con WordPress obviamente estamos hablando de un sitio montado en un WordPress con hosting dedicado y no de WordPress.com, lo que nos permitirá mucha mas libertad para usar plugins y plantillas a nuestra elección.

Uno de estos plugins es AudioIgniter un excelente player pensado fundamentalmente para crear listas de reproducción pero que se puede usar perfectamente para escuchar streamings y lo hace mucho mejor que otros dedicados, funciona con radios que transmiten bajo http o https (siempre y cuando no estén mezclados) y en todos los navegadores.

Abrir el reproductor en una ventana nueva

AudioIgniter nos permite insertar el player en cualquier lugar de tus páginas o entradas mediante un shortcode en tu radio con WordPress, sin embargo si colocamos el reproductor por ejemplo en la página de inicio se presenta el inconveniente que si cambiamos de página se nos cortará la reproducción de la radio y esto obviamente no es algo que nos interese.

Para subsanar esto vamos a crear una página con el reproductor y la vamos a llamar desde una imagen o enlace de texto pero haremos que se abra en una nueva ventana, de esta forma el reproductor siempre quedará sonando minimizado aunque nos movamos por distintos sitios.

Código HTML para enlace de texto

Para insertar un enlace de texto que abra la pagina que contiene el reproductor en una ventana nueva debemos insertar el código que te mostramos a continuación en un bloque HTML personalizado en Gutemberg o un bloque HTML en cualquier constructor visual.

<a href="https://liberaturadio.org/mestiza-101-7-fm/" target="_blank" onclick="window.open(this.href, this.target, 'width=400,height=600'); return false;">Escucha la radio</a>

En el ejemplo https://liberaturadio.org/mestiza-101-7-fm/ es la pagina que contiene el reproductor y que queremos abrir en la nueva ventana, podemos cambiar las dimensiones en que se mostrará la pagina modificando el ancho y la altura width=400,height=600, mientras que Escucha la radio es el texto del enlace. Veamos un ejemplo práctico.

Escucha la radio

Código HTML para enlace con imagen

El proceso para insertar una imagen que al hacer clic nos abra la pagina del reproductor en una nueva ventana es similar.

<script type="text/javascript">
//<![CDATA[
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings = "height=600,width=400,top="+TopPosition+",left="+LeftPosition+",resizable=yes,scrollbars="+scroll;
win = window.open(mypage,myname,settings);
}
//]]>
</script>
<a href="https://liberaturadio.org/mestiza-101-7-fm/" onclick="NewWindow(this.href,'name','720','355','yes');return false"><img src="https://liberaturadio.org/wp-content/uploads/2020/09/chica-escuchando-radio.png" border="0"></a>

Como en el caso anterior https://liberaturadio.org/mestiza-101-7-fm/es la pagina que queremos abrir en la nueva ventana, width=400,height=600 son las dimensiones del frame y https://liberaturadio.org/wp-content/uploads/2020/09/chica-escuchando-radio.png es la ruta a la imagen que queremos mostrar y sobre la que haremos clic. Veamos un ejemplo funcional:

Aclaración importante

Desde hace un tiempo los navegadores modernos (primero fue Chrome y ahora todos) no permiten mezclar paginas seguras https y streamings inseguros http, si este es tu caso el streaming no va a poder reproducirse. Las soluciones son dos: una que tanto tu pagina como el streaming sean seguros, tenlo en cuenta a la hora de contratar un servicio de streaming. La otra solución muy improbable y poco práctica es que desde la pagina segura (por ejemplo esta) se llame a una pagina en un servidor no seguro en el popup donde estaría el player que reproduce un streaming también inseguro.

Ya tienes los códigos necesarios y te presentamos el plugin del reproductor que usaremos para nuestro sitio, en el siguiente video puedes ver todo el proceso. Si tu conexión es lenta puedes visualizarlo con menor resolución en Fediverse TV

En el próximo capítulo te mostraremos como crear la parrilla de programación para tu radio con WordPress.