tutorial que te servira para subir un reproductor a tu web

1. Insertar un reproductor de mp3 en tu página web
joseluis / Martes 25 de abril de 2006
No es mi intención explicar los diferentes formatos de audio y las diferentes maneras de
reproducirlo en una página web. Para ello hay un artículo excelente y muy claro en el
blog de José María Campo "Insertar un reproductor de audio en una página web" o en el
de Isidro Vidal "Reproductores de audio".
En mi caso pretendo solamente algo práctico, dar a conocer algunos de los más
habituales reproductores de mp3 que se pueden integrar en una página web, y ayudar en
los primeros pasos de la instalación.
¿Cómo instalarlos?
Para instalarlos el proceso es muy parecido en todos.
1. Se descarga el archivo .swf correspondiente de la web (enlaces más abajo) o se cogen
del archivo del final del artículo.
2. Se sube al servidor el archivo del reproductor (.swf) y los de audio a reproducir
(.mp3). Te recomiendo que para todo ello te crees una carpeta "sonido" o "audio" o
como quieras para tener esos archivos ordenados.
3. Se copia y se pega el código correspondiente a cada reproductor donde queramos que
aparezca en la página.
IMPORTANTE: Hay que modificar la dirección del reproductor y del archivo de audio
por las tuyas, o sea quitar lo de "ruta_del_enlace/" por tu propia ruta tanto del
reproductor como del archivo de sonido y "blues.mp3" por el archivo que quieras
reproducir.
Y ya está.
Si utilizas SPIP y quieres integrarlos con él puede serte útil una contribución de
SPIP-Contrib que muestra paso a paso como integrar uno de ellos, el DewPlayer
en SPIP: Sencillo reproductor mp3 en Flash para SPIP
Algunos reproductores y el código que he utilizado para insertarlos
El tema empleado para probarlos (blues.mp3) es el "Bush War Blues" de Billy Bragg,
que regala en internet libre de derechos, y que es una versión actualizada del "Bourgeois
Blues" que Leadbelly grabó en 1938 para protestar contra el racismo.

2. Si tu conexión es lenta, es la primera vez que pulsas el botón de reproducción, o tienes
poco espacio en disco, puede que tarde un poco en oírse o no se escuche bien.
Reproductor mp3 de Neolao
Puede reproducir listas del propio sitio y es muy personalizable
+ info (en francés)
básico
con + botones
con otro color
Player mp3 multi (para listas) con volumen
Player mp3 multi (para listas) con otros colores
Player mp3 básico
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/player_mp3.swf" width="200" height="20">
<param name="movie" value="ruta_del_enlace/player_mp3.swf" />
<param name="FlashVars" value="mp3=ruta_del_enlace/blues.mp3" />
</object>
Player mp3 con + botones
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/player_mp3.swf" width="200" height="20">
<param name="movie" value="ruta_del_enlace/player_mp3.swf" />
<param name="FlashVars" value="mp3=ruta_del_enlace/blues.mp3&
showstop=1&showinfo=1" />
</object>
Player mp3 con otro color
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/player_mp3.swf" width="200" height="20">
<param name="movie" value="ruta_del_enlace/player_mp3.swf" />
<param name="FlashVars" value="mp3=ruta_del_enlace/blues.mp3&
bgcolor1=ffffff&bgcolor2=cccccc&
buttoncolor=999999&buttonovercolor=0&
slidercolor1=cccccc&slidercolor2=999999&
sliderovercolor=666666&textcolor=0" />
</object>
Player mp3 multi (para listas) con volumen
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/player_mp3_multi.swf" width="200" height="100">
<param name="movie" value="ruta_del_enlace/player_mp3_multi.swf" />
<param name="FlashVars"
value="mp3=ruta_del_enlace/blues.mp3&title=Bush War
Blues&showvolume=1" />
</object>
Player mp3 multi (para listas) con otros colores
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/player_mp3_multi.swf" width="200" height="100">
<param name="movie" value="ruta_del_enlace/player_mp3_multi.swf" />
<param name="wmode" value="transparent" />
<param name="FlashVars"
value="mp3=ruta_del_enlace/blues.mp3&title=Bush War
Blues&bgcolor1=f6f6f6&bgcolor2=cccccc&
buttoncolor=999999&buttonovercolor=0&
slidercolor1=cccccc&slidercolor2=999999&

