Dewplayer: MP3 Player Gratis

  • 23/09/2008
  • 1:55 pm
  • unijimpe

Dewplayer es un reproductor de MP3 sencillo pero completo el cual puedes incluir en tu web de forma gratuita con solo unas líneas de código.

Este player viene en tres versiones: Mini 1.9 (160x20), Classic 1.9 (200x20) y Multi 1.9 (240x20) cada uno de ellos con diferentes controles de acuerdo a nuestras necesidades desde el mas sencillo hasta el mas complejo. Otro de los puntos interesantes de este Player es que si el mp3 tiene metadata con información del tema, esta se mostrará en el player.

Cargando Flash

Utilizando Dewplayer
Primero seleccionamos el tipo de player a utilizar y los descargamos en el web oficial, como esta player esta hecho en flash, tenemos la necesidad de incluir un SWF, para ello escribimos el siguiente código donde se puede observar que le pasamos como parámetro el archivo que deseamos reproducir.

HTML:
  1. <object type="application/x-shockwave-flash"
  2.  data="dewplayer.swf?mp3=test.mp3" width="200" height="20">
  3. <param name="movie" value="dewplayer.swf?mp3=test.mp3" />
  4. </object>

Ahora si utilizas SWFObject para incluir Flash en tus páginas web puedes incluir este player de la forma:

HTML:
  1. <div id="player"></div>
  2. <script type="text/javascript">
  3. var so = new SWFObject('dewplayer.swf','player','200','20','9');
  4. so.addVariable("mp3","test.mp3");
  5. so.write('player');
  6. </script>

Así de sencillo, solamente tienen que especificar el archivo que desean reproducir. Definitivamente es una herramienta que nos sacará de muchos apuros.

Posts Relacionados

ToobPlayer FLV/Youtube Player

  • 07/09/2008
  • 8:31 pm
  • unijimpe

ToobPlayer es un componente para flash que te permitirá tener un Video Player para reproducir archivos FLV o vídeos Youtube directamente y sin necesidad del Player original de YouTube. Además de ello viene con 5 diferentes skins con lo cual podrás seleccionar el que mas se ajuste a tu diseño.

Este componente lo puedes utilizar con ActionScript 2.0, para ello abres el panel de Componentes y arrastras sobre el stage el Skin que mas te agrade y en el panel de propiedades ingresas la ruta del archivo FLV a reproducir.

Si deseas reproducir vídeos de Youtube, adicionalmente tienes que colocar la dirección de un proxy de Youtube, el cual es un archivo php que se encarga de resolver el archivo flv del video que se esta solicitando para luego reproducirlo. Este archivo proxy viene incluido entre los archivos del componente y se llama fl_youTubeProxy.php.

Ahora, otra forma de asignar el video que deseas reproducir es utilizando ActionScript, para ello si vas a reproducir un video de Youtube, primero nombras el elemento, por ejemplo player para luego asignas el archivo a reproducir:

Actionscript:
  1. player.url = "http://www.youtube.com/watch?v=yCS_-DshXek";
  2. player.youTubeProxy = "fl_youTubeProxy.php";

Adicionalmente tiene soporte para fullscreen el cual puedes habilitar en el panel de configuración. Como pueden ver es muy sencillo de utilizar, con solo unos pasos o unas lineas de código podemos tener un video player de muy buena calidad integrado a nuestro web.

Posts Relacionados

JSON con Flash

  • 05/08/2008
  • 12:40 am
  • unijimpe

Como comentabamos hace poco en JSON con Mootools, JSON es un formato para intercambio de datos que a diferencia de XML es mucho mas ligero pues se transmite la información como un objeto Javascript. En esta oportunidad veremos como utilizar JSON con Flash.

Cargando Flash

Obteniendo los Datos
Los datos en formato JSON para nuestro ejemplo lo obtendremos del servicio Google Ajax Search API del cual hemos comentado en un post anterior, para ello creamos un proxy el cual se encargará de hacer el cambio de dominio para poder acceder a esta información.

