Reproductor XSPF

En este apartado se trata la integración HTML del reproductor XSPF Web Music Player (http://musicplayer.sourceforge.net/)

1. Descarga y descomprime el archivo xspfplayer.zip en la carpeta \miweb\xspfplayer.
2. Desde el explorador de archivos abre la carpeta \miweb\xspfplayer y haz doble clic en el archivo index.htm. Con esto se abrirá el navegador mostrando los tres skins del reproductor: botón, slim y extendido.

Modelos de reproductor XSPF

3. Mientras el modelo botón sólo permite las opciones "reproducir/parar", el interfaz slim añade las opciones de control de volumen y de navegación adelante/atrás en la lista de audios y de control de volumen. El interfaz extendido permite mostrar la lista de reproducción y la imagen asociada a cada pista.

4. Regresa al explorador de archivos en la carpeta \miweb\xspfplayer. Dentro de esta carpeta encontrarás:

La carpeta audios donde se guardan los archivos de audio MP3.
La carpeta images que contiene los archivos JPG asociados a cada pista de la lista.
La página HTML que permite el acceso a todo el conjunto: index.htm
Los reproductores de audio: xspf_player_slim.swf, xspf_player_button.swf y xspf_player.swf (extendido).
La lista de reproducción playlist.xspf en formato XSPF.

5. Abre Kompozer y utilízalo para abrir el archivo index.htm

6. Clic en la pestaña Código fuente.

7. Si deseas insertar el reproductor en otra página basta con copiar y pegar el código HTML: <object type … > … </object> correspondiente a cualquiera de los tres reproductores y asegurarse de que los archivos de audio mp3 y el reproductor correspondiente se encuentra en la misma carpeta que esa nueva página.

XSPF botón con audio:

<object type="application/x-shockwave-flash" width="17" height="17"
data="xspf_player_button.swf?song_url=audios/danzahungara.mp3">
<param name="movie"
value="xspf_player_button.swf?song_url=audios/danzahungara.mp3"/>
</object>

Nota: El reproductor XSPF botón también admite una lista de reproducción.

XSPF slim con lista:

<object type="application/x-shockwave-flash" width="400" height="15"
data="xspf_player_slim.swf?playlist_url=playlist.xspf">
<param name="movie"
value="xspf_player_slim.swf?playlist_url=playlist.xspf" />
</object>

XSPF extendido con lista:

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

8. Si observas la etiqueta object, verás que en el atributo data y en el parámetro movie contienen la referencia al nombre del archivo MP3 (variable song_url=) o de la lista de reproducción XSPF (variable playlist_url=). Puedes modificar la ruta y nombre de este archivo para reproducir otros audios.

9. Desde el explorador de archivos haz clic derecho sobre el icono del archivo playlist.xspf y elige Abrir con … > Bloc de notas o Editor de textos gedit.

10. En el encabezado de este archivo XML se observan los metadatos de la lista de reproducción: title, annotation, creator, etc. En la lista de pistas (trackList) observa que existe una etiqueta track por cada pista de la cual se indica: title (título del audio), creator (autor), location (ubicación del archivo), image (imagen asociada) e info (enlace para saber más). Puedes modificar el contenido de este archivo para crear una lista de reproducción distinta.

<track>
<title>Danza hungara no.5</title>
<creator>Brahms</creator>
<location>audios/danzahungara.mp3</location>
<image>images/brahms_small.jpg</image>
</track>

11. Otra posibilidad más fácil es acceder a esta página xspfplayer.html. Muestra un interfaz que te permitirá configurar las distintas opciones del reproductor. El resultado final será el código de la etiqueta <object> que se puede copiar y pegar en una página HTML para insertar en ella el reproductor. Recuerda que deberás respetar la estructura de archivos y carpetas anteriormente mencionados.