SERVICIO TECNICO Y MANTENIMIENTO
  Web player con playlist en tu web
 
          
RADIO


PASO A PASO COMO SIEMPRE PARA CONSTRUIRLO

GRACIAS A EL AUTOR ORIGINAL QUE LA POSTEADO EN LA WEB

Este es un interesante proyecto que personalmente voy a ayudar a uds a contruir paso a paso.

Con este tutorial podremos instalar en nuestro sitio web, Blog, Foro, etc. un muy buen reproductor de mp3, que puede ser personalizado en algunos aspectos.

NECESITAMOS:
1) Reproductor propiamente dicho.
2) Google Hacks 1.5 (Un práctico localizador de mp3's alojados en internet).


Google Hacks

¿Porqué un localizador de mp3's alojados en internet? Muy sencillo, si nuestro sitio/foro está alojado en un hosting gratuito, los mismos restringen el tamaño de los archivos que podamos subir (normalmente 1.5 o 2 mb) esto haría que para subir un mp3 respetando esta regla lo deberíamos convertir a 64 kbps, y sonaría como una verdadera porquería.
Además, al alojarlo en nuestro propio servidor, estaríamos generando un interesante tráfico que seguramente haría que nuestro sitio web sea cerrado en un corto tiempo.

Si tenemos un hosting pago tampoco nos conviene, primero por el tema "legal", siempre es bueno que los archivos "non-sanctos" estén alojados en otro lado, y no en nuestro sitio, nosotros solo proveemos links a ellos, y segundo... que si tenemos un hosting pago de esos que nos restringen el ancho de banda a "x" cantidad de gb por mes, es una manera de subir rápidamente el tope.



Usando este programita tal como se muestra en la imagen, se nos abrirá en el navegador una búsqueda ya hecha en Google, con cientos de páginas que comienzan con el prefijo Index of, sí... esos son nuestros mp3's, se pueden descargar... o en nuestro caso habrá que hacerles click derecho a uno en especial (el que nos gustó o buscábamos) y usaremos la opción Copiar dirección del enlace (en Firefox) o su equivalente en IE.
Esa dirección que ahora tenemos en el portapapeles es la que usaremos con nuestro reproductor web (ya veremos más adelante como).


XSPF Web Music Player (Flash)

Este es el reproductor en sí, veremos como instalarlo en nuestra web, como configurarlo y entenderemos un poco su funcionamiento.
Como se trata de un proyecto GNU, recibiremos con el programa los archivos fuentes para modificar a nuestro antojo el swf.
Como el autor en su página explica el funcionamiento del reproductor, pero nada dice sobre la sintáxis de la playlist les pondré la descarga del reproductor en su versión extended, no hot-linkeado desde la web del autor, sino subido a Mediafire por mi, incluyendo un ejemplo de la Playlist, para que todos sepan como modificarla y poder de ese modo cargar en ella sus mp3's preferidos.

En el rar de descarga de la versión "Extended" se encontrarán con estos archivos...

Instrucciones.txt es un "recordatorio" (con ejemplo incluido dentro) que yo mismo puse para ayudar aún más.

Preparando el Web Player:
Lo primero será que abran ustedes mismos el archivo llamado ejemplodelista.xspf (obviamente en el futuro le pondrán el nombre que quieran), adentro de la la lista verán exactamente esto:
dijo:


<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<location>http://www.pa
ginaencontrada.com/music/mp3/0180%20Ten%20Sharp%20-%20You.mp3</location>

<!-- Nombre de Artista o banda -->
<creator>Ten Sharp</creator>

<!-- Nombre del Album (CD) -->
<album>The Best of</album>

<!-- Nombre de la Canción -->
<title>You</title>

<!-- Comentario sobre la canción -->
<annotation>The best (the only?) hit of Ten Sharp.</annotation>

<!-- Duración del tema (En Milisegundos) -->
<duration>233000</duration>

<!-- Cover, Tapa -->
<image>http://ecx.images-amazon.com/
images/I/51K19QDQNSL._SS400_.jpg</image>

<!-- Link con información sobre el album. -->
<info>http://www.amazon.com/Everything-More-Best-Ten-Sharp/dp/B00004WF18/ref=pd_bbs_sr_1?ie=UTF8&s=music&qid=1237456244&sr=8-1</info>
</track>

</trackList>
</playlist>
 


Los comentarios en español que yo mismo coloqué, me eximen de comentar exactamente para que sirve cada item, pero dejaré un breve comentario de todos modos.
Como habrán visto, se trata de un archivo en formato XML, que como todos saben, es un archivo basado en etiquetas.
1) Hasta la etiqueta <tracklist> es el encabezado del XML, no hay nada que debamos editar, o tocar ahí.
2) La etiqueta <track> indica el comienzo de un nuevo tema o canción.
3) La etiqueta <location> es el producto de la pegada del portapapeles que había comentado anteriormente (debajo de la captura del Google Hacks), es decir... es la dirección exacta donde está alojado el mp3 a reproducir.
4) La etiqueta </track> indica que aquí ha finalizado toda la información relativa a nuestra primera canción.
5) A partir de ahí... para incorporar a la lista un nuevo tema o canción se repite todo nuevamente lo que ya vimos, desde la etiqueta <track> a la etiqueta de cierre </track>, editando obviamente los datos de la nueva canción.

