Reproductor música o sonido mp3 Player. Tutorial

LuJo



La web mp3 Player pone a nuestra disposición distintos Reproductores de archivos .mp3 (música, sonidos, audio...) en donde con un poco de paciencia puedes decorarlos con originales colores y formas. Digamos que deja más espacio a la imaginación y puede hacer que los colores con nuestro blog o web combinen mucho mejor.

Este reproductor es una alternativa a Dewplayer y tiene el mismo mecanismo con alguna pequeña variación: sólo hay que subir el archivo .mp3 a tu servidor. Es un elemento más para agregar audio a posts o música de fondo en el blog.

He aquí los modelos que podemos encontrar y modificarlos un poco al gusto de cada cual:



■ Las versiones que se presentan son: mini, normal, maxi y multi.
Sólo hemos de elegir aquel reproductor que se adapte mejor a nuestras necesidades:

Nos da un generador de código que será el que luego adjuntemos a nuestro blog. Tendrá la siguiente forma:


Al igual que en Dewplayer y webs similares con reproductores tipo flash vamos seleccionando en el panel cómo queremos que sea nuestro reproductor: altura, anchura, si queremos que suene una y otra vez el archivo, si preferimos que nada más abrirse la web el archivo de sonido .mp3 comience a sonar, el volumen permanente desde 1 a 100 para evitar dejar sordos a nuestros visitantes...etc, etc...

Como se indica en la siguiente imagen la web permite modificar los colores de los botones, cursor, letras, fondo del reproductor.... Se trata de tener paciencia y poner en marcha nuestra imaginación. Elegir lo que realmente nos convence algunas veces lleva su tiempo.

De todas estas "elecciones" la propia página genera un código como por ejemplo:



**Condiciones para su uso:
1. Es necesario tener los archivos .mp3 subidos a la red o en uno de tus servidores de confianza Sites, Dropbox u otros similares...).

2. Entra a Escritorio > Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y pega el código del reproductor que hayas seleccionado
O
puedes colocarlo en una entrada en la zona de "Edición de HTML".


1. Mini










<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">

<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />

<param name="bgcolor" value="#0000ad" />

<param name="FlashVars" value="mp3=URL del archivo&amp;bgcolor=0000ad" />

</object>





2. Normal










<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3.swf" width="200" height="20">

<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3.swf" />

<param name="bgcolor" value="#ffffff" />

<param name="FlashVars" value="mp3=URL del archivo de audio.mp3" />

</object>



3. Maxi








<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="250" height="20">

<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />

<param name="bgcolor" value="#ffffff" />

<param name="FlashVars" value="mp3=URL del archivo.mp3&width=250" />

</object>



4. Multi









<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="200" height="100">

<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />

<param name="bgcolor" value="#ffffff" />

<param name="FlashVars" value="mp3=URL nº1 archivo .mp3|URL nº2 archivo .mp3|URL nº3 archivo .mp3|URL nº4 archivo .mp3/>

</object>



Elementos a considerar:

1. Los códigos que están copiados en esta entrada sólo son un ejemplo de lo que podemos obtener a través de la web. Reitero que se pueden seleccionar formas y colores a conveniencia de cada usuario. Siempre nos dará un código distinto si le añadimos un nuevo color o característica.

2. *A diferencia de Dewplayer, en mp3 Player sólo hay que cambiar la URL del archivo en formato .mp3 que queremos escuchar.

3. Tened en cuenta un matiz:

a. La página nos da como codigo http%3A//url del archivo .mp3 teniendo en cuenta que el http:// no se coloca.

b. *En mi caso he practicado con el código y podemos obviar http%3A//. Me explico: funcionará el sistema de la misma forma colocando la dirección completa p.ej:

http://blogdelujo.blogspot.com

en vez de

http%3A//blogdelujo.blogspot.com

4. Si deseas que el audio suene al abrirse la web agrega al final de la URL &amp;amp;autoplay=1

P.ej:

http%3A//archivo .mp3&amp;amp;autoplay=1

O

http://archivo .mp3&amp;amp;autoplay=1


