Insertar MP3s con facilidad

JMiur [E]

Cualquier tipo de código HTML puede ser escrito utilizando JavaScript. Esta posibilidad es muy útil cuando se trata de códigos repetidos o engorrosos como lo son los reproductores de video o de audio que, por lo general, son siempre iguales ý sólo cambia un dato, el archivo a reproducir.

Así como era posible crear un script para insertar videos de YouTube con una instrucción sencilla, también podemos hacerlo con un reproductor de audio como el DewPlayer.

¿Qué necesitamos? Alojar el reproductor (un archivo SWF) en un servidor, por ejemplo en una cuenta de ImageShack y agregar este código en nuestra plantilla, antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function escribir_MP3(archivo) {
var output = "<object type=\"application/x-shockwave-flash\" data=\"URL_dewplayermulti.swf?mp3=" + archivo + "\" height=\"20\" width=\"240\">";
output += "<param name=\"movie\" value=\"URL_dewplayermulti.swf?mp3=" + archivo + "\"></object>";
document.write (output);
}
//]]>
</script>
Donde debemos reemplazar URL_dewplayermulti.swf por la dirección URL de nuestro archivo.

¿Cómo lo usamos? Escribiendo una llamada al script donde quisiéramos que se mostrara:

<script type='text/javascript'>escribir_MP3("URL_archivo");</script>
Cada vez que lo usamos, simplemente cambiamos el dato del archivo de audio a reproducir y para probarlo, ya que estamos, aprovechamos la entrada de Gem@ y usamos XooImage para alojar algunos archivos MP3s.



34 comentarios:

Loco 21

Una duda:

En mi blog: (http://modelo-ac.blogspot.com) le coloque borde al post.footer, y la linea putada que va abajo del mismo, esta muy alejada. Como la subo??

Saludos

JMiur

No veo el código de la plantilla pero, ese parecería ser el lugar donde has colocado los posts relacionados y, como no muestra ninguno, el espacio permanece vacio.

Shark_Bloody

El ultimo un temazo, aguante Los Redondos ;)

Shark_Bloody

Respecto al comentario anterior, era aguante el Indio :$

Loco 21

Me los muestra solo cuando expando la entrada, sino me lo deja en blanco creo. Como hago para que se vean en la pagina principal tambien.

Por cierto, busque en el blog y no encontre la forma de editar los articulos relacionados. Me indicarías en que entrada comentas como editarlos. Saludos.

Graciela

la segunda canción que no recuerdo ni el nombre...tampoco el grupo :)

Romer Riera

Hay algún reproductor al cual se le puedan insertar varios mp3. Yo tengo uno en el blog ( el embeded )que es bonito, pero reproduce una sóla canción.

Claudio

Como dices hay que probar en distintos reproductores.

Buen aporte gracias

JMiur

Shark_Bloody: Se entendió perfectamente :D

Loco: Los posts relacionados sólo deben ser mostrados en las páginas individuales y no en la principal así que debes colocar esa parte del código entre condicionales, por ejemplo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
... aqui colocas el c+odigo de posts relacionados ...
</b:if>

De esa manera, evitará que se cree ese espacio en el home.

Graciela: Paul McCartney - Dance tonight :)

Romer: Dewplayer lo permite, hay otros que también lo hacen, el problema en Blogger es que a veces, es necesario utilizar archivos XML extras y eso complica las cosas.

Claudio: Hay que probar :D

Vku

Muy buen dato no sabia que se podia hacer esto con JavaScript.
sobre subir las imagenes, archivos mp3 y swf hay una direccion que soporta todo, hace tiempo que la utilizo y no he tenido problemas, si con ImageShack a parte de que ya no deja subir flash.
te paso la direccion http://img1.xooimage.com/fr/ podes cambiar img1 hasta 10 (http://img10.xooimage.com/fr/).
Si queres reproductores en flash tengo unos cuantos para una o mas mp3 o radios online. me avisas

Loco 21

No entiendo, exactamente cual y donde coloco el codigo??

javfanel

gracias y si era asi ya ee hecho los cambios

pp_grillo

