Reproductor Audio/Video Web - PlayList XML desde una Carpeta

Tutorial - Reproductor Multimedia Para Sitio Web con Lista de Reproducción Generada a partir de los Archivos Contenidos en un Determinado Directorio o Carpeta

Por si el título del Tutorial no es muy descriptivo con respecto a lo que se quiere hacer, empezare por explicar con mayor detalle lo que se pretende hacer en este Tutorial.

El problema que se me presento cuando quise insertar un reproductor de audio y video en una Página Web es que la mayoría de ellos solo permitía reproducir un solo archivo, cuando encontre uno que manejaba listas de reproducción esta era tratada con XML, lo que esta bueno, pero cuando quería agregar archivos de audio o video, ademas de tener que subir el archivo al servidor, tenía que agregar el detalle del archivo a la Lista de Reproducción XML. Cuando lo que quería que el reproductor me cargue automáticamente todos los archivos multimedia contenidos en un determinado Directorio o Carpeta. De aqui el título del Tutorial.

Bueno, explicado el objetivo, a la práctica.

Lo que haremos será Generar la Lista de Reproducción XML a Mano, o sea que escibiremos un código ( En PHP) que genere nuestra lista de reproducción listando todos los archivos multimedia contenidos en una determinada carpeta o directorio. Luego esta lista será la que utilizará nuestro reproductor para reproducir los archivos multimedia.

A modo de práctica lo vamos a hacer con dos Reproductores diferentes:

1°- Con el Reproductor JW Player para Reproducir Audio y Video

2°- Con un Reproductor desarrollado en Flash para Reproducir Solo Audio

1°- Con el Reproductor JW Player para Reproducir Audio y Video

Antes que nada tenemos que descargar el reproductor de esta página: http://www.longtailvideo.com/players/jw-flv-player/

Una vez descargado lo descomprimimos. Los archivos que usaremos son jwplayer.js y player.swf.

Nota: Las listas de reprodución que maneja JWPlayer son RSS las cuales son un tipo de XML y tienen la siguiente estructura:
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/">
<channel>
<title>MRSS Playlist Playlist</title>
<item>
<title>Video MP4</title>
<media:content url="files/video.mp4" />
<media:thumbnail url="/thumbs/bunny.jpg" />
<description>Esta es la descripción del Primer Multimedia.</description>

</item>
<item>
<title>Audio MP3</title>
<media:content url="files/JoseWEB_TRACK_TRECE.mp3" />
<media:thumbnail url="/thumbs/sintel.jpg" />
<description>Esta es la descripción del Segundo Multimedia.</description>
<!-- <jwplayer:duration>888.06</jwplayer:duration> -->
</item>
<item>
<title>Video FLV</title>
<media:content url="files/RUBIK_en_1_minuto.flv" />
<media:thumbnail url="/thumbs/elephant.jpg" />
<description>Esta es la descripción del Tercer Multimedia.</description>
<!-- <jwplayer:duration>653.79</jwplayer:duration> -->
</item>
</channel>
</rss>