3. sliderovercolor=666666&textcolor=0&
playlistcolor=999999&currentmp3color=996633&
scrollbarcolor=999999&scrollbarovercolor=0" />
</object>
XSPF Web Music Player
Puede reproducir listas del propio sitio o externas
+ info (en inglés)
(Music Player Slim)
(Music Player Button)
(Music Player Extended)
Music Player Slim
<object type="application/x-shockwave-flash" width="200" height="20"
data="ruta_del_enlace/xspf_player_slim.swf?
song_url=ruta_del_enlace/blues.mp3
&player_title=Bush_War_Blues
&song_title=Bush_War_Blues">
<param name="movie"
value="ruta_del_enlace/xspf_player_slim.swf?
song_url=ruta_del_enlace/blues.mp3" /> </object>
Music Player Button gris
<object type="application/x-shockwave-flash" width="17" height="17"
data="ruta_del_enlace/musicplayer.swf?
song_url=ruta_del_enlace/blues.mp3
&player_title=Bush_War_Blues
&song_title=Bush_War_Blues">
<param name="movie"
value="ruta_del_enlace/musicplayer.swf?
song_url=ruta_del_enlace/blues.mp3" /> </object>
Music Player Button verde
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/musicplayer.swf?
&b_bgcolor=ffffff&b_fgcolor=666666
&b_colors=ff0000,00ff00,0000ff,000000
&song_url=ruta_del_enlace/blues.mp3"
width="17" height="17">
<param name="movie"
value="ruta_del_enlace/musicplayer.swf?
&b_bgcolor=ffffff&b_fgcolor=666666
&b_colors=ff0000,00ff00,0000ff,000000
&song_url=ruta_del_enlace/blues.mp3" />
</object>
Music Player Button cuadrado (ojo, es el musicplayer_f6.swf)
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/musicplayer_f6.swf?
&b_bgcolor=dedede&b_fgcolor=666666
&b_colors=ff0000,00ff00,0000ff,000000

4. &song_url=ruta_del_enlace/blues.mp3"
width="17" height="17">
<param name="movie"
value="ruta_del_enlace/musicplayer_f6.swf?
&b_bgcolor=dedede&b_fgcolor=666666
&b_colors=ff0000,00ff00,0000ff,000000
&song_url=ruta_del_enlace/blues.mp3" />
</object>
Music Player Extended
<object type="application/x-shockwave-flash" width="200" height="80"
data="ruta_del_enlace/xspf_player.swf?
song_url=ruta_del_enlace/blues.mp3
&player_title=Bush_War_Blues
&song_title=Bush_War_Blues">
<param name="movie"
value="ruta_del_enlace/xspf_player.swf?
song_url=ruta_del_enlace/blues.mp3" /> </object>
DewPlayer
(DewPlayer mini)
(DewPlayer)
(DewPlayer multi)
DewPlayer mini
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/dewplayer-mini.swf?
son=ruta_del_enlace/blues.mp3"
width="150" height="20">
<param name="movie"
value="ruta_del_enlace/dewplayer-mini.swf?
son=ruta_del_enlace/blues.mp3" /> </object>
DewPlayer
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/dewplayer.swf?son=ruta_del_enlace/blues.mp3"
width="200" height="20">
<param name="movie"
value="ruta_del_enlace/dewplayer.swf?son=ruta_del_enlace/blues.mp3"
/></object>
DewPlayer multi
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/dewplayer-multi.swf?
son=ruta_del_enlace/blues.mp3" width="240" height="20">
<param name="movie"
value="ruta_del_enlace/dewplayer-multi.swf?
son=ruta_del_enlace/blues.mp3" />
<param name="bgcolor" value="#336699"></object>
EMFF MusicPlayer