PHP:
  1. $apiQue = "Google"; // variable a consultar
  2. $apiKey = "tu_key_google"; // key para acceder al servicio
  3. $apiUrl = "http://ajax.googleapis.com/ajax/services/search/web";
  4. if (isset($_GET['query'])){
  5.    $apiQue = urlencode($_GET['query']);
  6. }
  7. readfile($apiUrl."?v=1.0&key=".$apiKey."&q=".$apiQue);

Utilizando JSON con ActionScript 3
Por defecto Flash no puede interpretar JSON, pero para ello utilizaremos la librería as3corelib el cual contiene una gran variedad de clases para extender la funcionalidades del AS3 entre ellas un parser de JSON. Entonces descargamos los archivos y utilizamos las clase ubicadas en la carpeta com.

En nuestro archivo fla lo primero que hacemos es importar las clases necesarias para el funcionamiento de nuestro script.

Actionscript:
  1. import com.adobe.serialization.json.*;

Lo siguiente es leer el archivo que contiene la respuesta en JSON del servidor, esto lo hacemos con la clase URLLoader, luego agregamos un listener para detectar que se ha completado la carga para luego ejecutar la función decodeJSON.

Actionscript:
  1. var loader:URLLoader = new URLLoader() ;
  2. var request:URLRequest = new URLRequest() ;
  3. request.url = "proxy.php?query=unijimpe";
  4. loader.load(request) ;
  5. loader.addEventListener(Event.COMPLETE, decodeJSON) ;

Luego definimos al función decodeJSON, la cual se ejecutará inmediatamente después de completarse la carga de los datos, aquí utilizamos el método JSON.decode el cual se encarga de convertir el texto en formato JSON a un objeto que sera fácilmente manipulable con ActionScript.

Actionscript:
  1. function decodeJSON(event:Event):void {
  2.    var loader:URLLoader = URLLoader(event.target); 
  3.    var data:Object = JSON.decode(loader.data);
  4.    var results = data.responseData.results;
  5.    for (var i=0; i<results.length; i++) {
  6.       var tmp = results[i];
  7.       trace(i + " --> " + tmp.title + "\n" + tmp.url);
  8.    }
  9. }

Unimos estos elementos y tenemos un parser de JSON de manera sencilla, como podemos ver lo que se hace es convertir el texto cargado en un objeto que es muy fácil de manipular en Flash.

Completando nuestra aplicación
En el ejemplo anterior, solo hemos trazado los resultados, es momento de agregar un campo de texto para ingresar el criterio de búsqueda y otro campo de texto para mostrar los resultados, con lo cual obtenemos el siguiente código.

Actionscript:
  1. import com.adobe.serialization.json.*;
  2.  
  3. var vPath:String = "proxy.php?query=";
  4. var vRequ:URLRequest = new URLRequest();
  5. var vLoad:URLLoader = new URLLoader();
  6. vRequ.url = vPath+"unijimpe";
  7. vLoad.load(vRequ);
  8. vLoad.addEventListener(Event.COMPLETE, onLoaded);
  9.  
  10. function onLoaded(event:Event){
  11.    var rpta:URLLoader = URLLoader(event.target);   
  12.    var json:Object = JSON.decode(rpta.data);
  13.    var data:Array = json.responseData.results;
  14.    var vcon:String = "";
  15.    for (var i:Number=0; i<data.length; i++) {
  16.       var tmp = data[i];
  17.       vcon+= "<a href='"+tmp.url+"'>"+tmp.title+"</a>";
  18.       vcon+= "<br>"+tmp.content+"<br><br>";
  19.    }
  20.    txtcontent.htmlText = vcon;
  21.    scroller.scrollTarget = txtcontent;
  22. }
  23.  
  24. btsearch.addEventListener(MouseEvent.CLICK, onClick);
  25. btsearch.buttonMode = true;
  26. function onClick(e:Event) {
  27.    txtcontent.htmlText = "Loading...";
  28.    vRequ.url = vPath+escape(txtQuery.text);
  29.    vLoad.load(vRequ);
  30. }

El resultado de este ejemplo lo pueden ver al inicio de este post, como se observa ingresamos el criterio de búsqueda y obtenemos el resultado deseado. Finalmente les dejo los archivos fuente de este ejemplo para que lo descarguen y puedan realizar sus pruebas.

Posts Relacionados