Desarrollador de aplicaciones web y de escritorio, amante de la tecnología y autodidacta, me gusta conocer otras tecnologías, escribir artículos para compartir en la web y para estar al tanto en los nuevos paradigmas, respeto las políticas de software privativo y libre, ya que estas políticas son las normas que permite el desarrollo tecnológico social de la humanidad. filvovmax@gmail.com -- info@gitmedio.com
Reproductor de audio para radio online, plugin para wordpress
Hace semanas a tras, andaba buscando un plugin con funcionalidad de Widget, para que escuchen radio online en una página echo en wordpres, ya que econtre algunos, pero estos generan código corto en otras palabras (short code), la cual no era lo que andaba buscando, entonces decide hacer un sencillo widget reproductor de audio para radio online, plugin para wordpress, en el que se utiliza el reproductor audio/video JPlayer, este reproductor conocí hace mucho tiempo y no dude en usarlo para el plugin.
A continuación se menciona las características de JPlayer, que tiene compatibilidad para PC escritorio y dispositivos móviles.
- Adaptable y personalizable utilizando HTML y CSS
- Libre y de código abierto
- Amplio soporte de plataforma – multi-codec, multi-navegador y multiplataforma
- Soporte para los navegadores de escritorio Chrome, Firefox, Internet Explorer, Safari, Opera.
- Soporte para los dispositivos móviles como:
- iOS: Mobile Safari: iPad, iPhone, iPod Touch
- Android: Android 2.3 Browser
- Blackberry: OS 7 Phone Browser, PlayBook Browser
- Soporte para los formatos de archivos como:
- HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
- Flash: mp3, mp4 (AAC/H.264), rtmp, flv
Para el desarrollo de plugin básicamente se utilizo métodos y clases propios de WordPress como: acción gancho add_action, en el que se registra la clase llamado Miwidget esta hereda de la clase WP_Widget.
En el siguiente ejemplo de código se muestra la creación de plugin.
Archivo:Radio-online-JPlayer.php
/*
Plugin Name: Radio online JPlayer
Plugin URI: https://www.gitmedio.com/reproductor-radi…plugin-wordpress/
Description: Widget para wordpress, reproductor de audio para radio online basado en el reproductor JPLayer
Author: Rodrigo Chambi Q
Version: 1.0
Author URI: http://www.gitmedio.com/
Text Domain: Radio online JPlayer
Licence: GPL2
*/
//Se improta la clase
require_once 'Widget_class.php';
//Gancho que ejecutara el método Carga_wiget
add_action("widgets_init","Carga_wiget" );
if(!function_exists("Carga_wiget")){
function Carga_wiget(){
//Se registra la clase
register_widget('Miwidget');
}
}
Una vez creado la estructura del plugin, a continuación en la siguiente código se escribe las funcionalidades, para mostrar en el panel de configuraciones, es decir se almacenará datos en la base de datos, y estas también sean recuperados al memento de ejecutarse, es decir para el lado del administrador y el cliente navegante.
Archivo:Widget_class.php
/**
* Clase Widgret
*/
class Miwidget extends WP_Widget{
//Constructor de la clase
function __construct(){
$opciones=array(
"classname"=>"miclase",
"description"=>"Reproductor de audio, para radio en online"
);
$this->WP_Widget('css_id','Radio online JPlayer',$opciones);
}
public function form($instance){
$deafault=array(
"titulo"=>"Titulo de la radio",
"IP-Radio"=>"http://50.22.219.97:31127/;",
"Nombre"=>"Nombre de la Radio"
);
$instance=wp_parse_args((array)$instance,$deafault);
$titulo=esc_attr($instance["titulo"]);
$Direccion=esc_attr($instance["IP-Radio"]);
$Nombre=esc_attr($instance["Nombre"]);
<!--Interfaz de usario (Formulario) para el lado de administrador-->
<p><label>Titulo:</label>
<input class="widefat" type="text" name="echo$this->get_field_name("titulo");" value=" echo $titulo; "></input>
<label>Dirccion URL:</label>
<input class="widefat" type="text" name="echo $this->get_field_name("IP-Radio");" value="echo $Direccion;">
<label>Nombre Radio:</label>
<input class="widefat" type="text" name="echo $this->get_field_name("Nombre");" value="echo $Nombre;">
</p>
}
public function update($new_instance,$sold_instance){
$instance = $sold_instance;
$instance["titulo"] =strip_tags($new_instance["titulo"]);
$instance["IP-Radio"] =strip_tags($new_instance["IP-Radio"]);
$instance["Nombre"] =strip_tags($new_instance["Nombre"]);
return $instance;
}
public function widget($args, $instance){
extract($args);
$titulo=apply_filters('widget_title',$instance['titulo']);
echo $before_widget;
echo $before_title.$titulo.$after_title;
//Se importan los Recursos de JPlayer, es decir la libreria JavaScript
wp_enqueue_style( 'Style_Radio', plugins_url(). '/Radio-online-JPlayer/Jplayer/skin/css/jplayer.pink.flag.min.css', array(), '1.0.0' );
wp_enqueue_script( 'script_plugins_radio', plugins_url(). '/Radio-online-JPlayer/Jplayer/jplayer/jquery.jplayer.min.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'script_radio_js', plugins_url(). '/Radio-online-JPlayer/Script_Radio_online.js', array(), '1.0.0', true );
//Definimos las variables WordPress a enviar dentro de un array
$params = array (
'Titulo' => $instance['titulo'],
"IP"=>$instance['IP-Radio'],
"Nombre"=>$instance['Nombre'],
"phat_swgf"=>plugins_url(). "/Radio-online-JPlayer/Jplayer/jplayer/"
);
//Usamos esta función para que coloque los valores en linea
//Para recuperar IP, Nombre de la radio en el archivo Javascript
wp_localize_script('script_radio_js','Datos_Radio',$params);
<!-- Aqui es donde se muestra el reproductor de audio para el lado del cliente-->
<div id="" style="width:80%; margin: 0 auto;">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
</div>
</div>
</div>
<div class="jp-details">
<div class="jp-title" aria-label="title"> </div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</div>
echo $after_widget;
}
}
Para que aquellos que no son desarrolladores, pueden descargarse el plugin empaquetado listo para instalar, el procedimiento de instalación es sencillo como cualquier otro plugin. si es que no sabe como instalar ver el vídeo.
Descargar plugin para radio online wordpres version antigua
En el siguiente enlace es una versión mejorada de Reproductor de audio para radio online, plugin para wordpress con opciones de configuración para las redes sociales y el logotipo para la radio.
Con respecto a esta versión, se ha modificado por petición por algunos usuarios en la que incluye la opción de reproducción automática.
Reproductor de audio para WordPress 806KBSi tienes una página creada en Joomla descarga el siguiente plugin, es un reproductor avanzado.
Reproductor de audio para Joomla 672KBPara realizar la instalación del plugin en wordpress ver el siguiente video.
Saludos Rodrigo.
Como se puede hacer para que el reproductor muestre el nombre del tema que se esta reproduciendo?, yo envío esa información a icecast
Rodrigo excelente plugin verdaderamente, me funciona perfecto con la versión mas reciente de WP. Un excelente trabajo, te felicito.
Sólo me gustaría que mostrara el nombre del tema que está sonando y así podría enviarse también mensajes a traés de este campo
no me esta tomando esta IP ttp://190.3.169.36:8063/stream , sera que estoy ingresando mal los datos ! saludos atte desde buenos ires
Hoola buenas noches no me funciona pero luego leí que es para wordpress version antigua como puedo actualizar para mas actual 2021
Hola.
Anibal deberia de funcionar con la version mas reciente.
Hola como debo cargar el ip y el puerto? Estoy colocándolo así directamente y no me toma la radio puedes poner un ejemplo?
hola, al cargar el plugin en WP y activarlo no me da opciones de nada, entonces como configuro este plugin en WP.????
Seguramente tienes instalado el plugin.
La configuración tienes que hacer en –>Apariencias –>widgets buscar Gitplayer y añadir el widget según permita tu tema de wordpresss, en el widget
introduces la IP y puerto del servidor streaming.
Hola estimado, su plugin es excelente lo felicito, funciona perfecto y es sencilla su instalación. El único inconveniente que tuve es que la reproducción automática no me funciona. Me podría indicar en que parte del código donde se controla la reproducción para ver si puedo solucionarlo?
Saludos.
me funciona muy bien en todos los navegadores que no sean Chrome, en este ultimo no funciona.. que podrá ser?
Muy buenas tardes, necesito agregar unas lineas de código para que se pueda reproducir chrome.. pero no se como debo hacerlo.. agradezco profundamente tu fina atención….
cuando agregue las lineas de código se me bloqueo.. por esa razón no te las puedo indicar
Muchas gracias
Que buen aporte, gracias justo lo que andaba buscando. Tal vez esta en algun repo? hay un par de ajustes en los contendores del texto de «siguenos» y en el de la duración de la pista, me gustaría contribuir.
Hola, acabo de instalar el plugin y NO encuentro el plugin, NO lo veo, ¿Donde puede estar el plugin?.
Un Saludo
lo que quiero es que a parezca mi reproductor y no se como hacer me puede ayudar por gracias
Hola, debes ir a la parte de apariencia/widgets y agregar el reproductor al panel lateral.
hola Rodrigo mi nombre es Dulce tengo un problema tengo una radio online y tengo el codigo de html pero no se como hcer para ponerlo en mi web wordpress si me puede ayudar saludos
Hola, puedo reutilizar este código para un proyecto de radio online? Es decir puedo modificar, o se necesita autorización?
Si Jose carlos. Utiliza el codigo.
Hola amigo, me gusto el pluging en su interfaz, pero no me funciona aparece la imagen pero no reproduce la radio, como me puedes ayudar
La Ip es http://158.69.31.15 Puerto 8000
Importante: «Número de oyentes: 70», ¿Que fragmento de código lo permitiría?.
Curiosidad: ¿Qué puede impedir que no funciones «Reproducción automática», por ejemplo para https://icecast.teveo.cu/3CMM7zph
—- Disculpen: desconocía «… políticas de reproducción automática …»
El reproductor solo funciona en navegador mozilla, en google chrome no me reproduce las radios pertenecientes a listen2myradio.com
como podria resolver esto?
Slds
lo instale en mi pagina, coloco los valores y cuando doy play no reproduce.
Hola , yo no he podido solucionar esto, he intentado varias formas pero la ip debe tener problemas.
Hasta el momento, solo funcionan los reproductores html pero los que intento en wordpress no he tenido éxito, el que usaba estaba bien pero no se que pasó. Dicen que por una actualización algunos streaming dejaron de funcionar y que debe solucionar el proveedor de este
Buenas tardes, el plugin funciona muy bien, pero necesito modificarlo para que antes de que reproduzca lo que salga por la radio, reproduzca un anuncio. Creo que es concatenando dos cadenas pero estoy haciendo pruebas y me da error. O si hay otra manera para hacer eso. Podrías ayudarme?
Gracias.
Muy buen trabajo!! una duda existencial, seria posible cambiar o agregar algo para mostrar el nombre del tema que se esta escuchado?? currrentsongs?
como se puede cambiar el tamaño del reproductor??
buen dia! Rodrigo, no pude instalarlo porque no me aparecen los archivos.
como los puedo conseguir??
Saludos!
como cambiar de musica? o como se decia antes de dial?
saludo hermano no me funciona ise todo como dijiste en el tutorial pero en microfono solo empieza a dar bueltas pero no suena
tengo problemas de reproduccion en https, no logra reproducir el audio porque mi pagina usa ssl
saludos, sabes todo bien, pero el audio no me sale, debe ser por el servidor de streaming
la url que esta tratando de reproducir es
http://cast3.serverhost.cl:xxxx/
el player soporta aac ?
es compatible con la version 1.9.8 de shoutcast ?
hola consulta no me funciona si lo activo se bloquean los widgets y no puedo mover nada en el escritorio de wp
Hola Leandro, Que version de WP estás utilizando y el theme, para poder solucionar el problema.
FELICIDADES. esta super el plugin para radio online, sigue adelante que te estamos siguiendo.
Funciona en blogger?? Como se haría??
ESTA INCREIBLE TU REPRODUCTOR MUCHISISISIMAS GRACIAS!! Ya habia probado el primero hace algun tiempo pero el Gitplayer 0.1. ESTA GENIAL!! PERO no se COMO hacerle para que el reproductor INICIE SOLO en cuanto se abra mi pagiNA WEB es incomodo tener que explicarle a la gente que lo busque y que le de click al boton y con el primer reproductor si se iniciaba solo aunque se descuabraba el tamaño, me puedes indicar ocmo hacer que se inicie solo el Gitplayer 0.1.?? MUCHISIMAS GRACIAS Y FELICIDADES!
Rodrigo muchas gracias por el aporte, dure bastante buscando un player para mi pagina radial. le hice los ajustes de css para que quedara apenas en el tamaño del widget y ha funcionado perfecto. Solo tengo un comentario y es que a mi personalmente (no se si a alguien mas le ha pasado) pero algun conflicto esta teniendo ya que no me permite mover los widget o colocarlos dentro de los contenedores, se han congelado y ya desactivando el plugin noté que se debia al gitplayer 0.1. tambien me esta generando conflicto en el plugin Slider WD en donde esconde las imagenes y no permite añadir imagenes nuevas al slider. Puede ser algun tipo de conflicto del script con los otros plugins. Gracias por la atencion y muchas gracias por alguna informacion si esta tuviera alguna solucion.
person: Quise decir de pagando buscando….
Hola Rodrigo ! me gustaría saber cuanto vale la versión de pagando buscando un audioplayer que funcione en iOS 11
Hola saludos a todos gracias por hacer comentario, he leído todo los comentarios, muchos tienen problema, con respecto a la configuración del diseño. Por cual decide hacer una nueva versión mejorado libre para usarlo, y otro con funciones avanzados lo cual es de pago.
Hola Juan, claro que si se puede, el plugin puedes modificarlo, a tu gusto.
Hola, quisiera saber como hacer para que el plugin funcione en un popup, cosa que al navegar el sitio no se recargue el audio, se puede?
Ahora funciona bien, pero me paso lo siguiente, ayer cuando comenzó un programa y varias personas comenzaron a escuchar se comenzó a cortar la transmisión, y hoy pongo nuevamente y esta funcionando bien, que puede ser?, gracias
Hola pude instalarlo pero pongo el IP de la radio y no logra funcionar, que puede ser?, saludos
Ahora funciona bien, pero me paso lo siguiente, ayer cuando comenzó un programa y varias personas comenzaron a escuchar se comenzó a cortar la transmisión, y hoy pongo nuevamente y esta funcionando bien, que puede ser?, gracias
tengo una duda
como podre editar el css del plugin por que tengo un error con el widget por que los pixeles del plugin se me desacomodan y asi mismo se acomodan mal impidiendo visualizarce correctamente el plugin mi pregunta es como puedo y donde puedo editar el CSS del plugin para arreglar los pixeles de ella misma
Hola! Genial el plugin de radio online, muy fácil de usar! muchas gracias!!
Me funciona bien, solo que megustaria debajo del baner
http://www.radiolaser.com.ar
Hola…he seguido todos los pasos indicados en el video y el reproductor en mi página se ve como desfasado, no se ve todo el skin completo ni el nombre de mi radio.
Hola…he seguido todos los pasos indicados en el video y el reproductor en mi página se ve como desfasado, no se ve todo el skin completo ni el nombre de mi radio.
Hola si no se muestra el skin tal cual, es porque el tema actual que estás utilizando en wordpress puede que esté dominando al diseño de JPlayer, te recomiendo un tema que no interfiera con el diseño del skin
Un abrazo Guzman, edita el archivo en la ruta donde se instala los plugins:
Radio-online JPlayer\Jplayer\skin\css\jplayer.pink.flag.min.css, para configurar las dimensiones.
El plugin es muy minimalista, pronto estaré actualizando para una mejor funcionalidad.
Hola Rodrigo Chambi,
Felicitaciones por el plugin, funciona bien y se entiende muy bien como instalarlo. Mi pregunta era la siguiente:
Como hacer para que el mismo plugin, no interfiera con las dimensiones del header en donde lo quiero poner. Hay alguna manera de editar eso? o solo tengo que buscar otro lado para situar el plugin?
Muchas gracias