Finalmente las etiquetas </trackList> y </playlist> indican que el XML (nuestra playlist o lista de mp3's) ha finalizado.

Instalando el Web Player:
Bien, ahora que hemos preparado la lista de mp3's que serán reproducidos, entonces deberemos subir los archivos ejemplodelista.xspf y xspf_player.swf a nuestro sitio web, para esto nos valdremos de una conexión vía FTP o el método que estemos acostumbrados a utilizar para subir archivos (o el que nos permite nuestro server).
A fin de evitar problemas aconsejo fervientemente alojar estos dos archivos en el "root" de nuestra web, es decir... no meterlos adentro de ninguna carpeta, y dejarlos en la raíz.

Finalmente... en el sector de la página que queremos que aparezca nuestro reproductor deberemos introducir exactamente este código:
dijo:

<object type="application/x-shockwave-flash" width="400" height="170"
data="http://mipagina.org/xspf_player.swf?playlist_url=http://mipagina.org/ejemplodelista.xspf">
<param name="movie" value="http://mipagina.org/xspf_player.swf?playlist_url=http://mipagina.org/ejemplodelista.xspf" />
</object>


Aquí estamos invocando desde el código a nuestro reproductor, para eso deberemos colocar exactamente la ruta donde hemos subido nuestro swf, así como la playlist.
Está más que claro que la dirección web http://mipagina.org/, deberá ser editada por la dirección de nuestra página web, y que si pusimos los dos archivos en el root, la dirección aquí entrada será mucho más corta.

Si hicimos todo correctamente... nos quedará nuestro reproductor en su versión extended con esta apariencia:

Yo le agregué un par de canciones más para que no quede tan vacío, pero para no hacer tan engorroso el código, en el ejemplo que venimos usando está solo la primera.
Arriba en la esquina superior derecha tenemos el volumen, si presionamos el botón Info nos lleva a la página que pusimos dentro de las etiquestas <info> en la playlist.
El reproductor también posee dos versiones más para que tengamos un abanico de variedad más amplio para elegir de acuerdo a las necesidades de nuestra web.

Decirles que en la playlist (tal como se ve en esta última captura) no es obligación completar todos los items, (aunque queda mucho más lindo el reproductor) que con poner la dirección donde está alojado el mp3 alcanza para que el reproductor funcione, está en ustedes y sus ganas completar todos los campos o solo los que la lógica indica que son obligatorios.

Por último aclarar que el tutorial refiere en todo momento a la versión Extended del reproductor, no he tenido tiempo de estudiar las vesiones Slims y Buttons, pero calculo que deben ser totalmente similares a lo que hemos visto.
De este modo doy forma a mi primer post, con esta... la única cuenta que he tenido en Taringa (ver mis añejos comentarios), espero cumpla con el objetivo planteado, que es aportar algo útil.



_______Google Hacks 1.5________


XSPF Web Music Player Extended


__XSPF Web Music Player Slim__


_XSPF Web Music Player Button_
 
RECOJIDO DE LA WEB
REPARACION A DOMICILLIO 24 DE 24 HORAS
¿Quieren investigar más? Esta es la web del autor!



 
 
   
 
=> ¿Desea una página web gratis? Pues, haz clic aquí! <=