Agregar reproductor MP3 al Blog

reproductor mp3


En mi afán por seguir haciendo cambios que agraden a los visitantes, se me ocurrió incluir un reproductor de mp3 en el blog, para ello fui directamente al gran buscador Google como siempre y realicé la búsqueda de “reproductor mp3 para el blog”.

Los resultados de la búsqueda fueron diversos y una gran gama de reproductores de mp3 se publican en Internet, los cuales puedes utilizar en tu página Web o Blog.

Así que dispuse de unos breves minutos para probar los más populares que vi, algunos pues se me hicieron difícil de probar ya que el idioma del sitio en el cual se encontraba estaba en danés o sepa Dios que otro idioma que ni por intuición logro comprender, otros no podían modificarse y debes usarlos tal cual como están o simplemente no llenaron mis expectativas.

Por lo tanto solamente me enfocaré en detallarle mi experiencia con el reproductor de mp3 que tengo actualmente en el blog, el cual lo recomiendo ya que me resultó muy práctico, fácil de personalizar y con un poco de intuición lo llegué a colocar en el blog.

El mismo se encuentra en la página http://flash-mp3-player.net/ allí pueden elegir el tipo de reproductor que desean en su blog, los cuales son:

Mini: tiene un botón de play/pause y el progreso de la pista.

Normal: el cual además del play/pause y el progreso de la pista, agrega un botón de stop y otro con información de la pista.

Maxi: igual al Normal, sólo que este reemplaza el botón de información por un control de volumen.

Multi: contiene los botones de play/pause, stop y progreso de la pista, adicional incluye botones para ir a la siguiente pista o a la anterior y un playlist o la lista de mp3 que se encuentran en el reproductor (este es el modelo que utilizó en el blog)

JS: al parecer es un JavaScrip para generar un reproductor.

Luego de elegir el tipo de reproductor mp3 para su blog, en el menú de la derecha están las opciones de:

Preview: para una vista previa del reproductor elegido.

Documentation: con un ejemplo del código HTML del reproductor, los parámetros del mismo y una lista de shortcut o funciones que puedes realizar con el teclado.

Generator: esta es la sección más importante, ya que aquí es donde vamos a personalizar el reproductor mp3 para el blog, a la vez que se va generando el código HTML que necesitamos para incluirlo en el blog.

Download: por si deseas descargar el swf (archivo flash) del reproductor mp3.

License: es la licencia del reproductor.

Bueno, vamos al Generator para personalizar el reproductor mp3, esta sección incluye una vista previa de cómo va quedando con las actualizaciones que le hacemos, estas modificaciones están divididas en categorías, las cuales son:

Categoría General: los principales datos que se pueden modificar aquí son:

- Los mp3 que incluirás en la lista de reproducción, allí hay uno de prueba, intenta agregar otro a la lista, para eso debe agregar el símbolo divisorio que indican allí (para efecto de ejemplo utilizaré ! ya que no puedo indicarlo aquí porque se borra) seguido de la dirección URL del mp3 que deseas agregar y así con cada canción o pista que desees agregar, por ejemplo la línea mp3 digita lo siguiente:
http://flash-mp3-player.net/medias/another_world.mp3 ! http://flash-mp3-player.net/medias/another_world.mp3
y verás como aparecerán dos canciones en el reproductor de prueba.

- También puedes cambiar el alto, el ancho, el volumen, autoplay por si deseas que el reproductor inicie cuando abras el blog y otros.

Categoría Botones de la barra de reproducción: aquí puedes personalizar la barra, si deseas incluir el control de volumen, información, tmaño de los botones, etc.

Categoría Colores: aquí podrás cambiarle el color a todos los elementos del reproductor, hasta personalizarlo para que encaje sin problemas en tu blog, también podrás ponerle una imagen en el skin o carátula, sólo debes indicar la URL de la imagen.

Categoría Playlist: en esta sección puedes configurar la lista de reproducción, la cantidad de pistas, los colores y si quieres que se muestre o no.

Una vez hechos estos cambios solo debes copiar el código HTML resultante y pegarlo en el nuevo widget que deseas agregar al blog.

Como verás la descripción de las pistas que aparecerá es la dirección URL de las mismas, para poner la descripción que deseas debes ubicar dentro del código HTML después de la URL de la pista y anotar cada título separados por al igual que las pistas y en el mismo orden, siguiendo el ejemplo anterior sería:
http://flash-mp3-player.net/medias/another_world.mp3 ! http://flash-mp3-player.net/medias/another_world.mp3amp&;title=Prueba 1 ! Prueba 2&autoplay…

Los términos de la licencia de éste flash mp3 player is under the Creative Commons BY SA and MPL 1.1 license.

Cualquier problema o consulta que tengan sobre este reproductor pueden hacerla llegar a mi correo o dejando un comentario al respecto y con gusto te ayudaré.

Saludos, ha sido extenso, así que disfruten de la buena música.

18 comentarios:

Gattuzo dijo...

Excelente amigo, el tutorial bien explicado y bien el truco gracias por hacerlo saludos
By Gattuzo

Anónimo dijo...

Hola, que buen tutorial, pero podrias orientarme sobre como incluir otras pistas de mp3 a mi reproductor. te dejo el link de mi blog. Gracias

Mark-507 dijo...

Gracias a ustedes por pasar por el Blog Peteyero!

Para agregar pistas sólo debes colocar el símbolo | entre cada pista y listo!

Saludos,

Anónimo dijo...

