22 mai 2008
Lecteur mp3 de Neolao
Etiquettes: mp3
Mode: normal ou avancé
Ce qui suit est destiné à un public plutôt averti, c'est-à-dire ayant déjà des bases en html / css.
Neolao est un développeur qui met gentiment à disposition quelques unes de ses créations sous licence libre.
Parmi elles, on trouve un lecteur mp3 en flash extrêmement intéressant.
L'utilisation de ce lecteur implique qu'on dispose d'un hébergement pour le stocker ainsi que les fichiers de configuration et les mp3. Il est d'ailleurs important que le fichier du lecteur .swf et les fichiers de configuration soient hébergés au même endroit, sinon cela risque de ne pas fonctionner. Si vous n'avez pas d'hébergement, vous pouvez lire ceci.
Il en existe plusieurs versions, mais seules les maxi et multi continuent d'évoluer (je ne parlerais pas de la version Javascript que je n'utilise pas).
La version maxi est un lecteur pour un morceau, la version multi gère une playlist.
Le grand avantage de ce lecteur est la possibilité d'en personnaliser l'apparence de façon plus ou moins poussée, par diverses méthodes. Cela permet de l'intégrer de la meilleure façon possible au design d'un site.
Il y a plusieurs façons de le configurer:
- directement dans le code html (je ne vous le conseille pas, lourd à gérer)
- par un fichier externe au format xml
- par un fichier externe au format txt
Personnellement j'ai choisi le fichier .txt très simple d'utilisation et qui ne nécessite aucune connaissance d'un langage particulier.
Dans ce fichier on défini une foule de paramètres concernant le comportement du lecteur et l'aspect.
Je vous laisse vous référer à la documentation sur le site du lecteur, que ce soit pour le maxi ou le multi.
Vous trouverez également des information utiles sur ce site.
Je vais m'attarder sur la personnalisation de l'apparence.
On peut simplement modifier les couleurs.
On peut appliquer une image au format jpg, un skin, qui habillera le lecteur. Cette image sera utilisée en lieu et place des couleurs de fond. La taille de cette image n'étant pas variable, il ne sera pas possible de modifier la taille du lecteur sans modifier l'image.
On peut placer le lecteur sur une image de fond.
Ci-dessous, figurent 4 exemples avec le lecteur multi, illustrant 4 possibilités, avec pour chacune des liens pour voir le code html et Le fichier de configuration correspondant.
1) Le lecteur avec configuration des couleurs
Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
2) Le lecteur avec un fichier image pour skin:
Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
L'image du skin (note: l'image doit avoir la même taille que le lecteur):
3) Le même lecteur qu'en 1), inclus dans un bloc ayant une image de fond et placé par des marges
Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
4) Le lecteur placé dans un bloc ayant une image de fond avec transparence, avec un fichier image concordant pour skin
Voir le code html (dans une nouvelle fenêtre)
fichier de configuration texte correspondant (dans une nouvelle fenêtre)
L'image du skin:
Je sais, les images sont moches, elles ont été faites vite fait pour l'exemple ;P
Un petit exemple d'intégration sur mon blog, où j'ai juste utilisé la configuration des couleurs (exemple 1).
12 mai 2008
Lecteur mp3 dans une nouvelle fenêtre
Etiquettes: mp3, normal ou avancé
Mode: normal ou avancé
Nota: ce tuto a pour objet de créer un lien proposant d'ouvrir un lecteur mp3 dans une nouvelle fenêtre, et non d'ouvrir automatiquement ce lecteur à l'ouverture du blog.
Beaucoup sont ceux qui ajoutent de la musique sur leur blog.
Une question qui revient souvent est comment faire pour que la musique ne s'interrompt pas lors de la navigation sur le blog
Une solution consiste à ouvrir le lecteur dans une autre fenêtre. Cela peut être fait de façon automatique par un pop-up mais cela demande un script javascript et surtout ne laisse pas le choix au visiteur. De plus, nombreux sont les internautes qui utilisent un bloqueur de pop-up.
Selon moi, une bonne solution est de proposer un lien "ouvrir le lecteur dans une nouvelle fenêtre". Cela laisse sa liberté de choix au visiteur et n'est pas entravé par des bloqueurs de fenêtre intempestive.
De plus, cela peut être mis en place très facilement, uniquement avec du html.
Voici comment nous allons procéder, avec par exemple une playlist Deezer (mais cela fonctionnera pour n'importe quel code de lecteur).
1) Tout d'abord, on récupère le code.
<div style="width:180px;height:236px;">
<object width="180" height="220">
<param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2005670〈=FR&colorBackground=0x525252&colorButtons=0xDDDDDD&textColor1=0xFFFFFF&textColor2=0xCCCCCC&autoplay=0&autoShuffle=0&id=671635"></param><embed src="http://www.deezer.com/embedded/widget.swf?path=2005670〈=FR&colorBackground=0x525252&colorButtons=0xDDDDDD&textColor1=0xFFFFFF&textColor2=0xCCCCCC&autoplay=0&autoShuffle=0&id=671635" type="application/x-shockwave-flash" width="180" height="220">
</embed>
</object>
<a href="http://www.deezer.com" style="border:none;margin:0;padding:0;"><img src="http://www.deezer.com/embedded/footer.jpg" alt="free music" title="free music" border="0" style="border:none;margin:0;padding:0;" /></a>
</div>
2) On va copier ce code dans un fichier texte, avec le bloc-note, et on va enregistrer ce fichier avec une extension .html.
Par exemple mp3_deezer.html (note: avec le bloc-note de windows, le fichier s'enregistrera automatiquement avec l'extension .txt, il faudra le renommer ensuite. Avec tout autre bloc-note digne de ce nom, vous pourrez l'enregistrer directement avec l'extension .html).
3) Ensuite, on va envoyer ce fichier mp3_deezer.html sur les serveurs de Canalblog, en l'insérant dans un message, par le bouton 
. Dans la rédaction du message, on va passer en html par le bouton 
pour voir le code et récupérer l'adresse du fichier, on aura quelque chose qui ressemble à ça:
<p><a href="http://storage.canalblog.com/09/23/445046/25482675.html">mp3_deezer</a></p>
4) Dernière étape, l'insertion dans le blog.
En mode avancé, quelque soit l'endroit où on veut insérer son lecteur, il suffit d'y coller le code du lecteur et le lien vers la page externe en ajoutant un attribut le forçant à s'ouvrir dans une nouvelle fenêtre:
<p><a target="_blank" href="http://storage.canalblog.com/09/23/445046/25482675.html">ouvrir le lecteur dans une nouvelle fenêtre</a></p>
Voilà ce que ça donnera:
ouvrir le lecteur dans une nouvelle fenêtre
En mode normal, le plus simple est de faire l'opération ci-dessus dans un message qu'on maintiendra en début de page d'accueil en jouant sur la date.
Si vous tenez à mettre votre lecteur dans une colonne, alors il vous faudra suivre le tuto d'Alerion pour mettre un widget dans la colonne de gauche et mettre le lien vers la nouvelle fenêtre dans les liens d'amis.
On mettra ce lien dans une catégorie nommée de sorte qu'elle soit en premier (par exemple "[espace]Lecteur mp3"). Dans le champ "adresse internet (URL)" il faudra entrer:
http://storage.canalblog.com/09/23/445046/25482675.html" target="_blank
à modifier bien sûr en fonction de l'adresse récupérée à l'étape 3).
On peut aussi simplement laisser ce lien dans le message d'accueil qui est nécessaire pour appliquer le tuto d'Alerion.
Si on change sa playlist, il faut penser à changer tous les codes et remplacer le fichier mp3_deezer.html. Il faudra à nouveau envoyer ce fichier sur les serveurs de Canalblog et modifier les liens avec la nouvelle adresse.
On peut aussi utiliser une solution autre d'hébergement gratuit pour ce fichier html, nous évitant de modifier l'adresse du lien.
Un autre exemple sur mon autre blog.
