Cómo insertar un reproductor mp3 con una lista de reproducción

En este tutorial veremos cómo insertar un reproductor MP3 con una lista de reproducción (PlayList) asociada. Es ideal, para cuando tenemos varios archivos de audio (mp3) y queremos utilizar un único reproductor que muestre en una lista todas las canciones posibles.

¿Qué necesitamos?

1. Las canciones en formato mp3
2. El reproductor mp3
3. La lista de reproducción en formato xml
4. El código para insertar en el blog

Pasos para insertar el reproductor mp3 con lista de reproducción en el blog.

1. Publica los archivos de audio. Utilizaremos el servicio Dropbox que nos ofrece hasta 2 Gbytes gratis para almacenar los archivos de audio.
   
   1.1 Entra en DropBox (o crea una nueva cuenta si no tienes)
   1.2 Si acabas de crear una cuenta en DropBox deberás activar tu carpeta "Public" (solo para cuentas creadas a partir del 4 de Octubre de 2012)
   1.3 Publica tus archivos mp3 siguiendo estas recomendaciones.
   
   Recomendaciones: Crea dentro de la carpeta public (debes activarla si no la tienes), una carpeta mp3 y luego subcarpetas por cada álbum. Por ejemplo:
   
   ../mp3/cd1/pista1.mp3, ../mp3/cd1/pista2.mp3....
   ../mp3/cd2/pista1.mp3, ../mp3/cd2/pista1.mp3....
   
   No uses mayúsculas. No uses espacios en el nombre de carpetas ni archivos. El  nombre de los archivos mp3 que sean de tipo pista1.mp3, pista2.mp3.. Esto facilitará mucho la edición posterior de la lista de reproducción.
   
   Sube las canciones hasta la carpeta correspondiente. En mi caso son tres canciones y el album se llama discotutorial. Mi carpeta queda de la siguiente forma: mp3/discotutorial.
   
   
2. Reproductor MP3. Utilizaremos el reproductor desarrollado por DewPlayer .
   Descarga aquí el reproductor mp3 hasta tu ordenador (zip), descomprímelo y publícalo en la carpeta public/mp3 creada en el paso anterior.
   
   
3. Lista de Reproducción. Es un archivo de texto con extensión xml donde deberemos indicar el enlace a cada uno de los archivos. También podemos indicar el autor, albúm, observaciones de cada canción.
   
   Dentro del archivo existe una sección llamada TrackList donde verás tantos bloques de texto como canciones tengas que reproducir. Ejemplo del primer bloque:
   
   <trackList>
   
   <track>
   <location>http://dl.dropbox.com/u/22283429/mp3/discotutorial/pista1.mp3</location>
   <creator>Bedrich Smetana</creator>
   <album>Má Vlast</album>
   <title>La Moldau (Vltava)</title>
   <annotation>Me encanta esta cancion</annotation>
   <duration></duration>
   <image></image>
   <info></info>
   <link></link>
   </track>
   .
   .
   .
   </trackList>
   
   Descarga aquí la lista de reproducción (zip) de ejemplo con mis tres canciones.
   Descomprime el archivo y ábrelo  en el bloc de notas para editarlo.
   
   En el campo location (resaltado en color rojo) debes indicar la url hasta el archivo mp3 (usa la opción Copiar enlace publico situado en el menú contextual a cada archivo en DropBox). Recuerda que si tienes 12 archivos mp3 deberás tener 12 bloques de texto como en el anterior dentro de la sección trackList.
   
   Una vez que lo tengas, guardalo con el nombre playlist.xml y publícalo en Dropbox dentro de la carpeta del albúm en mi caso quedaría así public/mp3/discotutorial/playlist.xml
   
   
4. El código para insertar en el blog
   LLegados hasta este punto, ya tenemos las canciones, el reproductor y el playlist alojados en Dropbox. Ahora vamos a por el código que hará posible que el reproductor funcione en nuestro blog. Para ello, copia el siguiente fragmento de código, pégalo en el bloc de notas para cambiar los parámetros.
   

   <object type="application/x-shockwave-flash" data="https://dl.dropbox.com/u/XXXX/mp3/dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer">

   <param name="wmode" value="transparent" />

   <param name="movie" value="https://dl.dropbox.com/u/XXX/mp3/dewplayer-playlist.swf" />

   <param name="flashvars" value="showtime=true&autoreplay=true&xml=https://dl.dropboxusercontent.com/u/XXX/mp3/discotutorial/playlist.xml" />

   </object>

   Deberás cambia el link tanto del reproductor mp3 (resaltado en color rojo) como el link del playlist (resaltado en color verde). Estos enlaces los obtienes con la opción "Copiar enlace publico" en el menú contextual de cada archivo en DropBox.
   
   Fíjate como ha quedado en mi caso:

<object type="application/x-shockwave-flash" data="https://dl.dropbox.com/u/22283429/mp3/dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="https://dl.dropbox.com/u/22283429/mp3/dewplayer-playlist.swf" />
<param name="flashvars" value="showtime=true&autoreplay=true&xml=https://dl.dropboxusercontent.com/u/22283429/mp3/discotutorial/playlist.xml" />
</object>

Una vez tengas el código habrá que pegarlo en el blog. Si lo quieres pegar en una entrada en concreto, edítala y pega el código estando en la pestaña "Edición de HTML".

Si lo que quieres es situar el reproductor en un lugar común en el blog, deber ir a la pestaña Diseño y luego Elementos de la página, haz clic en agregar Añadir un Gadget y elije el tipo HTML/JavaScript y pega el código. Arrastra el Gadget hasta situarlo en el sitio deseado. Guarda la plantilla y visualiza el blog.

Ejemplo funcionando en esta entrada

Aquí puedes ver el resultado final. En mi caso el reproductor con mis tres canciones.

Este tutorial ha sido sugerido por uno de los seguidores de iniciaBlog. Si hay algo que buscas y que no encuentras, utiliza el formulario de contacto para proponer nuevos temas.

Espero que te halla resultado útil. Como en todas mis publicaciones, te agradezco que colabores con este blog opinando a través de los comentarios y recomendado esta entrada utilizando los botones de "Me gusta" o de "Twittear". ¡Gracias! :D