hola lo felicito por tu blog, estoy con muchas ganas de agregar un reproductor a mi blog pero lo intente toda una tarde y no lo logre, mi pregunta es como pego el html en mi gadget para que funcione,, gracias

Mark-507 dijo...

Bueno disculpe la tardanza en responder, no he atendido el blog por cuestiones laborales, para pegar le html debes copiar el código que genera la página web del reproductor, luego vas ala sección de agregar witget en tu blog y lo pegas allí, le das un título, lo guardas y listo!

Saludos!

joseli dijo...

que tal...muy bueno tu blog,te queria hacer una consulta:resulta que puse un reproductor en el blog y funciona y todo...pero el problema es que los mp3 que le agrego al otro dia ya no funcionan,creo que se pierde el acceso directo a los mismos...primero andan...pero cuando apago la computadora,aldia siguiente tengo que volverlos a poner para que se oigan...será un problema del servidor en donde se alojan los mp3?que cambia las url? te cuento que esto no pasaba antes...por ejemplo en el space de windows live yo utilizaba el wmplayer,con archivos que subia a skydrive,y listas de reproduccion que pegaba en el mismo y los mp3 estaban el tiempo que quisiera...y ahora alli tambien pasa lo mismo...el reproductor no encuentra la ruta de los mp3...y tengo que cambiar y pegar el acceso directo a diario...puede ser que sea porque actualizé a la version de internet explorer 8? con el 7 me andaba todo bien...bueno,gracias,saludos!!

Mark-507 dijo...

Hola Joseli, gracias por pasarte por el Blog PTY...
Cada vez que pegas las url de los mp3 son diferentes? si es así entonces es lo que me comentas que las url son variables, lo cual me parece extraño, si se mantienen las mismas url podria ser el explorer como lo mencionas, lo cual también me parece extraño, has ingresado desde otro equipo? deja tu msn o tu dirección para visitarte.
Saludos...

cesar1976 dijo...

hola mi buen amigo... me gusto mucho el reproductor ¿sabes? yo tambien agregue un reproductor a mi blog y yo feliz, pero al cabo de un tiempo comenzo a salir un mensajito que debo pagar mensualmente para seguir escuchando mis propias musicas, asi que me lleve una gran desepcion, bueno en fin, ahora en busca de algun tutorial y de algun reproductor que me llame la atencion me encontre con este blog y el reproductor que tienes, me gusto mucho, pero mi problema ahora es mayor porque de todo lo que ud explico mi amigo no entendi nada de nada, me quedaron muy grandes los codigos y url jajajaj parece chiste pero es verdad y necesito de tu ayuda, claro si es posible, te lo agradeceria mucho, si quieres visita mi blog y te daras cuenta de mi desepcion uufff perdon quise decir de mi reproductor jajaja... bueno mi amigo en fin ojala que me puedas ayudar a organizar el reproductor para mi blog y como te dije antes, te lo agradeceria muchisimo...
mi blog es: http://warezcesar1976.fullblog.com.ar/
espero tu respuesta mi amigo y hasta pronto...

88543 Eileen X. Peguero Sosa dijo...

Gracias

jakemaster dijo...

muy bueno el tutorial amigo, pero me quedé con una duda, donde o como hago para subir mis propias canciones para la playlist del reproductor? sinedo que solo acepta urls de donde se encuentran ubicados pero no dice como subirlos

morcillo88 dijo...

Buenassss muy bueno el tutorial, para no saber ni pija de html he conseguido con un poco de intuicion colocar el reproductor en mi blog.Bueno menos mal que las clases de lenguage c++ y ensamblador han servid de algo. Pero tengo un problemilla exactamente donde y como se coloca la segunda pista del reproductor,la tercera,la cuarta...he probado colocarla en todos laos pero no hay manera error error.....Si aguien me exa una manillo. Tambien que paginas se pueden utilizar para la musica? es legal reproducir musica ilegal que sea de una pagina web? engaaaa mi blog:
http://morcillo88-brk.blogspot.com/

bullishnow dijo...

como le haces para que el reproductor se inicie inmediatamente al cargar la pagina?

Danny Salsa dijo...

HOLA KE MAS LO KE SUCEDE ES KE LO SUBO EL MP3 A MI SKYDRIVE Y LA CANCION KE ME REPRODUCE NO APARECE CON EL NOMBRE COMO AGO PARA KE ME AYUDES

José Cedeño dijo...

Hola, amigo. Lei toda la entrada, pero hay algo que no entendí. Como hago para anexar a la lista de reproducción una canción (mp3) que yo elija?... Tengo que alojarla en una WEB?... Puedo reproducir ese mp3 de mi disco duro?...

Espero tu respuesta.
josgreced@gmail.com

Asderel dijo...

Hola .. muy buen tutorial .te felicito ! ^^
tengo un minimo problema ..
es que quiero ponerle otro tema al reproductor y no se que simbolo es el que mencionas .. he intentado con varios pero ninguno me resulta !
Bueno espero respondas :D

gracias por e tutorial . esta buinisimo ! :)

mi blog : http://asderel-angel.blogspot.com/

Asderel dijo...

ya encontre el simbolo xD estaba ahi mismo que soi pollo XD .. gracias men .. nuevamente :P

MarcoliO dijo...

Espectacular compadre..

Segui paso a paso , y logré hacerlo ...
se ve bastante bien ...

Muchas gracias ..

Saluos bro ;)

Anónimo dijo...

Muy buena tutorial! solo que no entendi como ir agregando canciones a mi lista de reproduccion (¿) espero una respuesta saludos :D
http://yesiimaiden.blogspot.com

Publicar un comentario