Sabemos qué tenemos que hacer cuando queremos insertar un vídeo en alguna de nuestras webs, pero no existen soluciones demasiado estandarizadas para cuando necesitamos insertar archivos de audio propios y que se reproduzcan en la misma ubicación donde se han insertado.
Sin embargo, existe una solución muy sencilla de utilizar y que ofrece un aspecto muy elegante y una funcionalidad del 100%. Se trata de un plug in llamado xspf_player, un reproductor en flash para mp3.
Su creador Fabricio Zuardi nos da a elegir entre 3 interfaces diferentes a utilizar según la necesidad que tengamos. Estas son las diferentes versiones que ofrece:
Music Player Extended
Music Player Slim
Music Player Button
Los pasos a seguir son verdaderamente sencillos:
1.Descarga el interfaz que vayas a utilizar a través de los siguientes links:
2.Descomprímelo, busca el archivo con la extensión “.swf” correspondiente en cada caso y súbelo a tu servidor, es decir:
xspf_player.swf para Music Player Extended xspf_player_slim.swf para Music Player Slim musicplayer.swf para Music Player Button
3.Sube la música en formato mp3 que quieras reproducir en tu web a tu servidor.
4.Para crear la lista de reproducción copia y pega el siguiente código en un editor de texto cualquiera:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track><location>http://www.midominio.com/cancion1.mp3</location></track>
<track><location>http://www.midominio.com/cancion2.mp3</location></track>
<track><location>http://www.midominio.com/cancion3.mp3</location></track>
</trackList>
</playlist>
Cada etiqueta "track" es la información de cada canción, con lo cual es imprescindible poner la ruta correcta donde hemos alojado los archivos mp3 en nuestro servidor.
Una vez terminada la lista de reproducción la guardamos con el nombre que se desee pero con la extensión “.xspf” obligatoriamente (ejemplo: milista1.xspf) y subimos ese archivo a nuestro servidor.
Nota
Si deseas ampliar información sobre cada uno de los archivos mp3 como por ejemplo incluir el nombre del álbum, el artista, etc... puedes hacerlo utilizando etiquetas del siguiente tipo:
<!-- Artist or Singer -->
<creator>Nombre del artista</creator>
<!-- Album -->
<album>Nombre del album</album>
<!-- Song Name -->
<title>Nombre de la canción</title>
<!-- Song info -->
<annotation>Información adicional</annotation>
<!-- length of song, by milliseconds -->
<duration>Duración de la canción en milisegundos</duration>
<!-- Album image -->
<image>Link a la imagen del album alojada en tu servidor</image>Aquí puedes ver un ejemplo completo de código:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<location>http://files.myopera.com/GrassNCloud/Music/AU/AU%20-%20For%20My%20Love%20-MStreet.mp3</location>
<!-- Artist or Singer -->
<creator>M.Street</creator>
<!-- Album -->
<album>Audition OST</album>
<!-- Song Name -->
<title>For My Love</title>
<!-- Song info -->
<annotation>your note</annotation>
<!-- length of song, by milliseconds -->
<duration>271066</duration>
<!-- Album image -->
<image>http://files.myopera.com/GrassNCloud/albums/153122/thumbs/AlbumImage.gif_thumb.jpg</image>
</track>
<track>
...
</track>
</trackList>
</playlist>
5.Por último, una vez subida la lista de reproducción y los archivos mp3 a tu servidor, necesitas insertar el reproductor para que aparezca en tu web. Así pues, dentro del código html donde quieres que aparezca el reproductor, copia y pega el siguiente código haciendo las modificaciones que se indican a continuación:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" id="myMovieName" width="400" height="170"
data="http://yourdomain.com/xspf_player.swf?playlist_url=http://yourdomain.com/yourplaylistlist.xspf"></br>
<param name="movie"
value="http://yourdomain.com/xspf_player.swf?playlist_url=http://yourdomain.com/yourplaylistlist.xspf" /></br>
</object>
Es imprescincible que sustituyas las rutas que se indican por las tuyas propias con el nombre de tu dominio, es decir:
http://nombredetudominio.com/nombredelreproductorelegido.swf?playlist_url=http://nombredetudominio.com/nombredetulistadereproduccion.xspf
El ancho y el alto del objeto es totalmente personalizable. Tan solo hay que sustituir las medidas nuevas que se deseen por las que están subrayadas.
Además, dentro de esas mismas etiquetas puedes incluir más información como:
autoplay : permite que la lista de reproducción empiece a ejecutarse sin necesidad de que el usuario pulse el “play”. Se indica mediante valores “true” o “false” puesto que es un parámetro booleano.
autoload: similar al anterior, es un parámetro booleano que permite que la lista de reproducción se cargue sin la intervención del usuario.
repeat_playlist : parámetro booleano que permite que la lista de reproducción comience de nuevo tras la última canción
playlist_size : número límite de canciones a reproducir
player_title: texto que reemplaza el texto por defecto del reproductor.
info_button_text: texto que aparece en la etiqueta "info" de la lista de reproducción.
La forma de incluir tantos parámetros como se desee es la siguiente:
src="URL_archivo_swf?playlist_url=URL_archivo_xspf¶meter_name=value"
Ejemplo completo con algunos parámetros:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" id="myMovieName" width="400" height="170" data=”http://midominio.com/xspf_player.swf?playlist=http://midominio.com/listareproduccion1.xspf&autoplay=true&autoload=true&player_title=Nombre_de_mi_dominio”>
<param name="movie" value=”http://midominio.com/xspf_player.swf?playlist=http://midominio.com/listareproduccion1.xspf&autoplay=true&autoload=true&player_title=Nombre_de_mi_dominio” />
</object>
Nota
El reproductor de música también puede ser usado para reproducir archivos individuales en vez de listas de reproducción, para cuando eso ocurra los parámetros que podremos utilizar son:
song_url : la ruta del archivo mp3 en nuestro servidor
song_title : título del archivo mp3
Ejemplo completo para solo un archivo mp3:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" id="myMovieName" width="400" height="170"
data=”http://midominio.com/xspf_player.swf?playlist=http://midominio.com/listareproduccion1.xspf&song_url=http://midominio.com/cancion.mp3&song_title=Titulo de la cancion”></br>
<param name="movie" value=”http://midominio.com/xspf_player.swf?playlist=http://midominio.com/listareproduccion1.xspf&song_url=http://midominio.com/cancion.mp3&song_title=Titulo de la cancion” /></br>
</object>
Con todo lo mencionado y sin demasiadas complicaciones debería funcionar el reproductor a la perfección. Puedes encontrar más información y ejemplos ya en funcionamiento en la página oficial del Reproductor XSPF.
