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:
39 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.
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)