Reproductor de audio para radio online, plugin para wordpress

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">&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.

Reproductor de audio para WordPress 806KB

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

Reproductor de audio para Joomla 672KB

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

Sobre el autor
Rodrigo Chambi Q.

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

56 Comentarios

  1. Responder

  2. Responder

  3. De Pablo Homero

    Responder

  4. Responder

    • De Rodrigo

      Responder

      • De Raquel

        Responder

  5. Responder

    • De Rodrigo

      Responder

  6. De Nelson Vásquez

    Responder

  7. Responder

  8. Responder

  9. De aguito

    Responder

  10. De Jon

    Responder

  11. De dulce

    Responder

    • De aguito

      Responder

  12. De dulce

    Responder

  13. De José Carlos

    Responder

    • De Rodrigo

      Responder

  14. Responder

  15. De manuel.barrueco

    Responder

    • De manuel.barrueco

      Responder

  16. Responder

  17. De jizuz

    Responder

    • De Carlos

      Responder

      • De Carlos

        Responder

  18. De Alex

    Responder

  19. Responder

  20. De Alejandro Martinez

    Responder

  21. Responder

  22. De giovanny santamaria

    Responder

  23. De jose

    Responder

    • De Werner Lopez

      Responder

  24. De eduard

    Responder

  25. De mario andres ossandon garcia

    Responder

  26. De leandro

    Responder

    • De Rodrigo

      Responder

  27. De William

    Responder

  28. De Ranking Europas

    Responder

  29. De Bolivar

    Responder

  30. De alexander

    Responder

  31. De Vicente

    Responder

  32. De Vicente

    Responder

  33. De Rodrigo

    Responder

  34. De Rodrigo

    Responder

  35. Responder

  36. De Guillermo

    Responder

  37. De Guillermo

    Responder

    • De Guillermo

      Responder

  38. Responder

  39. De Matias

    Responder

  40. Responder

  41. De Azul

    Responder

  42. De Azul

    Responder

    • De Rodrigo

      Responder

  43. De Rodrigo

    Responder

  44. De Guzman

    Responder