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.

45 comentarios:

Bocha  

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

Responder
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.

Responder
Shark_Bloody  

El ultimo un temazo, aguante Los Redondos ;)

Responder
Shark_Bloody  

Respecto al comentario anterior, era aguante el Indio :$

Responder
Bocha  

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.

Responder
Unknown  

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

Responder
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.

Responder
Claudio - Poca Tinta  

Como dices hay que probar en distintos reproductores.

Buen aporte gracias

Responder
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

Responder
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

Responder
Bocha  

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

Responder
sephi  

gracias y si era asi ya ee hecho los cambios

Responder
Scoby John  

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

Responder
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.

Responder
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.

Responder
JMiur  

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

Responder
Jorge Key/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

Responder
OntAires  

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

Responder
Bocha  

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.

Responder
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.

Responder
nudians  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

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

Responder
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.

Responder
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.

Responder
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 ;)

Responder
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

Responder
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 :)

Responder
JMiur  

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

Responder
Ivoc  

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

Responder
Ivoc  

alojar el archivo swf en google sites esta mal?

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

Responder
Ivoc  

fileden quise decir

Responder
JMiur  

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

Responder
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)

Responder
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.

Responder
Jorge  

Hola, tengo 2 consultas. La primera es saber si no hay un sitio que aloje música especialmente para eso, osea saber la dirección real del archivo para asi insertar en el código. Es que tengo una cuenta en 000webhost, ahi pude subir el reproductor pero no la música, aparentemente sube pero después no está. En otras palabras sería llamar al audio de otro sitio y no del mio.
Y lo segundo, en el script que debo insertar en mi blog pides para cambiar esta parte: "URL_archivo". Aqui me confunde el guión bajo, si por ejemplo el sitio donde está el audio es http://www.miblog.webege.com y el archivo se llama Waka.mp3, la parte que debo cambiar no debería quedar asi: http://www.miblog.webege.com/Waka.mp3 ?

Aprovecho para darte mis datos y asi verificas si realmente subió el audio que intenté subir. Mi sitio es el que aparece arriba y el audio se llama "shakira_esto_es_africa.mp3". Yo para probar si está ahi la música que subí (o intenté) puse directo http://www.miblog.webege.com/shakira_esto_es_africa.mp3 y me da un error. Qué puede ser?

Gracias y muy buen blog el tuyo

Responder
JMiur  

URL_archivo URLarchivo la_URL_del_archivo todo es lo mismo sólo es una manera de indicar que ahí va la URL del archivo, sea cual sea su formato.

El sitio: http://www.miblog.webege.com existe pero, aparentemente, esta URL no:
http://www.miblog.webege.com/shakira_esto_es_africa.mp3
Es fácil de comprobar, simplemente coloca esa dirección en el navegador.

Sitios que acepten archivos MP3 sin restricciones hay pocos y cada vez hay menos. Fileden es uno de ellos.

Responder
Jorge  

Hola otra vez, el problema en subir la música ya pude solucionarlo, lo que pasó es que no aceptan archivos de más de 5 Mb. Ahora tengo otro problema, aparentemente hize todo como dices pero no se reproduce nada, la parte que hay que modificar lo hize por:
http://www.miblog.webege.com/dewplayermulti.swf?mp3="...

Es que tanto el reproductor como el archivo están en mi página principal.. Y para llamar al archivo lo hize así:
http://miblog.webege.com/shakira.mp3
Obviamente mi archivo se llama shakira.mp3. Probé y está ese archivo en mi sitio.
Dónde crees que está el problema? Qué debo modificar?
El blog donde estoy probando es http://pasaporinternet.blogspot.com y el script puse debajo del buscador, pero no aparece nada

Gracias

Responder
JMiur  

El script parece estar colocado todo en una sola línea:

<script type='text/javascript'>//<![CDATA[function escribir_MP3(archivo) { ....... }//]]></script>

y eso, hará que nada se ejecute. Deberías er algo así:

<script type='text/javascript'>
//<![CDATA[
function escribir_MP3(archivo) { ....... }
//]]>
</script>

Responder
Raúl  

Hola Jmiur como vas necesito de tu ayuuuuda brother porfavor haber si me puedes sacar de esta.

