Ahora te mostraré cómo crear un simple reproductor de mp3 en tu web o blog. Está claro que existen muchos servicios que te bridan este tipo de servicio verdad?, la diferencia radica en que la mayoría de ellos incluye un link hacia ellos dejando escapar por ahí las visitas, cuando bien podrías hacer tu propio reproductor de música y sin publicidad incrustada y lo más importante de manera super sencilla.
Para este ejemplo necesitamos un sitio que nos permita subir gratis nuestra propia música a algún servidor(lugar donde se guardará la canción). Para esto nos valemos de openomy, un gran servicio que nos permite subir nuestros archivos individualmente sin mayores dificultades y sin tener mucho conocimiento de esto, pero si por ahí se traban, acá te doy la explicación:
1) Ve a http://www.openomy.com
2) Tendrás que registrarte, colocando lo que siempre hacermos, un "username", un password (2 veces) y un email (2 veces) y listo.
3) Luego nos pide elegir nuestro archivo. En este caso, será una canción mp3, damos clic en el botón "examinar", buscamos nuestra canción mp3 en nuestra PC, la seleccionamos y luego damos clic en UPLOAD (en donde dice TAGs podemos escribir algunas palabras clave que identifiquen a tu tema separándolas con comas o sino déjalo en blanco).. y luego a esperar se ha dicho hasta que cargue toda nuestra canción en su servidor.
4) Una vez hecho eso, podemos renombrar nuestro archivo, en mi caso subí un extracto de 30 seg. de la canción "Noche de entierro" de los Benjamins y como pueden ver en la imagen siguiente, el nombre era algo complicado, así que decidí solo ponerle simplemente "nochedeentierro". Luego de ello, tenemos que darle clic en "Make Public" y listo!
Como verán, ahora contamos con una dirección pública que nos indica la dirección donde está guardada nuestra canción. En mi caso es esta:http://files.openomy.com/public/johantennassi/nochedeentierro
Una vez teniendo eso, ahora sí, configuraremos nuestro reproductor flash. Para ello nos valdremos de DewPlayer, que nos brinda un código (script) para que simplemente sea agregado a nuestro blog y listo.
Este es el script:
<object type="application/x-shockwave-flash" data="http://www.estvideo.com/dew/media/dewplayer.swf?mp3=http://tucancion.mp3&bgcolor=FFFFFF" width="200" height="20"> |
Entonces lo único que haremos es remplazar lo que está de rojo, es decir, donde dice http://tucancion.mp3 por la dirección que nos dió Openomy anteriormente. En mi caso, lo tendría que reemplazar por "http://files.openomy.com/public/johantennassi/nochedeentierro" quedando así:
<object type="application/x-shockwave-flash" data="http://www.estvideo.com/dew/media/dewplayer.swf?mp3=http://files.openomy.com/public/johantennassi/ |
Ahora solo queda pegar este código en tu blog y listo. Pero ojo! este código solo insertará tu reproductor flash mp3 en tu blog pero no se escuchará hasta que alguien le haga clic en el botón "play", para que se escuche automáticamente lo que tienes que hacer es agregarle lo siguiente a tu código:
Localiza esta parte de código:
dewplayer.swf?mp3=http://tucancion.mp3;bgcolor=FFFFFFY reemplázalo por este:
dewplayer.swf?mp3=http://tucancion.mp3&autostart=1&bgcolor=FFFFFFY si quieren que se reproduzca automáticamente y que además se repita la canción de manera indefinida, reemplácenlo por este:
dewplayer.swf?mp3=http://tucancion.mp3&autostart=1&autoreplay=1&bgcolor=FFFFFFRecuerda que donde dice "http://tucancion.mp3" será la dirección que te dió Openomy anteriormente.
Bien, eso es todo, ahora solo te queda agregar todo el código en tu web o blog. Para el caso de blogger o wordpress, puedes agregar el código directamente en tu post (para blogger en modo html) sin problemas o en algún lugar de tu sidebar(para blogger elegir agregar "nuevo elemento html").
Este es el resultado en mi caso:
Solo tiene un botón "play", "pause" y otro "stop", pero si quieres otros modelos como por ejemplo incorporarle "un controlador de volumen" puedes visitar Ayudaparaelblog que te muestra los códigos para todos ellos o también, puedes generar tu propio código luego de elegir tus propias opciones desde la misma página del creador donde podrás elegir tus propios colores, reproducción en blucle, autoplay, etc.
Enlace | Web del creador
Enlace | DewPlayer personlizado
Entradas Relacionadas:
81 comentarios:
Muy buenas. El artiículo está realmente bien, un cinco fijo por él, pero tengo un pequeño problema y es que no me funciona la opción de reproducción automática, podrías ayudarme un poquillo para rematar la faena. SÍ funciona cuando clikead en el botón de Play, pero no funciona cuando insertas la línea "dewplayer.swf?son=test.mp3&autoplay=1".
Gracias por todo.
juanandresrv@yahoo.es
Hola Susana y Marta:
Tienen razón, confundí las palabras, era "autostart" en lugar de "autoplay". Ya lo corregí. Gracias. ;)
oye... muchas gracias por tu ayuda.. jeje muy bueno... me encanto .. sabes... nunka pense que me responderian.. eje muy bueno... sabes.. esta pag.. ha sido una de mis favoritas..
un 10!!!!
Hola ante todo mil gracias por la ayuda: Yo no soy Webmaster y sobre diseñar webs no sé mucho, pero sí tengo muchas ganas de aprender cosas por mi cuenta. No sabes los días que estuve buscando la forma de subir audios y felizmente lo logré gracias al desprendimiento de personas como usted, que ayudan a que todos tengamos acceso a un mejor dominio del internet. Mil gracias una vez mas...
Hola Juan, me da gusto saber que te ayudó en algo el tutorial.
Saludos y gracias por visitar el blog.
gracias! me funciono de maravillasss
cuanto se puede desmorar la cancion al cargar a openomy =)
Hola "Anónimo", pues dependerá del tamaño del archivo que vas a subir y de la conexión a internet que hayas contratado. Pero supongamos que deseas subir un archivo de 4.5 mb que es lo que aproximadamente pesa en promedio un archivo mp3 y contemos con una conexión de 400kbps por tanto nuestra velocidad de subida del archivo será de aprox. 40Kb/seg.. por tanto nuestra canción de 4.5Mb la subirá en 2 minutos aproximadamente.. si hice bien los calculos :(
Saludos!
entra aqui es muy bueno este tutorial y facil http://thedarwinex.iespana.es
Muy bueno el artículo, me sirvió muchisimo.
saludos, y gracias desde España!
alo a todos,muy buen consejo el del reproductor ,soy autodidacta y cualquier ayuda sirve.
¿porque lo que subo a opennomy tiene direccion http://tal yta l20%tal 20%tal20% ?
las uso en el reproductor pero nogarca el mp3,ni en el wm,bueno gracias y perdonen
LEO de uruguay
oguhs_13@yahoo.com.ar
komo hago para poner varias kanciones en kola?
Y lo otro, no pille en donde se pone el kodigo para ke se toke automatikamente ya ke en el kodigo
dewplayer.swf?son=tucancion.mp3&autostart=1"
No aparece..
Eso. salu2
5 estrellitas y mis agracedimientos, era justo lo que buscaba ^^
De verdad te agradezco tanta claredad y las imagenes, esperaba de verdad iba a foncionar pero con openomy todo ok y ahora en mi blog aparece la tira donde poner play, solo que no se oye nunguna musica (he puesto una cancion de ami whinehouse). ¿Seguro que el script es aquel, con el nombre que le hemos dado a la cancion?
Muchisimas gracias por tu ayuda,
Alessia (Barcelona)
Disculoa otra vez, pero en el codigo hay algo que falla: despues de dewplayer.swf? tu no ecribes "son" y luego dices de ponerlo. No sé. No me fonciona...!! Sniff!la palbra "sonido" tampoco está en el codigo!!!!
Gracias por tu ayuda
Hola Lale!
Tienes toda la razón y gracias, andaba mal el código, ya lo he corregido y le he probado.
Gracias por todos los comentarios, han logrado que vaya corrigiendo el código y así beneficiarnos todos.
Saludos.
no entiendo como subir la musica ya instale en mi blog el reproductor pero donde pongo la musica disculpen no soy buena en esto alquien me explica
Johan T.
bárbara la explicación. funciona fenomenal. ahora mi blog ha ganado mucho más. mil gracias y saludos!!
Hola anónimo!
Tenías que seguir los pasos de este tutorial, primero subes tu música (http://www.openomy.com) y una vez hecho este paso como indico, puedes colocar el código necesario en tu blog adaptándolo según la dirección o URL de la música que acabas de subir.
Te recomiendo sigas los pasos tal y como lo explico aquí.
Suerte.
Hola segundo anónimo :)
Me alegra que te haya servido la explicación.
Saludos.
Una explicación excelente!!
Para poner otra canción hay que cambiarlo todo otra vez?
Gracias
Muy bueno!
lastima que en WordPress no funciona pq el editor te modifica el codigo al postearlo :(
EEH!! disculpa pasaba por aka pk keria insertar un arxivo de sonido a mi blog pero segui tus instrucciones solo que cuando llegue donde avia que reemplazar http://tucancion.mp3&bgcolor=FFFFFF
por la mia no me resulto las reemplaze las dos veces luego la inserte en mi blog y sale la barra de el reproductor pero no se reproduce la cancion
podrias explikarme eso porfavor
de antemano se agradece ....
segui las instrucciones pero al momento de kambiar esto : http://tucancion.mp3&bgcolor=FFFFFF
lo hize las 2 veces ii luego inserte el codigo en el blog pero al abrir el log sale solo el reproductor ii no reproduce el sonido cuando oprimo en play
hola me llamo ariel. segui el tutorial y funciona de mil maravillas en firefox el tema es cuando entras a la web con el explorer ahi ya no funciona. cual puede ser el problema?
desde ya muchas gracias.
Amigo! Muy bueno ahora te quiero hacer una pregunta, yo hice todo y salió perfecto pero sabes que el audio me sale a toda velocidad!, por que será, lo baje del link que te da openomy y se escucha perfecto en mi reproductor (mi PC) pero en mi Blog sale rapidito! es un MP3 (una entrevista a una persona). gracias
Hola Gente!
Sorry por no haber contestado a los comentarios anteriores :(
En cuanto a scelmont, pues es posible que solo haya fallado en ese momento y ahora ande bien. ¿o sigue igual?, quizás solo tú lo escuchas así, haber si me envias la url.
Saludos.
jelou!!! graciaZ!!
hola,muchisimas grasias yo soy admin de un foro y me eh vuelto espupido buscando como poner un reproductor ,GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS GRASIAS :******
hola ante todo gracias por el tutorial, solo quisiera preguntarte como subir una playlist es decir que me suenen mas de una cancion de seguidas
gracias
ola mi msn es alexander_14_17@.. kiero k me den un tutorial para creas un reproductor en flx noc naa xk manende a mi msn
excelente reproductor para podcast
Que bien... es la informacion mas completa que he encontrado y he conseguido que me aparezca la barra en mi entrada.
(aun no escucho la musiquita jajajaja pero ha sido todo un avance eh??)
Muchas gracias por tu ayuda guapo !!
Besin
Lola
hola stemm!!!
tengo una duda!!
lo ke pasa eske si hize mi kuenta y eso pero
lo ke no entiendo es komo lograr sakar el codigo ke me permitira pegarlo en mi blog!!
espero tu pronta respuesta graxias
pd.- tambin la ventana pa subir el archivo es totalmente distinta
como pongo el reproductor de musica que me estoy volviendo locoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo pero bien locooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
donde agrego eso qe dijiste ?
no me sirvio los codigos no se qe cambiarle porque estan tus cosas y no se donde agregar eso que dijiste..
ademas me suscribi a una pagina qe se llama OVI. y no se como tengo que hacer
Hola Zonaroja y hola Laaarita!
Para zonaroja, he hecho algunas modificaciones en el tutorial para que sea mejor entendido, haber trata de leerlo nuevamente, de seguro lo hice más fácil.
Para Laaaarita, ya no tienes que agregar nada, he modificado el tutorial para que solo reemplaces tu código por el que te estoy dando yo. Trata de leer nuevamente la parte final.
Bueno, y para el anónimo anterior, que no sabe de donde sacar el código, pues el código no lo sacas de ningún sitio, simplemente tienes que copiar y pegar el que te estoy dando yo en este blog.
Saludos!
Hola. Gracias por poner este tipo de tutoriales. Quería saber si hay alguna forma para que reproduzca una radio (copiaría la dirección) y no MP3. Lo intenté y no se como hacerlo. Si no es este reproductor, ¿existe otro que no sea Media Player de Windows para poner en mi blog? Gracias.
Hola quería saber como hacer para subir un Reproductor Flash pero que tenga varias canciones en cola o para seleccionar más de 1 me entiendes? o que salga almenos el nombre de la cación en el reproductor es todo gracias ^^! dejo mi msn: haroldking15@hotmail.com
Saludos desde Perú
Hola Fabiana, no me he puesto investigar al respecto, en todo caso, para este tipo de cosas hay algunas herramientas específicas como Radio Blog Club:
http://www.radioblogclub.com/
Para el último anónimo, pues creo que sería algo complicado partiendo de este mismo reproductor. Sí podríamos hacer uno utilizando un componente de flash y un archivo xml para la lista de canciones:
http://www.cristalab.com/tutoriales/25/reproductor-mp3-en-flash-con-mediaplayback-y-list.html
O en todo caso, si no te interesa que lleve publicidad, podríamos valernos de uno ya hecho como estos:
Música MP3 para el blog o Reproductor (playlist) música mp3
Saludos.
yo trate de hacer lo que me dijiste pero actualizaron la pagijna y haora ya no le entiendo
ahmm quisiera que la musica cargue antes de acer click en play para que se entrecorte la musica...
Holas! Para el último anónimo: pues para este caso no se puede precargar la música antes de reproducirla, pero puedes probar con otro tipo de reproductor que es más liviano como este:
Reproductor de Música MP3 para el blog
Saludos!
johan disculpa las tantas molestias pero como hago para agregar una lista de reproduccion ,porque subi un tema y funciono(muchas gracias de paso)pero ahora quiero agregar una mayor cantidad de canciones y q se reproduscan una tras de otra, tu ayuda seria de gran agrado
Gracias por tu e ntrada, estoy armando un blog y quiero que la gente se divierta leyendolo asi que muchas gracias; aora , me gustaria pedirte un favor.... el viernes 21 de noviembre mi blog sale del anonimato....¿asle propaganda porfiss...te lo agradeceria mucho, aunque solo pongas la direccion en algun lado de tu blog
de antemano muchas graicas!!!!! ahi va la direccion: sorateam.blogspot.com
Holas!
Para el anónimo del 15 de noviembre: pues si quieres hacer un reproductor con lista de canciones mejor te recomiendo que utilices uno ya hecho, donde podrás buscar canciones o subir las tuyas propias. Aquí te dejo un par de ejemplo de cómo hacerlo:
- Reproductor MP3 para el blog
- Lista de música mp3 para el blog
Para B.o.S.s: pues con gusto le hago promoción pero no se puede ver. Tienes que configurlo como "blog público" para que el resto lo pueda ver. Para ello tienes que entrar a tu blog y dirigirte a la pestaña de "Configuración", luego a "Permisos" y en la parte que dice "Lectores del blog" elige "Cualquiera".
Saludos.
esto es lo mejor que he encontrado sobre la reproducción de mp3 en un blog, aún estoy cargando el archivo a openomy, espero todo lo pueda realizar con éxito, muchas gracias por la información :D
TE PASASTE ESTA DE LUJO TU PUBLICACIÓN
Ola johan, gracias por tu ayuda es grato saber que hay personas como tu, despues de mucho batallar logre subir el tema que queria para el blog, primero probe cn mediafire y nunca pude, luego si intente con el openfile y ai si me resulto, pero quisiera saber como puedo hacer para cambiarle el color, ya que no hace juego con le blog que ando publicitando, por defecto es verde pero quisiera que fuera purpura, si te puedes fijar en mi blog: www.bodasyluz.blogspot.com podras ver el color que le estoy poniendo... saludos de lima, peru, gracias de nuevo
Esta aplicación es mejor que la que venia utilizando, ademas lo que utilizaba dejó de funcionar, bueno...que empiezo a desvariar, que muchas gracias por el tutorial es muy útil y ademas la música no tarda nada en cargarse
Saludos
Holas!
En cuanto a Bodas&Luz, pues está bonito tu blog pero me temo que no se puede cambiar el color de los botones, lo único que si permiten personalizar es el fondo #FFFFFF que está en blanco por cualquier otro. De todas maneras no lo veo mal, te ha quedado bien.
Gracias a todos!
hola, gracias antes que nada por el tutorial esta bien entendible y sencillo, pero yo soy lago nuevo en esto de los blogs, tengo mi cuenta en blogger y ya tengo el codigo con el player y mi cancion, pero NO SE EN DONDE PEGAR EL CODIGO!! fijate me voy a, personalizar/edicion HTML/ y luego me TOOODO el codigo de la plantilla pero no se en que parte pegarlo para que funcione! te agradeceria que me ayudaras, gracias!
Holam msl:
Nada, tienes que ir a la pestaña de Diseño-> Elementos de la página-> Añadir un Gadget y luego añades uno de tipo "HTML/Javascript". Ahí pegas el código de tu reproductor, guardas y eso es todo. Una vez agregado, lo puedes arrastrar al sitio donde tú quieras que se muestre.
Saludos
Hola, se escucha horrible la cancion con ese reproductor!!! pero el archivo de mp3 que subi no tiene nada que ver porque esta perfecto. ¿Qué puede ser?
hola. gracias por el tutorial, pero no lo puedo insertar a la pagina, lo puse como comentario, y si se pone autoplay y eso, pero no lo quiero como comentario, lo quiero como elemento de pagina o gadget no se como se llama, pero lo inserto en la pagina, y me marca error.
saludos.
http://relatodjuventud.blogspot.com/
Esta muy bueno el tutorial pero tengo un problema!
subo las 5 canciones que voy a subir, luego de que todas carguen no me aparece ninguna direccion de donde quedaron guardadas las canciones!
ayudaaaaa
Ya pude encontrar todo, hice todo al pie de la letra pero no me funciona!!! voy a mi blog, aparece el reproductor y no se escucha nada!!!
voy ha intentar ponerme el reproductor a ver si puedo
Oye brou...y como le hago para agregar más canciones a mi reproductor...Gracias mi mail es:
ixoyemetal@gmail.com
oye man como le pongo más camciones a mi reproductor...Gracias...mi mail es
ixoyemetal@gmail.com
Gracias , Ver si hay al guno que mis amigos puedan descargar la musica desde la web
Hola amigos
Soy nuevo en es blog, deseo saber que reproductor puedo colocar en mi blog pero que sea con lista para un numero ilimitado de mp3,
en el momento estoy utilizando el de "Box.net" pero solo da 1G gratis.
Agradezco su ayuda
ajfd@colombia.com
MIL GRACIAS COMPAÑERO HE ESTADO BUSCANDO UN SERVIDOR PARA PODER SUBIR UN MP3 DE MAS 50MB Y AQUI LO HE CONSEGUIDO.
GRACIAS
xevere me salvastea haora si voyu apoder hacer el blog k tanto keria muchas gracias
ver como gente como tú se esfuerza por ayudar a los demás y comparte es de agradecer,gracias
porque me sale la señal de prohibido cuando intento subir un archivo mp3? sigo todos los pasos al pie de la letra.
Va perfcto,pero para poner varias canciones,no sólo una,como queraría el script? se pondría una cancion junto con otra o....?
Holaa =) la vdd que todo muy claro.. pero te hago una pregunta..
a mi no me apareece la direccion cuando subo la musica =S
osea, sube todo perfecto.. pero busco.. la pagina que me tendria que aparecer y no hay nada :S , donde busco eso?
Hola, estoy intentando instalar el reproductor con el código automático, pero no me funciona. Haber si me puedes decir q es lo q hago mal, xq lo he intentado varias veces y nada. Un saludo
Ola yo stoy aciendo una pagina web y ya tngo el reproductor puesto pero quiero que hallamas de una cancion como se ase?? yo tngo este codigo:
embed width="200" height="18" src= "Los veteranos.mp3" align="right"
pero quiero mas canciones.
si no se puede contestarme coon un codigo oonde tnga que camviar soolo los nombres de la canciones ok?
que si no me lio que yo no soy un informatico ni nada ok?
espero respuestas..gracias de antemano (Y)
olaa quiero poner mas de una cancion ami reproductor de musica de mi pagina.. yo uso este codigo (para una sola cancion)
ayudarme gracias!!
Muchisimas gracias, lo estava buscado pero no lo encontraba en ninguna parte, gracias a ti el asunto esta resuelto.
muchisimas gracias
ravelallfull.blogspot.com
amigo ayudame como puedo hacer yo para registrarme, ya que la pagina ESTA MURIENDO y me refiero que ya no va a funcionar MAS
ayudanos. el equipo de MOVIECREADOR FILMS-
Muy bueno y muy simple de aplicar, muchas gracias. Un diseño simple, sobrio, sin protagonismo.
Grax
buenisimo si no fuera por un detallito.....LA PAG NO ESTA FUNCIONANDO...gracias de todas formas
tengo un problema me aparece el reporductor pero pongo play y no se escucha nada, aljoe el audio en rapidshare, sera eso??
gracias por el aporte solo que deverias actualizarnos con otra pagina ya que esta murio
holizzzzz quiero saber porq no puedo entrar a onpomy, me encanto este tutorial pero no lo puedo poner en mi blogg me ayudarias?? porfiisss quiero publicar mis temas propios... mil gracias
uuuu recine meentero q la wb no murio, ok si tenes otra web porfiisss decii!!!! graciass
Hola, oye, puedo meterle mas de una cancion al reproductor, es que quiero tener un reproductor con mis canciones (graciaciones mias) y que la gente las escuche desde el reproductor en vez de ir a un post para ya sea escucharla en la pagina supload.com o bajarla de mediafire. Salu2 y gracias de antemano.
Publicar un comentario en la entrada
Hola! Gracias por dejar tu comentario!
(Si no tienes activado algún perfil, elige Nombre/URL... puedes dejar en blanco URL si lo deseas)