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

EN GITMEDIO

Como descargar e instalar WordPress en mi hosting cPanel

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">&nbsp;</div>
        <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</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">&nbsp;</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.

Si  tienes una página creada en  Joomla  descarga el siguiente plugin, es un reproductor avanzado.

Para realizar la instalación del plugin en wordpress ver el siguiente video.