5. emff lila
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/emff_lila.swf?src=ruta_del_enlace/blues.mp3"
width="200" height="80" />
<param name="movie"
value="ruta_del_enlace/emff_lila.swf?src=ruta_del_enlace/blues.mp3" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
emff old
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/emff_old.swf?src=ruta_del_enlace/blues.mp3"
width="110" height="34">
<param name="movie"
value="ruta_del_enlace/emff_old.swf?src=ruta_del_enlace/blues.mp3" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
emff standard
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/emff_standard.swf?src=ruta_del_enlace/blues.mp3"
width="110" height="34">
<param name="movie"
value="ruta_del_enlace/emff_standard.swf?
src=ruta_del_enlace/blues.mp3" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
emff wooden
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/emff_wooden.swf?src=ruta_del_enlace/blues.mp3"
width="110" height="80">
<param name="movie"
value="ruta_del_enlace/emff_wooden.swf?
src=ruta_del_enlace/blues.mp3" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
Miniplayer aouka
<object type="application/x-shockwave-flash"
data="../sonido/reproductores_flash/miniplayer_v12.swf" width="130"
height="20">
<param name="movie"
value="../sonido/reproductores_flash/miniplayer_v12.swf" />
<param name="FlashVars" value="mp3=../sonido/musica/blues.mp3
&outterborder=x555555

6. &autoload=true" />
</object>
PodPress
reproductor mp3 para WordPress
<object data="ruta_del_enlace/playerwpress.swf?
soundFile=ruta_del_enlace/blues.mp3" type="application/x-shockwave-
flash" height="24" width="290"><param
value="ruta_del_enlace/playerwpress.swf?
soundFile=ruta_del_enlace/blues.mp3" name="movie" />
<param value="high" name="quality" />
<param value="true" name="menu" />
<param value="transparent" name="wmode" /></object>
Mini MP3 Player (MMP3)
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/angular1.swf?src=ruta_del_enlace/blues.mp3"
height="20" width="20">
<param name="movie"
value="ruta_del_enlace/angular1.swf?src=ruta_del_enlace/blues.mp3" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/angular2.swf?src=ruta_del_enlace/blues.mp3"
height="20" width="20">
<param name="movie"
value="ruta_del_enlace/angular2.swf?src=ruta_del_enlace/blues.mp3" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/round1.swf?src=ruta_del_enlace/blues.mp3"
height="20" width="20">
<param name="movie"
value="ruta_del_enlace/round1.swf?src=ruta_del_enlace/blues.mp3" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
<object type="application/x-shockwave-flash"
data="ruta_del_enlace/round2.swf?src=ruta_del_enlace/blues.mp3"
height="20" width="20">
<param name="movie"
value="ruta_del_enlace/round2.swf?src=ruta_del_enlace/blues.mp3" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
</object>
HBS MP3 Player
<object data="ruta_del_enlace/hbs_mp3_player.swf" width="52"
height="20" type="application/x-shockwave-flash">
<param name="type" value="application/x-shockwave-flash" />
<param name="src" value="hbs_mp3_player.swf" />
<param name="data" value="hbs_mp3_player.swf" />
<param name="codebase" value="hbs_mp3_player.swf" />
<param name="FlashVars" value="TheSound=ruta_del_enlace/blues.mp3" />

7. <param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="ruta_del_enlace/hbs_mp3_player.swf" />
<param name="loop" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<a href="ruta_del_enlace/blues.mp3">Reproducir</a>
</object>
Enlaces
Son importantes no sólo para descargarlos sino también para ver, incluso en algunos de
los sitios hay una herramienta para facilitarlo, las opciones de personalización: colores,
tamaños, autoarranque, autoloop, invisibilidad,...
Reproductor mp3 de Neolao
Archivos individuales (hay muchas versiones): Neolao.com (en francés)
Para listas de audio: Player mp3 multi de Neolao (en francés)
XSPF Web Music Player
Página de desarrolo: XSPF Web Music Player (en inglés)
DewPlayer
Página de desarrollo: Dewplayer (en francés)
EMFF MusicPlayer
Página de desarrollo: EMFF (en inglés)
Miniplayer aouka
Página de desarrollo: aouka.org (en francés)
PodPress
Reproductor mp3 de wordpress: saute-mouton.org (en francés)
Personalizar autostart, loop, colores,...: 1pixelout.net (en ingles)
Mini MP3 Player (MMP3)
De joomlaos: MMP3 (en alemán, pero busca download y te lo podrás descargar)
HBS MP3 Player
De Sequane: HBS MP3 (en francés)
Si conoces otros reproductores o nuevos enlaces estaré encantado de incluirlos.