martes, 26 de agosto de 2014

truco insertar reproductor mp3 en tu blog

Truco insertar reproductor MP3 en tu blog. 

ayuda para tu blog, reproducyor mp3 en tu blog

Insertar reproductor mp3 con codigo html. 


Muchos usuarios precisan de insertar un reproductor en sus blog y para ello recurren a algun servicio que provea un gadget de reproductor mp3 y la posibilidsd de crear playlist para agregarlo en los blogs.
En vez de eso, esta vez vamos a aprender la manera de hacerlo nosotros mismos; insertando codigo en la plantilla, sin usar la transferencia de nuestro server, sin la insercion de ningun gadget. Resumiendo, "solo editando, copiando y pegando codigos" y de una manera practica y facil.

Como implementar el reproductor Mp3 en nuestro blog.


Para ello solo vamos a precisar

* Canciones en formato mp3
* El reproductor mp3
* La lista de reproducción (PlayList) en formato .xml
* El código para insertar en el blog.

Manos a la obra


Para poder insertar el reproductor mp3 con la lista de reproducción en el blog, vamos a realizar "puntualmente" estos pasos que detallo a continuacion:
Presta mucha atencion y no te apresures. Si no comprendes algo vuelve a leer esta entrada para no cometer errores.

1) Debes publicar las canciones. Para ello nos vamos a valer de una practica aplicacion "Dropbox" que inicialmente ofrece 2 Gb gratis para almacenar los archivos de audio. " Siguiendo los tips de dropbox puedes llegar hasta 16 Gb gratis.

¿Pero que acontecio? ¿Aun no tienes dropbox? Pues no te preocupes
Solo Haz CLICK AQUI
y registrate gratis en 1 minuto.

"Te recomiendo que para gozar de todos los beneficios de dropbox te registres e instales la aplicacion en tu ordenador. SINO, NO PODRAS RECIBIR GRATIS LOS Gb EXTRAS NI SUBIR ARCHIVOS PESADOS" ademas de otros beneficios.

Continuamos con el tutorial:


1.1) Luego de haber creado tu cuenta en Dropbox, deberás activar tu carpeta "Public" y para ello, vas a la carpeta Dropbox (en tu ordenador, donde se creo tu escritorio  remoto) y simplemente creas una carpeta a la que llamaras "Public" (pero sin las comillas).

1.2) Ahora dentro de public deberas seguir estos pasos para publicar tus canciones para el reproductor Mp3:

* dentro de "public" Crea una carpeta mp3 (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 las carpetas ni en los archivos Mp3.
* El  nombre de los mp3 deben ser pista1.mp3, pista2.mp3 para que sea facil editar la lista de reproducción en xml.
* Ahora debes subir las canciones hasta la carpeta correspondiente al nombre del album (por ejemplo beatles) quedando la siguiente edicion:

mp3/beatles

Reproductor MP3.


Hay muchos reproductores mp3 pero para este caso yo Utilizare el reproductor DewPlayer.
Para descargar el reproductor mp3 debes HACER CLICK AQUI

Luego que lo hayas descargado, lo debes publícar en la carpeta public/mp3  que habias creado anteriormente.

La lista de Reproducción.


El PlayList es un archivo de texto simple que deberas ponerle la extensión .xml y en donde vamos a indicar el enlace de cada uno de las canciones subidas en el paso anterior.

Nota : También podemos indicar el autor, el album, etc.

En el la edicion del archivo .xml incluiremos una sección a la que llamaremos "TrackList" (sin las comillas) y en donde redactaremos "X" cantidad de bloques de texto como canciones queramos reproducir.

Por ejemplo, primer bloque:

<trackList>

<track>
<location>http://dl.dropbox.com/s/wxyuuyyti/mp3/beatles/pista1.mp3</location>
<creator>AQUI PON EL NOMBRE DEL AUTOR DE LA CANCION</creator>
<album>AQUI PON EL NOMBRE DEL ALBUM</album>
<title>AQUI PON EL NOMBRE DE LA CANCION</title>
<annotation>AQUI PON UNA NOTA PERSONAL SOBRE ESA CANCION POR EJEMPLO LA MAS EXITOSA DE TODAS ( O ELIMINA ESTE CODIGO SINO GUSTAS DE PONER UNA NOTA PERSONAL)</annotation>
<AQUI PON CUANTOS MINUTOS Y SEGUNDOS DURA LA CANCION></duration>
<link></link>
</track>

Y asi sucesivamente vas agregando mas
</trackList>
Por cada pista que a adicionas.

Para que no cometas ningun error,

DESCARGAR AQUI

la lista de reproducción que confeccione de ejemplo; debes abrir  con el bloc de notas para editarlo. Y rellenas los campos que deje explicitos con los datos de tus canciones. En el campo location, debes indicar la url del archivo mp3 situado en Dropbox (usa la opción; para ello deberas copiar el enlace publico seleccionando la opcion compartir enlace (en DropBox).


Importante:
Tener en cuenta que si tienes por ejemplo 20 archivos mp3 deberás insertar el el archivo.xml  20 trackList.

Luego de eso:

Deberas guardarlo con el nombre playlist.xml y subirlo a Dropbox dentro de la carpeta del albúm en el ejeplo visto va a quedar así public/mp3/beatles/playlist.xml

El código para insertar en el blog.

Ya llegamos casi al final:

* Tenemos las canciones.
* Tenemos el reproductor.
* Y tenemos el playlist.

Solo falta el código para que el reproductor funcione en el blog.
Solo copia y pega este código en el bloc de notas para optimizar los parámetros y que no de ningun error.

<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/s/hdftttYyy/mp3/dewplayer-playlist.swf" />
 <param name="flashvars" value="showtime=true&autoreplay=true&xml=https://dl.dropboxusercontent.com/s/ghtyyyyy/mp3/beatles/playlist.xml" />
 </object>

Tu debes cambiar: 

El 1* enlace por la url de la ubicacion del reproductor- plalist.swf

Cambia el 2* enlace por el enlace de tu reproductor-playlist.swf

Y el 3* enlace por la url del playlist.xml

Nota:
Si te animas a mas, cambia los valores de with y heigth por valores proporcionales como por ejemplo 480 y 400 o los que sean de tu gusto.

Ahora a insertar el codigo en tu blog.


Puedes insertar el codigo directamente en una entrada o pagina, para ello debes pegar el código utilizando la edición de HTML del editor de entradas. O puedes insertarlo como un gadget, para que este en todo el blog; para ello ve a Panel/Diseño/Elementos de la página/Añadir un Gadget y elije HTML/JavaScript. Alli deberas pegar el código. Luego guarda la plantilla.

¡Eso es todo!
Como siempre, si te gusto esta entrada donde doy a conocer el truco para insertar un reproductor mp3 en tu blog sin ningun gadget; me gustaria que compartieras esta entrada en tu Facebook y Twitter para ayudar tambien a nuestro blog a generar mas trafico y "pagerank". Un "LIKE" es nuestro mejor premio por tantas horas que dedicamos a producir este material que considero ha de ser de gran utilidad para ti.
Te invito a comentar y ver las demas entradas del blog.

No hay comentarios.:

Publicar un comentario

En Gadgetts4blogger apreciamos todo lo que puedas comentar, pero no te excedas porque los comentarios seran moderados por un administrador. Comentarios sin sentido y solo para dejar un enlace seran eliminados.