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.
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 Web Creativo
Puede reproducir listas del propio sitio y es muy personalizable
+ info (en Inglés)
<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><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><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><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><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&
sliderovercolor=666666&textcolor=0&
playlistcolor=999999¤tmp3color=996633&
scrollbarcolor=999999&scrollbarovercolor=0" />
</object>XSPF Web Music Player
Puede reproducir listas del propio sitio o externas
+ info (en inglés)
song_url=../sonido/musica/blues.mp3
&player_title=Bush_War_Blues
&song_title=Bush_War_Blues">
value="../sonido/reproductores_flash/xspf_player_slim.swf?
song_url=../sonido/musica/blues.mp3" />
(Music Player Slim)
song_url=../sonido/musica/blues.mp3
&player_title=Bush_War_Blues
&song_title=Bush_War_Blues">
value="../sonido/reproductores_flash/musicplayer.swf?
song_url=../sonido/musica/blues.mp3" />
data="../sonido/reproductores_flash/musicplayer.swf?&b_bgcolor=ffffff&b_fgcolor=666666&b_colors=ff0000,00ff00,0000ff,000000&song_url=../sonido/musica/blues.mp3"
width="17" height="17">
value="../sonido/reproductores_flash/musicplayer.swf?&b_bgcolor=ffffff&b_fgcolor=666666&b_colors=ff0000,00ff00,0000ff,000000&song_url=../sonido/musica/blues.mp3" />
data="../sonido/reproductores_flash/musicplayer_f6.swf?&b_bgcolor=dedede&b_fgcolor=666666&b_colors=ff0000,00ff00,0000ff,000000&song_url=../sonido/musica/blues.mp3"
width="17" height="17">
value="../sonido/reproductores_flash/musicplayer_f6.swf?&b_bgcolor=dedede&b_fgcolor=666666&b_colors=ff0000,00ff00,0000ff,000000&song_url=../sonido/musica/blues.mp3" />
(Music Player Button)
song_url=../sonido/musica/blues.mp3
&player_title=Bush_War_Blues
&song_title=Bush_War_Blues">
value="../sonido/reproductores_flash/xspf_player.swf?
song_url=../sonido/musica/blues.mp3" />
(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
&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>
data="../sonido/reproductores_flash/dewplayer-mini.swf?son=../sonido/musica/blues.mp3"
width="150" height="20">
(DewPlayer mini)
(DewPlayer)
data="../sonido/reproductores_flash/dewplayer-multi.swf?son=../sonido/musica/blues.mp3" width="240" height="20">
(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 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
&autoload=true" />
</object>
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)
data="../sonido/reproductores_flash/angular1.swf?src=../sonido/musica/blues.mp3"
height="20" width="20">
data="../sonido/reproductores_flash/angular2.swf?src=../sonido/musica/blues.mp3"
height="20" width="20">
data="../sonido/reproductores_flash/round1.swf?src=../sonido/musica/blues.mp3"
height="20" width="20">
data="../sonido/reproductores_flash/round2.swf?src=../sonido/musica/blues.mp3"
height="20" width="20">
<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" />
<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.
data='plugins/dewplayer/dewplayer.swf?son=../sonido/musica/blues.mp3' width='200' height='20'>
Archivos para descargar:
 Reproductores flash para mp3 |