Pixelated World │ Html & stuff

¡Oh dios! Necesito, no mejor dicho quiero saber ¿como hiciste para que el reproductor de música este así? Me encanto por completo, siempre pienso eso de tus codes.
So... me sali del tema necesito que contestes.  

Microbio:

Esta página tiene un generador de mp3s: [Tienes que estar registrado y conectado para ver este vínculo]. Yo ya no la uso, si no que guardé el code y lo edito a mano.

Una vez tienes tu código.

Código:

<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="#ff70ff" />
    <param name="FlashVars" value="mp3=http://k007.kiwi6.com/hotlink/st3rryr2p1/I_dont_feel_it_anymore.mp3&bgcolor=ff70ff&loadingcolor=ffff8f&buttoncolor=57ffff&slidercolor=85b8ff" />
</object>

1. El truco es colocarle un color de fondo igual o parecido al color de fondo del elemento en donde lo quieres colocar y aumentar el tamaño del reproductor para que el botón sea grande.



2. El recuadro tiene que tener la propiedad de esconder todo lo que sobrepase su tamaño. (Overflow: hidden;)

Código:

<div style="height: 50px; width: 50px; background-color: #fafafa; border: 5px #1a1a1a solid; outline: 2px solid #cc99ff; overflow: hidden;"></div>

3. Lo que queda es colocar el reproductor dentro de tu recuadro y listo.

Dependiendo del tamaño a veces hay que colocar el reproductor dentro de otro elemento invisible para controlar la posición. Pero en este caso no fue necesario.

Código:

<div style="height: 50px; width: 50px; background-color: #fafafa; border: 5px #1a1a1a solid; outline: 2px solid #cc99ff; overflow: hidden;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="400" height="50">
  <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  <param name="bgcolor" value="#fafafa" />
  <param name="FlashVars" value="mp3=http://k007.kiwi6.com/hotlink/st3rryr2p1/I_dont_feel_it_anymore.mp3&bgcolor=ff70ff&loadingcolor=ffff8f&buttoncolor=cc99ff&slidercolor=85b8ff" />
</object></div>

Por ejemplo: En este caso mi reproductor es pequeño y queda desajustado en el cuadro. Y se ve una parte de la barra de reproducción.

Le voy a agregar un elemento individual con el fondo transparente para controlar la posición agregándole margenes:

Código:

<div style="height: 50px; width: 30px; background-color: transparent; margin-left: 2px; margin-top: 6px; overflow: hidden;"></div>

Código:

<center><div style="height: 50px; width: 50px; background-color: #fafafa; border: 5px #1a1a1a solid; outline: 2px solid #ffcc66; overflow: hidden;"><div style="height: 50px; width: 30px; background-color: transparent; margin-left: 2px; margin-top: 6px; overflow: hidden;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="40">
  <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  <param name="bgcolor" value="#fafafa" />
  <param name="FlashVars" value="mp3=http://k007.kiwi6.com/hotlink/st3rryr2p1/I_dont_feel_it_anymore.mp3&bgcolor=ff70ff&loadingcolor=ffff8f&buttoncolor=ffcc66&slidercolor=85b8ff" />
</object></div></div></center>

Voy a crear una petición oficial para estar en el equipo de tutoriales y ustedes la firman. ah re. ok no.