====== Compléments pour le lecteur mp3 multi de neolao. ======



La page principale d'explications se trouve [[:geekeries:kastafiore|par ici]].



  * [[#Conseils de nommage des fichiers mp3]]

  * [[#Configurer avec un fichier .txt]]

  * [[#Configurer avec un fichier .xml]]

  * [[#Créer un fichier séparé pour la playlist]]

  * [[#Exemple de fichier html pour ouverture en pop-up]] et [[#Fichier popup.js]] assorti




===== Conseils de nommage des fichiers mp3 =====



Vous aurez toute latitude pour donner un joli titre à votre morceau dans la playlist. Ici il ne s'agit que de nommer les fichiers. Prenez donc soin de respecter quelques règles qui vous assureront une lecture sans souci quel que soit le navigateur. Les noms des fichiers mp3 ne doivent comprendre ni espaces, ni lettres accentuées ni aucun caractère autre que les vingt-six lettres de l'alphabet et des chiffres.





===== Configurer avec un fichier .txt =====



Ce fichier a deux fonctions : indiquer où le lecteur doit trouver les fichiers et les titres choisis pour les pistes ; déterminer l'aspect et le comportement du lecteur (paramétrages).



=== Liste des fichiers et titres ===



On inscrit d'abord les chemins des fichiers séparés par des ''|'' 

Attention, ce chemin doit comprendre l'URL **complète** de chaque fichier :



<code>

mp3=http://www.chemin/vers/repertoire/ma-radio/sons/piste1.mp3|http://www.chemin/vers/repertoire/ma-radio/sons/piste2.mp3|http://www.chemin/vers/repertoire/ma-radio/sons/piste3.mp3

</code>



Puis sur la ligne suivante on inscrit les titres des pistes, dans le même ordre que les fichiers :



<code>

title=Le titre 1|Titre du morceau 2|Titre 3

</code>



Note : si l'un (ou plusieurs) des titres est très long, un défilement se déclenchera pour pouvoir le lire en entier.



=== Paramétrages ===



La liste complète des paramétrages possibles se trouve dans le tableau récapitulatif de la documentation du lecteur. [[http://resources.neolao.com/flash/components/player_mp3/templates/multi|Je vous laisse vous y rendre]]. On peut y régler la hauteur et la largeur du lecteur, les couleurs utilisées, on peut également déterminer une image de fond, etc.



J'insisterai particulièrement ici sur l'obligation d'indiquer une hauteur (height) et une largeur (width) identiques à celles que vous aurez déterminées dans le code d'insertion donné en exemple [[.#affichage-dans-le-blog|dans l'explication de mise en place]]



=== Fichier d'exemple ===



Voici un exemple à peine modifié de celui [[http://resources.neolao.com/download/flash/components/config_multi.txt|donné en exemple par Neolao]]. J'ai juste modifié les chemins de la première ligne pour que vous n'oubliez pas que l'inscrire vous aussi en entier :



<code>

mp3=http://www.chemin/vers/repertoire/ma-radio/sons/piste1.mp3|http://www.chemin/vers/repertoire/ma-radio/sons/piste2.mp3|http://www.chemin/vers/repertoire/ma-radio/sons/piste3.mp3

title=Le titre 1|Titre du morceau 2|Titre 3

bgcolor1=9293a9

bgcolor2=808094

buttoncolor=dddddd

buttonovercolor=f9bf37

slidercolor1=dddddd

slidercolor2=cccccc

sliderovercolor=f9bf37

textcolor=dddddd

playlistcolor=999999

currentmp3color=f9bf37

scrollbarcolor=cccccc

scrollbarovercolor=f9bf37

showvolume=1

</code>



Note : enregistrez ce fichier avec un __encodage en UTF-8__ (pour que le

 accents soient respectés) et nommez-le **config_multi.txt**



===== Configurer avec un fichier .xml =====



C'est exactement le même principe que pour la configuration avec un fichier .txt mais en utilisant la syntaxe xml. Pour tout vous dire, je ne sais pas quel doit être le critère de choix entre les deux, si quelqu'un a des lumières là-dessus, qu'il clique sur le bouton "Editer cette page" en haut à gauche et qu'il ajoute sa pierre ici :)



Voici donc la même configuration que ci-dessus à l'aide d'un fichier .xml :



<code xml>

<config>

<param name="mp3" value="http://www.chemin/vers/repertoire/ma-radio/sons/piste1.mp3|http://www.chemin/vers/repertoire/ma-radio/sons/piste2.mp3|http://www.chemin/vers/repertoire/ma-radio/sons/piste3.mp3"/>

<param name="title" value="Le titre 1|Titre du morceau 2|Titre 3"/>

<param name="bgcolor1" value="9293a9"/>

<param name="bgcolor2" value="808094"/>

<param name="buttoncolor" value="dddddd"/>

<param name="buttonovercolor" value="f9bf37"/>

<param name="slidercolor1" value="dddddd"/>

<param name="slidercolor2" value="cccccc"/>

<param name="sliderovercolor" value="f9bf37"/>

<param name="textcolor" value="dddddd"/>

<param name="playlistcolor" value="999999"/>

<param name="currentmp3color" value="f9bf37"/>

<param name="scrollbarcolor" value="cccccc"/>

<param name="scrollbarovercolor" value="f9bf37"/>

<param name="showvolume" value="1"/>

</config>

</code>



Note : enregistrez ce fichier avec un __encodage en UTF-8__ (pour que les accents soient respectés) et nommez-le configxml_multi.xml



Si vous choisissez ce fichier pour vos paramétrages, il vous faudra modifier le code d'insertion [[.#affichage-dans-le-blog|donné en exemple]] en remplaçant la ligne ''<param name="FlashVars" (etc) >'' par :



<code html><param name="FlashVars" value="configxml=http://www.chemin/vers/repertoire/ma-radio/configxml_multi.xml" /></code>



===== Créer un fichier séparé pour la playlist =====



Vous avez la possibilité de lister les fichiers mp3 accompagnés des titres des pistes dans un fichier séparé plutôt qu'en modifiant à chaque fois le fichier de configuration. C'est à mon sens une très bonne solution, d'une part parce qu'on y voit plus clair, d'autre part – atout non négligeable – on risque moins de faire des bêtises et de modifier d'autres paramètres sans le vouloir ;)



La mise en place est toute simple et se réalise en deux étapes :

  - indiquer dans la configuration le fichier **playlist.txt** à utiliser

  - créer ledit fichier et le placer dans le répertoire **ma-radio**



==== Modifier le fichier de configuration ====



Dans le fichier de configuration, on remplace les deux premières lignes (celle des urls des fichiers et celle des titres des pistes) par celle-ci :



Si vous utilisez config_multi.txt, remplacez les deux premières lignes de l'exemple par :

<code>playlist=http://www.chemin/vers/repertoire/ma-radio/playlist.txt</code>



Si vous utilisez configxml_multi.xml, remplacez les deux premières lignes de l'exemple par :

<code html><param name="playlist" value="http://www.chemin/vers/repertoire/ma-radio/playlist.txt"/></code>







==== Créer le fichier playlist.txt ====



Créez un fichier texte nommé **playlist.txt** (__encodé en UTF-8__ pour préserver les accents) et indiquez-y le chemin complet de chaque piste suivi d'un ''|'' puis du titre de la piste :



<code>

http://www.chemin/vers/repertoire/ma-radio/sons/piste1.mp3|Titre 1

http://www.chemin/vers/repertoire/ma-radio/sons/piste2.mp3|Titre 2

http://www.chemin/vers/repertoire/ma-radio/sons/piste3.mp3|Titre 3

</code>



(Note : une ligne par morceau.)



Placez ce fichier dans votre répertoire **ma-radio**. C'est prêt !



Le fichier **index.html** pour l'affichage en pop-up contient ce code :

<code html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

  <head>

    <title>Ma Radio</title>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

  </head>

  <body>

	

	<div id="radio">

	<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>

	</body>

</html>

</code>





==== Fichier popup.js ====



Créez un fichier nommé **popup.js** dans lequel vous placerez ce contenu :



<code javascript>

window.onload = function() {

	// check to see that the browser supports the getElementsByTagName method

	// if not, exit the loop 

	if (!document.getElementsByTagName) {

		return false; 

	} 

	// create an array of objects of each link in the document 

	var popuplinks = document.getElementsByTagName("a");

	// loop through each of these links (anchor tags) 	

	for (var i=0; i < popuplinks.length; i++) {	

		// if the link has a class of "popup"...	

		if (popuplinks[i].getAttribute("class") == "popup") {	

			// add an onclick event on the fly to pass the href attribute	

			// of the link to our second function, openPopUp 	

			popuplinks[i].onclick = function() {	

			openPopUp(this.getAttribute("href"));	

			return false; 	

			} 	

		}

	} 

} 



function openPopUp(linkURL) {

window.open(linkURL,'popup','width=300,height=360,resizable=yes')

}

</code>



Note : ce script permet également que la radio s'affiche dans la fenêtre principale du navigateur si votre visiteur a désactivé javascript.



Dans la dernière ligne, les valeurs de height et de width sont à harmoniser avec celles que vous avez choisies dans le fichier config_multi.txt décrit ci-dessus. 



Merci à [[http://www.openhosting.co.uk/articles/webdev/5918/|Nick Dunn]] pour son script.



===== Remerciements =====



L'ensemble de cette documentation s'appuie très largement sur celle offerte [[http://resources.neolao.com/flash/components/player_mp3/templates/multi|sur le site de Neolao]] et à laquelle je vous invite à vous référer, ainsi qu'à son [[http://forum.neolao.com/viewforum.php?id=10|forum]], pour poursuivre vos personnalisations.