Pongo este reproductor en autoplay en las notas y se reproduce dos veces; la primera y la segunda despues de mas o menos 50 segundos de que empieza la primera entonces a los 51 segundos son dos audios desfasados.

He probado con otros reproductores y pasa lo mismo se reproducen dos audios con una diferencia de unos 50 segundos!!!!

Jmiur ayudame que debo hacer para que el audio se reprodusca de manera automatica pero no dos audios sooolo uno.

Tengo este problema mas o menos hace un mes e intentado de todo pero no puedo arreglarlo por eso recurro a tu gran sabiduría se que me vas a poder ayudar. Para que corrobores este error aqui te dejo una nota en la que tengo una nota en autoplay para que veas que se reproducen 2!!!

http://deportivocuenca.blogspot.com/2010/07/pedro-pena-el-nuevo-tecnico-va-ser.html

Saludos Jmiur.

Responder
JMiur  

No veo que ocurra eso. Hay un solo reproductor y funciona de manera normal.

De todos modos, yo no aconsejo que se use autoplay; es una molestia para quien visita cualquier sitio y retarda la carga de las páginas.

Responder
Diego  

Hola, me llamo Diego. Estoy armando un sitio que tiene varios estilos CSS que cambian dinámicamente mediante Javascript. Cada estilo de página lleva un reproductor Flash de MP3, pero no logro llamar a los reproductores desde Javascript, para que cambien junto con cada estilo (supongo que debería agregar alguna variable al mismo código que uso para hacer los cambios de estilo, pero no sé cuál es) Si pudieras darme una mano con el código necesario me harías un gran favor y quedaría muy agradecido (ya hace meses que estoy trabado con esto) El sitio en construcción es http://www.oscuriclaros.com.ar (preferiría que no apareciera la dirección del sitio en este comentario), perdón si no estoy escribiendo en el apartado correspondiente, y gracias por tus artículos, que me ayudaron en reiteradas ocasiones.

Responder
JMiur  

El tema de la URL no lo puedo resolver ya que los comentarios no pueden ser editados.

En cuanto a agregar el reproductor: lo que usas es un script que carga una hoja de estilo distinta; si el reproductor se puede modificar con CSS (cosa que es bastante improbable) se resuelve estableciendo la clase o datos en esas hojas de estilo.

Si por el contrario, es un reproductor normal que sólo puede cambiarse estableciendo atributos en una etiqueta HTML, deberá hacerse todo un script que no solo cargue una hoja de estilo distinta sino que además, "escriba" ese código HTML según sea el caso o modifique los atributos HTML de ese reproductor.

El tema es muy pero muy complejo de resolver ya que imagino que también es un dato que deberá agregarse a las cookies.

Responder
Diego  

Hola. Gracias por contestarme. Para explicarme mejor: Cada estilo CSS lleva un reproductor Flash con colores de fondo y colores de botones diferentes (o sea, tengo 12 estilos y 12 reproductores Flash hechos, que en realidad son 24 y 24: los otros 12 y 12 son los mismos pero en otro tamaño) Lo que necesitaría es llamar desde Javascript al reproductor correspondiente a cada estilo (lo de cargar los MP3 en los reproductores lo tengo resuelto, y no me importa si al cambiar de páginas las grabaciones se cortan) Creí que no era necesario crear un script, como me dices, que escriba código HTML o modifique los atributos, aunque es claro que quizás me equivoque. Sea como sea, si puedes orientarme un poco más, aunque sea para saber por dónde buscar o sobre qué código trabajar, te lo agradezco mucho.

Responder
JMiur  

¿Qué hace distintos esos reproductores? ¿Una variable en la URL o en el objeto SWF? ¿Están colocados en las entradas? Si es algo de eso, debes crear un script de alguna clase. Es algo que el CSS no puede hacer y por lo tanto, el script que usas es insuficiente ya que sólo carga archivos con hojas de estilo diferentes.

No hay forma de darte una respuesta mucho más concreta.

Responder
Diego  

Sí, supongo que lo que diferencia a los reproductores es una variable en el objeto SWF. Sé que no se puede modificar con CSS. No sé nada acerca de cómo crear un script, pero ya veré como me arreglo (igualmente, si conoces alguna buena página donde pueda leer sobre el tema, será bienvenida)

Gracias!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

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 ...

 
CERRAR