Kozeries en wiki

Tuto d'installation du player mp3 multi de Neolao

Ce tutoriel vise à guider l'installation et la configuration du lecteur mp3 multipistes de Neolao dans un blog Dotclear. Il est cependant tout à fait utilisable dans n'importe quel site web.

Mise en place

Préparation des fichiers

Sur votre disque dur, créez un répertoire nommé ma-radio. Placez-y :

  • un répertoire sons dans lequel vous placerez vos mp3 (conseils)

Envoi des fichiers

Envoyez le répertoire ma-radio et son contenu dans votre espace web. Si vous utilisez un blog Dotclear, le plus simple est de l'envoyer dans le répertoire public, cela vous permettra d'ajouter ou supprimer des morceaux directement par le gestionnaire de médias.

Affichage dans le blog

Dans un widget

Ajoutez un widget text dans le bandeau de votre choix et placez-y le code suivant : 

 
<div>
 
  <object type="application/x-shockwave-flash" data="http://www.chemin/vers/repertoire/ma-radio/player_mp3_multi.swf" height="220" width="180">
 
  <param name="movie" value="http://www.chemin/vers/repertoire/ma-radio/player_mp3_multi.swf" />
 
  <param name="wmode" value="transparent" />
 
  <param name="FlashVars" value="config=http://www.chemin/vers/repertoire/ma-radio/config_multi.txt" />
 
  <p>Lecteur mp3 en flash, merci <a href="http://resources.neolao.com/flash/components/player_mp3/templates/multi">Neolao</a></p>
 
  </object>
 
</div>

(en remplaçant évidemment http://www.chemin/vers/repertoire/ma-radio par le chemin qui correspond à votre installation !)

Dans un billet

(Par exemple pour une page connexe, mais ça marche aussi dans n'importe quel billet.)

Insérez un code identique à celui décrit pour l'insertion dans un widget. Si vous avez choisi la syntaxe wiki pour rédiger le billet, ajoutez ///html au-dessus de la première ligne et /// sous la dernière ligne : 

 
///html
 
<div>
 
  <object type="application/x-shockwave-flash" data="http://www.chemin/vers/repertoire/ma-radio/player_mp3_multi.swf" height="220" width="180">
 
  <param name="movie" value="http://www.chemin/vers/repertoire/ma-radio/player_mp3_multi.swf" />
 
  <param name="wmode" value="transparent" />
 
  <param name="FlashVars" value="config=http://www.chemin/vers/repertoire/ma-radio/config_multi.txt" />
 
  <p>Lecteur mp3 en flash, merci <a href="http://resources.neolao.com/flash/components/player_mp3/templates/multi">Neolao</a></p>
 
  </object>
 
</div>
 
///

Ouverture en pop-up

D'abord, réfléchissez bien à votre décision. L'ouverture en pop-up est-elle vraiment nécessaire ? Ne va-t-elle pas gêner vos visiteurs plus qu'autre chose ? Envisagez aussi une solution médiane : offrir le lecteur directement dans la page et proposer dessous ou dessus un lien pour ceux qui préfèrent l'ouvrir en pop-up.

Pour faire ça proprement il va falloir bosser un peu.

Tout d'abord, vous devrez mettre dans votre espace web 2) un fichier contenant les instructions en javascript. Dans notre exemple, on appelera ce fichier popup.js (détails et explications du fichier).

Dans le répertoire ma-radio ajoutez un fichier index.html (détails du fichier)

Dans la partie comprise entre les balises <head> et </head> de la page où vous poserez le lien vers la popup3) ajoutez la ligne suivante : 

 
<script type="text/javascript" src="http://www.chemin/vers/fichier/popup.js"></script>

Puis, dans la page/ le menu / le billet, bref, là où vous le voulez, placez où vous le souhaitez le lien vers la radio sur le modèle de celui-ci : 

 
<p><a href="http://www.chemin/vers/fichier/index.html" class="popup">Ouvrir le lecteur dans un pop-up.</a></p>

Note : le script d'ouverture en pop-up se déclenchera au clic sur tout lien de la page portant la class popup. Vous pouvez donc vous en servir pour d'autres liens. Toutefois, ces machins-là sont très agaçants, donc limitez-vous au strict nécessaire et tenez compte aussi du fait que comme le script fixe une taille de largeur et hauteur au popup, ça ne pourra pas servir à tout.

Remerciements

L'ensemble de cette documentation s'appuie très largement sur celle offerte sur le site de Neolao et à laquelle je vous invite à vous référer, ainsi qu'à son forum, pour poursuivre vos personnalisations.

1) Pour télécharger ce fichier, faire un clic droit sur le lien (ou un ctrl_clic sous Macintosh), puis Enregistrer la cible du lien sous…
2) Je vous laisse choisir l'endroit le plus approprié en fonction de votre installation. Sous un blog Dotclear 2, dans un répertoire js lui-même placé dans le répertoire public n'est pas une mauvaise idée ; une autre option possible est de le placer dans le répertoire ma-radio.
3) C'est-à-dire pour les utilisateurs de Dotclear 1 dans template.php ; pour les utilisateurs de Dotclear 2 dans _head.html.

Afficher le texte source - Anciennes révisions - Derniers changements -