Reproductor música o sonido mp3 Player. Tutorial

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.