Cómo poner un reproductor de música en tu blog de Blogger
Blogger Publicado por Claudia en agosto 11, 2012
Incluir un reproductor de audio en un blog hoy en día es realmente sencillo gracias a la etiqueta HTML5 <audio>, tal y como explica Amanda en BloggerBuster.
La etiqueta <audio>, que define el sonido (música o streams de audio) es nueva en HTML5 y es soportada por los siguientes navegadores: Internet Explorer 9, Firefox, Opera, Chrome, y Safari. El reproductor de música que permite incluir se verá así:
¿Quieres un reproductor de música en tu blog de Blogger?
El uso básico de dicha etiqueta audio es el siguiente:
1
2
3
4
<audio controls controls>
<source src="http://dl.dropbox.com/u/3549515/10%20-%20Unicornio.mp3" />
Tu navegador no soporta la etiqueta audio.
</audio>
Por lo tanto, deberás copiar ese código en la edición de HTML de la entrada donde quieras reproducir música o audio. Lo único que tienes que hacer es reemplazar en el código es cancion.mp3, que corresponde al enlace directo de tu archivo de audio.
Evidentemente, también necesitarás un hosting para almacenar tus archivos de audio.
Usando Dropbox para almacenar tu música
Dropbox es uno de los servicios de alojamiento más populares que te permite guardar todo tipo de archivos en la nube para acceder a ellos desde cualquier lugar. Puedes crear una cuenta gratuita con 2GB de almacenamiento, pudiendo enlazar directamente tus archivos almacenados ahí.
Una vez que has creado una cuenta en Dropbox y has ingresado a ella, deberás subir el archivo de audio que quieras poner en tu blog (mp3) en la carpeta “Public“. Cuando se haya cargado, tienes que hacer click sobre él con el botón derecho del mouse, seleccionando la opción “Copiar enlace público“.
Así obtendremos el enlace directo que necesitamos reemplazar en el código de más arriba.
Atributos de la etiqueta audio
El control “controls” hará que el audio se reproduzca sólo cuando el usuario haga click en el botón “play” del reproductor. Sin embargo, en W3SChools podemos ver otras opciones:
Autoplay: Reproduce automáticamente el audio una vez que está listo.
1
2
3
4
<audio controls autoplay>
<source src="cancion.mp3" />
Tu navegador no soporta la etiqueta audio.
</audio>
Loop: Reproduce el audio continuamente.
1
2
3
4
<audio controls loop>
<source src="cancion.mp3" />
Tu navegador no soporta la etiqueta audio.
</audio>
Posts relacionados
Compártelo!
Incluir un reproductor de audio en un blog hoy en día es realmente sencillo gracias a la etiqueta HTML5 <audio>, tal y como explica Amanda en BloggerBuster.
La etiqueta <audio>, que define el sonido (música o streams de audio) es nueva en HTML5 y es soportada por los siguientes navegadores: Internet Explorer 9, Firefox, Opera, Chrome, y Safari. El reproductor de música que permite incluir se verá así:
¿Quieres un reproductor de música en tu blog de Blogger?
El uso básico de dicha etiqueta audio es el siguiente:
1 2 3 4 | <audio controls controls> <source src="http://dl.dropbox.com/u/3549515/10%20-%20Unicornio.mp3" /> Tu navegador no soporta la etiqueta audio. </audio> |
Por lo tanto, deberás copiar ese código en la edición de HTML de la entrada donde quieras reproducir música o audio. Lo único que tienes que hacer es reemplazar en el código es cancion.mp3, que corresponde al enlace directo de tu archivo de audio.
Evidentemente, también necesitarás un hosting para almacenar tus archivos de audio.
Usando Dropbox para almacenar tu música
Dropbox es uno de los servicios de alojamiento más populares que te permite guardar todo tipo de archivos en la nube para acceder a ellos desde cualquier lugar. Puedes crear una cuenta gratuita con 2GB de almacenamiento, pudiendo enlazar directamente tus archivos almacenados ahí.
Una vez que has creado una cuenta en Dropbox y has ingresado a ella, deberás subir el archivo de audio que quieras poner en tu blog (mp3) en la carpeta “Public“. Cuando se haya cargado, tienes que hacer click sobre él con el botón derecho del mouse, seleccionando la opción “Copiar enlace público“.
Así obtendremos el enlace directo que necesitamos reemplazar en el código de más arriba.
Atributos de la etiqueta audio
El control “controls” hará que el audio se reproduzca sólo cuando el usuario haga click en el botón “play” del reproductor. Sin embargo, en W3SChools podemos ver otras opciones:
Autoplay: Reproduce automáticamente el audio una vez que está listo.
1 2 3 4 | <audio controls autoplay> <source src="cancion.mp3" /> Tu navegador no soporta la etiqueta audio. </audio> |
Loop: Reproduce el audio continuamente.
1 2 3 4 | <audio controls loop> <source src="cancion.mp3" /> Tu navegador no soporta la etiqueta audio. </audio> |
22 Comentarios
Información Bitacoras.com…
Valora en Bitacoras.com: Incluir un reproductor de audio en un blog hoy en día es realmente sencillo gracias a la etiqueta HTML5 , tal y como explica Amanda en BloggerBuster. La etiqueta , que define el sonido (música o streams de audio) es nuev……
Hola… quiero hacerte una pregunta, tengo una radio online y solo transmito cuando estoy en línea. He visto que puedo programar listas XML de música para que las personas que entren a mi página de la radio escuchen la música y dar la impresión de que siempre estoy en línea. Me gustaría saber como puedo programar éstas listas aleatoriamente para que no se repitas las mismas canciones cuando las personas entren a la página de la radio. Si me puedes ayudar te lo agradecería. Te dejo la pagina de la radio… http://www.radiochar.co... saludos y gracias !!!
http://www.radiochar.co
Quizás podrías probar un reproductor de audio como Dewplayer
http://www.alsacreations.fr/dewplayer-en
Hola Claudia … no es el reproductor, pues este no tiene nada que ver en el código que programa la música aleatoriamente en las listas XML.
Saludos !!!
[...] on chicablogger.com Comparte esto:Me gusta:Me gustaBe the first to like this. [...]
bastante interesante creo que probare con algunos
interesante voy a probarlo
Muchas gracias!!
holaa esque hize todos los pasos y bueno puse el reproductor pero no se que me quedo mal que cuando abro el blogger se ve el reproductor pero no reproduce chequeaa pasa oor mi blog apenas los estoy creando no tengo nada http://saranghaekpop0312.blogspot.com/ puedes ver que no reproduce necesitoo ayudaaa
Es justo la información que andaba buscando, gracias por el aporte. Un saludo.
Que pena con la chica blogger… pero al no tener respuesta alguna tocó recurrir a bloggeros más serios, como es el caso de El Potro de CiudadBlogger … lo recomiendo. Superserio, atento a sus seguidores, investigador, amable … es lo mejor que existe en la Web sobre recursos y trucos … Ahora, con respecto a mi inquietud sobre la radio, pues les comento que me tope con una excelente plataforma Online que me programa mi música las 24 horas del día y es totalmente gratis … ya la tengo embebida a mi blog personal (www.robinsonchar.com) como a la página de mi radio (www.radiochar.co)… los invito a que pasen y revisen a ver que tal les parece y me escriben si quieren saber como hacerlo. Bye !!!
Hola como hago para crear una playlist….
ESTOY INTERESADO DE TENER UNA RADIO COMO ROBINSON CHAR,YA HE ESTDO EN LA RADIO DE EL.PANA COMO HAGO??
Hola DJ-LEXIS.COM … pásate por mi blog y déjame tu correo en el formulario de contacto o sígueme en cualquiera de mis perfiles de Redes Sociales … http://www.robinsonchar.com …. Saludos !!!
PANITA ROBINSON,EN SU PAGINA DE FACEBOOK,LE ENVIE UN MSJ 24 DE ENERO 2013.SOBRE MI CASO.GRACIAS POR LA RESPUESTA QUE ME PUEDA DAR.(y)
PANITA ROBINSON,EN SU PAGINA DE FACEBOOK,LE ENVIE UN MSJ 24 DE ENERO 2013.SOBRE MI CASO.GRACIAS POR LA RESPUESTA QUE ME PUEDA DAR.
Gracias, muy bien explicado. Estaba buscando una alternativa de audio para tener una idea de cómo hacerlo.
Hola:
Muchas gracias por la ayuda. Tengo un problemilla, si quiero insertar varios sólo me reproduce el primero
Cómo lo puedo hacer?
Gracias.
No hay opcion de copiar enlace en dropbox !!
Me aparece pero no me sale para clickar es como sino fuera funcional aparece pero no va.ayudaaaaa!!!!!
hola chica! puse el reproductor en mi blog con la última entrada en autoplay y funciona muy bien. pero sólo lo hace en chrome, en mozilla y explorer 10 no. por qué? saludos.