Edit : Comme vous avez pu vous en apercevoir, le service Imeem n’existe plus… ou du moins il a été acheté par Myspace. Le tutoriel ci-dessous (à moins que MySpace n’ait pas trop modifié le code) est donc dépassé.

Imeem.com est un site de réseau social permettant le partage de musiques, vidéos, photos et blogs. Bien que leurs playlists ne soient pas exempts de publicité, je fais appel à ce service et notamment aux musiques mises en lignes par les internautes, pour mettre à l’écoute des OST dans mes articles sur les animes. L’apparence de ces applets flash est personnalisable à souhait et permet ainsi une intégration graphique remarquable.

Quand en cliquant sur « Share » puis « Link to or embed this song », on accède à un panel assez réduit de looks proposés par imeem pour votre lecteur. En fait, on peut facilement paramétrer les différentes couleurs en changeant un peu le code proposé.

Cliquez sur une personnalisation (celle qui convient s’il y en a une, ou dans le cas échéant, une au hasard) avant de copier le code qui vous est fourni dans un bloc notes. Il est important de cliquer sur un skin, sinon vous ne serez pas en mesure de personnaliser votre lecteur.

Normalement, vous obtenez un code de ce genre :

<div style= »width:300px; margin-bottom: 20px;« ><object width= »300 » height= »340« ><param name= »movie » value= »http://media.imeem.com/pl/flNFJh_P4e/aus=false/ » /> <param name= »wmode » value= »transparent » /> <param name= »FlashVars » value= »backColor=D0DFC3&amp;primaryColor=699C33&amp;secondaryColor=429933&amp;linkColor=004F03 » /><embed src= »http://media.imeem.com/pl/flNFJh_P4e/aus=false/ » type= »application/x-shockwave-flash » width= »300 » height= »340 » wmode= »transparent »></embed><param name= »flashvars » value= »backColor=D0DFC3&amp;primaryColor=699C33&amp;secondaryColor=429933&amp;linkColor=004F03 » /></object><div style= »background-color:#E6E6E6;padding:1px; »><div style= »float:left;padding:4px 4px 0 0; »><a href= »http://www.imeem.com/ »><img src= »http://www.imeem.com/embedsearch/E6E6E6/ » border= »0″  /></a></div><form method= »post » action= »http://www.imeem.com/embedsearch/ » style= »margin:0;padding:0; »><input type= »text » name= »EmbedSearchBox » /><input type= »submit » value= »Search » style= »font-size:12px; » /><div style= »padding-top:3px; »><a href= »http://www.imeem.com/ads/banneradclick.ashx?ep=0&ek=flNFJh_P4e » rel= »nofollow »><img src= »http://www.imeem.com/ads/bannerad/152/10/ » border= »0″ /></a><a href= »http://www.imeem.com/ads/banneradclick.ashx?ep=1&ek=flNFJh_P4e » rel= »nofollow »><img src= »http://www.imeem.com/ads/bannerad/153/10/ » border= »0″ /></a><a href= »http://www.imeem.com/ads/banneradclick.ashx?ep=2&ek=flNFJh_P4e » rel= »nofollow »><img src= »http://www.imeem.com/ads/bannerad/154/10/ » border= »0″ /></a><a href= »http://www.imeem.com/ads/banneradclick.ashx?ep=3&ek=flNFJh_P4e » rel= »nofollow » ><img src= »http://www.imeem.com/ads/bannerad/155/10/flNFJh_P4e/ » border= »0″ /></a></div></form></div></div><br/><a href= »http://www.imeem.com/mimko/playlist/fGE1HkeM/vampire_knight_ost_2_music_playlist/ »>Vampire Knight OST 2</a>

Ce qui est en gris correspond à ce qu’on peut retirer (de la publicité accessoire). Attention ! Il ne faut pas effacer les balises de fermeture </div> que j’ai laissées en noir ! En bleu, ce sont les dimensions. « width » correspond à la largeur et « height » à la hauteur tous en pixels. En rose, c’est ce que moi j’ajoute pour insérer une petite marge en dessous pour pas que le texte soit collé à l’applet. En rouge, c’est l’adresse de votre playlist. Venons en au coloriage. A moins que vous connaissez par coeur les couleurs que vous souhaitez en hexadécimal, vous aurez besoin de certains outils (un site qui vous aide à trouver les codes hexadécimaux de vos couleurs, ou Colorzilla une extension pour le navigateur Firefox). En vert, c’est la couleur de fond (ici c’est presque vert très clair-blanc). En bleu, c’est la couleur principale (ici vert pas trop foncé). En violet, c’est la couleur secondaire (ici vert). En beige, il s’agit des liens (ici vert très foncé). Faites plusieurs tests si vous n’êtes pas sûr des couleurs choisies. Pour les lecteurs d’une seule musique, la manipulation est la même.