5. En la versión Multi para agregar más archivos .mp3 se coloca al final de cada URL el símbolo | más la URL de la canción:

|http%3A//

O

|http://


P. ej:

http%3A//URL del archivo UNO.mp3|http%3A//URL del archivo DOS.mp3|http%3A//URL del archivo TRES.mp3

O

http://URL del archivo UNO.mp3|http://URL del archivo DOS.mp3|http://URL del archivo TRES.mp3

6. Tanto Dewplayer como mp3Player o Reproductor de Yahoo , (que también reproduce archivos .WAV), funcionan con: Safari, Firefox, Internet Explorer, Google Chrome.


Espero que esta información te sirva Nancy. Sólo precisas elegir qué reproductor se ajusta más a tus necesidades o el que te parezca más simpático. (-^o^-) (^_-)




► Actualización:

Reproductor similar al que se usaba con el servicio de Gmail. El código a incorporar:


<object width="400" height="27" id="movie" type="application/x-shockwave-flash" data="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=URL_archivo_MP3">

<param name="movie" value="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=URL_archivo_MP3" />

<param name="wmode" value="transparent" >

<param name="allowScriptAccess" value="never">

<param name="flashvars=" value="playerMode=embedded">

</object>


Se coloca todo en una línea si se trata de un post de Blogger (Edición de HTML) donde sólo debemos reemplazar URL_archivo_MP3 por la dirección del archivo a reproducir y ha de estar haber alojada previamente.






8 comentarios:

José Luis López Recio

Tus entradas siempre tienen interés. Unas veces por unas cosas y otras por otras, siempre aprendo algo.
Un abrazo.

Nancy

Lujitooo, gracias.
Voy a ponerlo en práctica y vamos a ver qué tal me va. Espero que bien. Le envié la información anterior a un alumno, pero le dije que le iba a enviar esta. Si no la entiendo yo (soy mera cabeza dura) seguramente él sí podrá hacerlo.
Apapachos agradecidos.
Feliz noche (porque supongo que es de noche en España)

Lujo

Hola Joselop
Gracias de todo corazón. Yo también aprendo de tu excelente blog. Seguro que pronto te veo en las librerías de mi ciudad.

Hola Holaa Nancy
Espero que se aclare con la información. Con esta entrada sólo tendrás que preocuparte de subir el .mp3 a un servidor. te aconsejo Sites de Google.
Es más, puedes abrirte una cuenta Google cualquiera y activar la opción de Sites que te dará por defecto. Lo único que puede entrañarte algún problemilla sea "crearla", después subir el archivo y obtener la URL es fácil.
Reitero que si tienes algún problema no tengo inconveniente en echarte una mano. Te aseguro que es más sencillo de lo que parece.
Abrazotes enormes y cariñosos.

FBM

Lujo: me tienes obnubilado con lo que sabes. Menos mal que no eres informática (a lo mejor por eso se entiende lo que dices, sin tecnicismos).

Lujo

Hola Holaaa FBM
Mi niño, soy yo la que te admira y siente un gran respeto por todo tu trabajo. Para mí eres un ejemplo a seguir.
Mil abrazos cariñosos y gigantescos

LadyMarian

Una entrada fantástica! Se nota muchísimo trabajo detrás para que los que no sabemos NADA de estas cosas la entendamos.
Estoy de acuerdo con lo que dijo FBM, se te entiende porque te acordás de lo que te "complicaba la vida" cuando no sabías del tema. Poder ponerse en el lugar del que no pertenece al mundo de la informática es algo que no abunda. Generalmente estas explicaciones se dan para el "selecto grupo de entendidos en el tema", con lo cual son pocos los que pueden acceder a ese grupo.
Felicitaciones!
Besos

Lujo

Re Hola LadyMarian,
Lo que más me reconforta es que las personas que siguen este humilde blog aprecien el cariño que le pongo a cada entrada.
Sólo por eso ya merece la pena seguir adelante.
Abrazotes hipervitaminados!

Anónimo

This is a great site, thanks for sharing.

Publicar un comentario

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP