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
[agregar]898[/agregar]
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: http://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.
[archivo url="http://www.gitmedio.com/ejemplos/Gitplayer.zip"]Reproductor de audio para Wordpress [/archivo]
Si tienes una página creada en Joomla descarga el siguiente plugin, es un reproductor avanzado.
[archivo url="http://www.gitmedio.com/ejemplos/Gitplayer-joomla.zip"]Reproductor de audio para Joomla [/archivo]
Para realizar la instalación del plugin en wordpress ver el siguiente video.