Command disabled: register

Kozeries en wiki

Compléments pour le lecteur mp3 multi de neolao.

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 :

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

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

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

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. 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 dans l'explication de mise en place

Fichier d'exemple

Voici un exemple à peine modifié de celui 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 :

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

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 :

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

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 donné en exemple en remplaçant la ligne <param name=“FlashVars” (etc) > par :

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

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 :

  1. indiquer dans la configuration le fichier playlist.txt à utiliser
  1. 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 :

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

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

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

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 :

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

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

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

Fichier popup.js

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

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')
 
}

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 à Nick Dunn pour son script.

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.

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