Hola amigo... Soy pp_grillo y tengo un blog en blogger (http://polillave.blogspot.com). La verdad que tu blog esta muy bueno y es de mucha ayuda para "nosotros" que recién estamos explorando el mundo del blog.
Tengo una consulta... ¿Cómo puedo hacer para ocultar un post? ya que en mi blog tengo pensado postear muchos programas para pc y quiero agregar algo así como un texto de "terminos y condiciones de usos" de los mismos para que todos lean. Mi idea es re - direccionarlo desde un link en los posteos.
Espero que mi consulta sea respondida, ya que he buscado en tu blog pero es demasiado largo y no encuentro lo que preciso (o por lo menos eso creo :D).
Te agradeceria que me contestes en un comentario en mi blog o en mi mail: dth.inspace@hotmail.com.
Desde ya muchas gracias y de nuevo te digo... tu blog me ha sido de mucha ayuda!

Abrazos. PP_GRILLO

JMiur

Vku: Si lees el post, justamente se refiere a ese servicio de alojamientos e incluye direcciones y enlaces. ImageShack sigue aceptando SWFs como lo hace hace años, utilizando una cuenta gratuita. Los reproductores que ves, están alojados allí.

Loco: No puedo decirte con exactitud porque no sé qué códigos estás usando para eso, es algo que no se ve online.

pp_grillo: No hay forma de hacer eso en Blogger. Los blogs son públicos o privados y no hay términos medios.

Vku

tiene toda la razon eso me pasa por no leer bien.
pero vos sabes que yo antes los subia a ImageShack pero no se porque ahora no me deja. y a parte he tenido problemas con imagenes que no las muestra en ocaciones.
un saludo y disculpas.

JMiur

Suele pasar con ImageShack, sobre todo con las imágenes; por eso lo ideal es tener una cuenta, por lo menos, para controlarla.

Jorge Raws

jejeje este post de ayuda me sirvio a la perfeccion


me conviene me la pasaba ratos inscrustando el reproductor flash y

cambiando datos jeje ahora solo pego la url y listooo


waaa.... bueno ase tiempo intente lo del intro en el blog en flash y si funciona me kedo bien solo que retrasa la carga ....

weee visitenme y vean funcionando lo de la insercion de un mp3 con facilida en Urbanflow94

La 5ta Pata digital

Gracias por esa perlita que es "Naked in the rain" de Crosby & Nash.

Loco 21

Mira el codigo, que creo es el de los Articulos relacionados es este: Miralo aca: http://img15.imageshack.us/img15/2577/1arti.png Espero encuentres el error, la condiciones estan colocadas.

JMiur

El cierre de la condición es equivocado ( </b:if> ) Ahí sólo condicionas el texto Articuloas Relacionados pero te falta lo de abajo que es el script que lo ejecuta. Debes quitarlo de ahí y ponerlo más abajo, al final de algún </script> que no alcanza a verse en esa imagen.

JMiur

Depende cuál, algunos si, otros no. Que yo recuerde, este no puede cambiarse.

José GDF

¿Es posible añadir más de una canción a un reproductor de estos? ¿Cómo se haría?

Lo acabo de probar, subiendo todo a Fileden, reproductor y mp3, y va bien.

JMiur

Se puede si se utiliza la versión del reproductor llamada Multi y separando los archivos mp3 con un pipe o sea este caracater: |

En esta entrada esta mas o menos explicado.

José GDF

Se te murió el enlace, creo. Pero es posible que te refirieras a esta entrada.

Tenía que haber buscado más antes de preguntar :$

Muchas gracias ;)

JMiur

SI, exacto. Ese enlace que encontraste es bastante más útil que el que puse yo :D

Aunque quise poner este otro, allí se habla del DewPlayer en particular.

Espero que esta vez no me haya equivocado :D

José GDF

Ahora sí, ¡je, je, je, je!

Me va a resultar especialmente útil este reproductor, cuando quiera subir demos de audio o canciones y no quiera subirlas a Goear.

Y poder colocar más de un archivo en un mismo reproductor le dará más pulcritud a la entrada donde la publique que si hay un reproductor para cada uno.

Muchas gracias por todo :)

JMiur

PErfecto, entonces. Para mi gusto, es de los reproductores más interesantes por su sencillez.

Ivoc

una pregunta, aloje el mp3 a Divshare, y no se q link poner para q lo reproduzca :S

Ivoc

alojar el archivo swf en google sites esta mal?

es q no me reproduce, y ya aloje el archivo en Freefile

Ivoc

fileden quise decir

JMiur

Tendría que ver cuál es el código que estás usando para responderte.

Ivoc

http://sites.google.com/site/abexordiovitae/alojamientos-js/dewplayer-mini.swf

esa la url... y el codigo es el q pones de primero aqui

http://www.fileden.com/files/2009/9/13/2574274/06%20-%20Silvio%20Rodriguez%20-%20Te%20doy%20una%20canci%C3%B3n.mp3

y este es el mp3 (url)

JMiur

El reproductor funciona bien pero, me aprece que el error está en el MP3, fundamentalmente en el nombre del archivo. Tiene desiados caracteres que en la web son complesjos de usar como URLs; espacion, acentos, etc.

Cámbiale el nombre a algo sin espacios y sin acentos, por ejemplo:
06_-_Silvio_Rodriguez_-_Te_doy_una_cancion.mp3
o simplemente:
SilvioRodriguez_Tedoyunacancion.mp3
o cualquier cosa similar.

¿Quiere dejar un comentario?

Hay varios métodos posibles.

Uno de ellos es el formulario de comentarios que tan generosamente nos ha regalado Blogger y que funciona sólo de tanto en tanto. Su uso es aconsejable sólo en caso de ser una de esas personas a las que les gustan los retos y los desafíos.
¿No quiere arriesgarse? Haga click para ocultarlo y utilice las otras opciones.

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

Los comentarios están siendo moderados y serán publicados a la brevedad.