Este es archivo XML que tenemos que Generar y como veran la partes que nos interesa son lo que son las etiquetas <item>, las cuales contienen los detalles de nuestros archivos multimedia como El Título (<title>, la ruta donde se encuentra alojado el archivo (<media:content>, una imagen a modo de vista previa (<media:thumbnail>, una descripción del archivo (<description> y la duración (<jwplayer:duration>. Si queremos podemos abviar la imagen, la descripción y la duración. En este caso yo obviare solo la duración.

Ahora vamos a crear un archivo con extensión PHP al que Llamaremos GenerarPlayList.php con el siguiente código:
<?php
$dir = "./Uploads/"; //Comentario: Carpeta donde estan alojados los archivos multimedia
$Vector=array(); //Comentario: Array donde guardaremos los nombres de los archivos cotenidos en $fir
if (is_dir($dir))
{
if ($gd = opendir($dir))
{
while (($archivo = readdir($gd)) !== false)
{
if ($archivo != "." & $archivo != ".." & $archivo != "list.php"
{
if (is_dir($archivo))
{
$Vector[]=$archivo;
}
else
{
$Vector[]=$archivo;
}
}
}
closedir($gd);
}
}
//Comentario: En $buffer vamos a ir creando nuestro archivo XML
$buffer='<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/">

<channel>';
$buffer.="<title>Lista de Reproducción RSS</title>";
while (list (, $valor) = each ($Vector)):
$buffer.="<item>";
$buffer.="<title>$valor</title>";
$buffer.="<media:content url='Uploads/".$valor."' />";
$buffer.="<media:thumbnail url='Uploads/".$valor."' />";
$buffer.="<description>Esta es la descripción general.</description>";
$buffer.="</item>";
endwhile;
$buffer.="</channel>";
$buffer.="</rss>";
$file=fopen("PlayList.xml","w+";//Cometario: Abrimos o creamos el archivo PlayList.xml
fwrite ($file,$buffer); //Cometario: Guardamos los datos de $buffer en nuestro archivo PlayList.xml
fclose($file); //Comentario: Cerrramos el archivo
?>

Ahora solo nos queda Crear una página PHP para insertar el reproductor, la llamaremos Reproductor.php
<html>
<head>
<title>Reproductor Multimedia con Lista de Reproducción Creada a Partir de los Archivos Contenidos en un Determinado Directorio</title>
<script type='text/javascript' src='jwplayer.js'></script>
</head>

<body>
<?php
include("GenerarPlayList.php"; //Cometario: Esta linea es para generar la lista antes de abrir el reproductor
?>
<div id='mediaspace'></div>

<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'player.swf',
'playlistfile': 'PlayList.xml',
'playlist': 'bottom',
'autostart': 'true',
'shuffle': 'true',
'frontcolor': 'cccccc',
'lightcolor': '66cc00',
'skin': 'http://www.longtailvideo.com/jw/upload/stylish.swf',
'backcolor': '111111',
'playlistsize': '200',
'controlbar': 'bottom',
'width': '470',
'height': '470'
});
</script>
</body>
</html>

Y listo! Para probar solo debemos abrir esta última página en el navegador (Obvio que desde localhost no haciendo doble click porque de esta forma no funcionara el código PHP)...

Nota: Los archivos jwplayer.js, palyer.swf, la carpeta con los archivos multimedia, el archivo GenerarPlayList.php y Reproductor.php tienen que estar en la misma carpeta.

Nota: En el archivo GenerarPlayList.php, en la variable $dir debemos especificar: Si estamos trabajando en local $dir="./Uploads/" y si estamos trabajando en un servidor remoto $dir="Uploads/"

2°- Con un Reproductor desarrollado en Flash para Reproducir Solo Audio

Lo primero, descargar el reproductor de esta página: http://www.robnei.net/super-reproductor-flash-mp3-robney

Si ya no esta disponible lo pueden buscar como Super Reproductor Flash MP3 Robney.

Descomprimimos. El único archivo que nos interesa es player.swf

En lo personal me parece un diseño muy atractivo. Y si quieren pueden modificarlo porque el paquete incluye el archivo .fla.

Esta reproductor también usa Listas de Reproducción XML pero con una estructura distanta al anterior:

<?xml version="1.0" encoding="UTF-8"?>
<songs>

<song title="Adele - Set Fire To The Rain"
path="set fire to the rain.mp3"/>

<song title="Magnate y Valentino - Si Te Acuerdas de Mi"
path="http://www.robney.org/listen/b324b82/Si-Te-Acuerdas-de-Mi"/>

<song title="Diego Torres - Guapa"
path="http://www.robney.org/listen/534e8cd/Diego-Torres-Guapa"/>

<song title="Título de Mi Canción"
path="micancion.mp3"/>

</songs>

Para generar una lista de reproducción XML con esta estructura usaremos el mismo código que usado para generar la lista de reproducción para el reproductor JWPlayer pero con algunas modificaciones, lo llamaremos GenerarPlayListMP3.php:
<?php
$dir = "./Canciones/";
$Vector=array();
if (is_dir($dir))
{
if ($gd = opendir($dir))
{
while (($archivo = readdir($gd)) !== false)
{
if ($archivo != "." & $archivo != ".." & $archivo != "list.php"
{
if (is_dir($archivo))
{
$Vector[]=$archivo;
}
else
{
$Vector[]=$archivo;
}
}
}
closedir($gd);
}
}

$buffer='<?xml version="1.0" encoding="UTF-8"?>
<songs>';
while (list (, $valor) = each ($Vector)):
$buffer.="<song title='".$valor."' path='Canciones/".$valor."' />";
endwhile;
$buffer.="</songs>";
$file=fopen("robneylista.xml","w+";
fwrite ($file,$buffer);
fclose($file);
?>

Nota: En este caso la especificación de la ubicación de la Lista de Reproducción no se hace en el archivo PHP donde insertamos el reproductor sino en el mismo reproductor. En este caso en el reproductor player.swf que descargamos esta configurado para que use una lista llamada robneylista.xml por eso es que cremos la lista de reproducción XML con ese nombre. Pero esto se puede modificar abriendo el archivo player.fla con Adobe Flash, modificando el nombre de la lista a la que hace referencia y volviendo a generar el archivo swf correspondiente. Yo no lo hare por eso creo la lista de reproducción con el mismo nombre (robneylista.xml).


Ahora solo nos queda crear el archivo PHP donde insertaremos el reproductor, lo llamaremos ReproductorMP3.php:
<html>
<head>
<title>Reproductor de MP3</title>
</head>
<body topmargin="0" bgcolor="#000000" text="#FFFFFF">
<?
include("GenerarPlayListMP3.php";
?>
<div align="center">
</div>
<p align="center">
<object classid="clsid27CDB6E-AE6D-11CF-96B8-444553540000" id="repro" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="393" height="544">
<param name="movie" value="Player.swf">
<param name="quality" value="High">
<embed src="Player.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="393" height="544">
</object>
</p>
</body>

Y listo! Solo queda probarlo en el navegador (en localhost).

Nota: Los archivos player.swf, GenerarPlayListMP3.php, ReproductorMP3.php y la carpeta Canciones tienen que estar en un mismo directorio.

Reproductor Audio/Video Web - PlayList XML desde una Carpeta

En esta Página también podrán encontrar este artículo y descargarlo en PDF: http://infotec.hostei.com/TutorialesInformaticos/


Saludos...

9 comentarios - Reproductor Audio/Video Web - PlayList XML desde una Carpeta

@Waldo_Fardello
sabes si el de MP3 sirve para transmitir Shoutcast? O conoces alguno parecido que lo haga? Gracias.
@agropecuario
estoy buscando un reproductor, que cuando se entre a la web a las 17,30 tenga una musica y si el mismo usuario sale y entra a las 17:45, empiece con otro tema y no el mismo. no se si será esto posible, agradezco cualquier ayuda... saludos
@chovisz22
hola me gusto tu tuto solo que no me carga la lista de reproducción a que crees que se deba? si crea el archivo xml pero no carga la lista ayuda por favor
@serial10
Aca te dejo una version que funciona:
http://edujjalvarez.com.ar/files/app/Reproductor.zip
Los archivos de audio y video deben estar dentro de la carpeta Music...
@chovisz22
@serial10 En este en la parte de cargar la musica pongo el archivo generarplaylist.php o directamente el archivo xml? me dice que el archivo playlist.xml no es una lista valida
@serial10
@chovisz22 Estuve tratando de ver cual era el problema pero al final me quede con la duda porque cuando creaba el archivo XML a mano me lo tomaba pero cuando lo creaba el GenerarPlayList.php no me la tomaba. Al final termine trabajando con la última versión del reproductor JWPlayer (La versión 6) y ahi me funciono, va por lo menos a mi. Aca te dejo el archivo: http://edujjalvarez.com.ar/files/app/JWPlayer6.zip
es igual al anterior solo que con una version nueva del reproductor. Ah y hay dos f
@chovisz22
eaa gracias man este ultimo me va a servir demasiado estoy haciendo un proyecto para una tienda de musica y me ira bien con este reproductor saludos