FreeAmp : l'autre player MP3
Lorsqu'on parle de MP3 ou de fichiers Ogg sous Linux, la première application qui vient à l'esprit est sans aucun doute XMMS. Mais il existe un autre player tout aussi puissant et personnalisable : il s'agit de FreeAmp. Si, comme moi, votre dernier lancement de cette application date d'il y a plusieurs mois (voire une année), vous risquez d'être surpris.
En effet, le FreeAmp tel qu'on se l'imagine se limite souvent à une simple fenêtre GTK décorée de quelques boutons, le tout n'étant pas très attrayant. Eh bien, tout cela a changé et FreeAmp n'a rien à envier à XMMS, bien au contraire. Celui-ci supporte en effet de nombreux plugins de visualisation, la gestion de thème avancée, le support du format OggVorbis, une playlist structurée et très complète, bref, tout ce qu'on est en droit d'attendre d'un player moderne et fun.
Le domaine dans lequel, à mon goût, FreeAmp est largement en avance est celui des thèmes. Ceux-ci sont beaucoup plus faciles à créer que pour XMMS, qui semble attaché à conserver une compatibilité avec les skins de WinAmp. Ainsi, contrairement à XMMS, les thèmes pour FreeAmp bénéficient d'une souplesse bien plus grande et d'un format de description plus moderne : XML.
Les thèmes pour FreeAmp sont utilisables à partir de la version 2.0 et, tout comme pour l'autre player très populaire, ils fonctionneront aussi bien sous Linux que sous Windows. Les fichiers contenant les thèmes possèdent un suffixe .fat. Il s'agit en réalité d'archives tar non compressées.
Un thème est composé au minimum de quatre fichiers :
background.bmp est l'image de fond au format BMP ; celle-ci peut avoir une taille arbitraire puisque le fichier de définition au format XML devra contenir les coordonnées de tous les éléments graphiques.
buttons.bmp est le fichier au format BMP qui regroupera l'ensemble des éléments graphiques autres que l'image de fond. Il s'agit principalement des éléments qui changent durant la manipulation du logiciel comme les boutons de contrôle ou les glissières de volume.
theme.xml est le fichier de définition principal. Comme son suffixe l'indique, il est au format XMS et contient les informations sur l'ensemble du thème de manière structurée.
title.txt est un simple fichier ASCII contenant une description sommaire du thème. Il est d'ailleurs recommandé dans la documentation de FreeAmp de ne placer rien d'autre dans ce fichier. Des données comme le nom de l'auteur, les remerciements et d'éventuels liens sur le Web sont à placer dans le fichier XML de définition globale. De plus, ce fichier ne doit contenir qu'une seule et unique ligne.
Concernant l'image de fond, il est possible de spécifier une couleur qui sera transparente une fois le thème appliqué. Si vous avez dans l'idée de créer un thème possédant un tel fond, il est recommandé de faire très attention à la couleur que vous choisirez. Il ne faut pas, en effet, que celle-ci soit utilisée pour des éléments visibles du thème.
Le fichier de description de thème
Ce fichier est au format XML et ne supporte pour le moment qu'un encodage ISO8859/1. Si vous ne connaissez pas XML, sachez qu'il s'agit d'un langage de description ressemblant fortement au HTML. Bien sûr, les fonctionnalités d'XML sont bien plus grandes et sa structuration plus poussée. Si vous avez déjà travaillé ou simplement manipulé des fichiers HTML, vous devez être en mesure de comprendre relativement rapidement le fonctionnement de structures XML.
La première étape dans le fichier de thèmes consiste à préciser les noms et dimensions des fichiers images que nous allons utiliser :
<Bitmap Name="Background" File="background.bmp" TransColor="#FF0000"/>
<Bitmap Name="Buttons" File="buttons.bmp" TransColor="#FF0000"/>
Ces deux lignes définissent les deux fichiers indispensables pour la construction d'un thème. La notation utilisée est un raccourci de :
<Bitmap Name="Background" File="background.bmp" TransColor="#FF0000"></Bitmap>
Notez cependant que la plupart des thèmes que vous risquez d'étudier utilisent le raccourci. Autre fait important, le XML, contrairement au HTML, attache une importance à la casse des caractères. Bitmap est différent de BitMap ou encore de bitmap. Prenez garde à bien respecter la casse dans le nom des tags XML.
Ces deux lignes permettent non seulement de préciser des noms de fichier pour les éléments graphiques, mais c'est également ici que vous préciserez la couleur qui devra être considérée comme transparente lors de l'application du thème. Ici, nous avons #FF0000, qui correspond à du rouge 100% (notation #RRVVBB).
Le second paramètre concerne la police de caractères à utiliser pour le thème :
<Font Name="San Serif" Face="Arial,Helvetica" File="verdana.ttf"/>
Vous ne pouvez qu'utiliser des polices au format TrueType. FreeAmp utilise la bibliothèque FreeType et, de ce fait, vos thèmes pourront être utilisés aussi bien sous Linux que sous Windows. Cette ligne permet de préciser plusieurs choses :
- Name= donne un nom arbitraire à la police. Ce nom sera utilisé plus loin dans la description du thème
- Face= permet de spécifier des noms de polices. Ici, nous avons deux noms (Arial et Helvetica) ; ces polices seront utilisées l'une après l'autre en cas d'échec. Ainsi, si Arial n'est pas disponible ou introuvable sur le système, FreeAmp tentera de charger Helvetica.
- File= est facultatif, il permet de préciser un fichier de police à charger avant de tenter la recherche des noms de police.
Si, avec tous ces paramètres, FreeAmp n'arrive pas à charger la police souhaitée, la police par défaut sera utilisée.
Nous allons ensuite préciser les informations relatives à notre thème :
<ThemeInfo Name="monmien Theme" Author="prenom nom"
EMail="user@email.org" WebPage="http://www.monsite.org"
Misc="Simple theme pour voir..."/>
Ce tag utilise plusieurs champs vous permettant de préciser le nom de votre thème, votre nom et prénom, votre adresse email, votre page Web et un petit descriptif sommaire de votre réalisation. Vous n'êtes pas obligé de spécifier tous les champs pour votre ThemeInfo.
Entrons maintenant dans le vif du sujet avec le début de la description. L'élément graphique principal de FreeAmp est la fenêtre principale appelée MainWindow (ce nom est parfaitement arbitraire, vous pouvez appeler la fenêtre "titi" ou "toto" si cela vous chante, mais MainWindow est une convention très utile). Nous allons donc avoir un tag comprenant la description de tous les éléments de la MainWindow :
<Window Name="MainWindow">
Tout ce qui sera dans la portée de ce tag (jusqu'à </Window>) concernera la fenêtre principale. Le premier élément que nous devons spécifier pour cette fenêtre est l'image de fond :
<BackgroundBitmap Name="Background" Rect="0, 0, 519, 19"/>
Ce tag BackgroundBitmap utilise Name= pour spécifier le nom de l'image à utiliser. Attention, il ne s'agit pas du nom de fichier mais du nom que vous avez défini avec le tag Bitmap. Rect= permet de spécifier la zone de l'image utilisée pour remplir la fenêtre (il s'agit habituellement de sa taille, qui donnera la taille de la fenêtre). Notez que les tailles spécifiées dans les thèmes FreeAmp sont inclusives. Cela signifie ici, par exemple, que 519 fait partie de la fenêtre.
Nous avons placé le décor, intéressons-nous aux acteurs...
Dans un thème FreeAmp, les acteurs du thème sont les boutons et toutes les zones actives de FreeAmp. Nous utilisons un tag <Controls></Controls> pour définir ces zones, leur apparence et leurs fonctions :
<Controls>
ButtonControl
A l'intérieur de la portée de ce tag <Controls> (faisant office de conteneur), nous pouvons tout d'abord utiliser le tag :
<ButtonControl Name="un_nom">
où "un_nom" correspond à un élément actif ou, plus précisément, à un contrôle étant un bouton sur lequel l'utilisateur peut cliquer. Prenons un exemple concret avec le bouton permettant de stopper la lecture d'un morceau :
<ButtonControl Name="Stop">
Dans la portée de ce tag, nous définissons tout ce dont FreeAmp a besoin :
<Info Desc="Stop the player" Tip="Stop"/>
Nous précisons le tooltip à afficher si l'utilisateur laisse le pointeur de sa souris au-dessus de la zone active. Les paramètres sont Desc= pour fournir une description de la fonction du bouton et Tip= pour fournir un mini-texte correspondant.
<Position Pos="69,107"/>
Nous spécifions la position du bouton dans la fenêtre principale. La dimension de la zone active sera calculée en fonction des tags qui vont suivre. Il existe cependant une autre syntaxe pour ce tag Position :
<Position Rect="69,107,89,127"/>
Ici, nous spécifions une zone rectangulaire complète en fournissant les coordonnées de la zone (coin supérieur gauche et coin inférieur droit). Cette syntaxe est cependant plus éprouvante dans la rédaction du fichier de description et nous préférerons la version précédente.
<ControlBitmap Rect="0,106,207,139" Name="Buttons"/>
Voici la ligne permettant de donner une image à notre zone de bouton. Le tag ControlBitmap prend en argument une zone de l'image correspondant aux boutons (Rect=). Nous n'oublions pas de préciser de quelle image il s'agit avec Name=.
Ici encore, il ne s'agit pas du nom de fichier, mais du nom que nous avons précisé en début du fichier. Les coordonnées de la zone en argument correspondent aux dimensions d'une zone à l'intérieur du fichier BMP des boutons. Bien sûr, il pourrait paraître plus facile de créer un fichier image par bouton et de simplement utiliser les dimensions de ces fichiers comme coordonnées. Le problème qui se pose alors est le temps de chargement du thème. En effet, un simple coup d'
il aux différents thèmes existants nous permet d'estimer le nombre de fichiers qu'il faudrait charger séparément (plus d'une vingtaine).
Voilà pourquoi, tout comme avec les fichiers graphiques utilisés dans les jeux, il est préférable de réunir tous les éléments graphiques dans un seul fichier et de spécifier des zones de l'image par élément. Si les performances ne sont pas votre préoccupation majeure, utilisez la technique qui vous paraît le plus simple. Certains thèmes séparent les fichiers (comme le MS Office FreeAmp Theme), d'autres non.
Attention ! Une zone (ou région) de l'image spécifiée dans le fichier de description ne correspond pas à la taille effective du bouton ! En effet, un bouton pouvant se trouver dans quatres états différents (normal, sous la souris, pressé, inactif), la zone sera quatre fois plus large.
Prenons un exemple concret. Nous avons un bouton de 10*10 pixels, la zone active débutera sur l'axe X au pixel 0 et se terminera au pixel 9 (les coordonnées sont inclusives). Notre zone est carrée, il en va donc de même pour l'axe Y (0->9). Nous aurons donc :
<Position Rect="100,100,109,109"/>
mais
<ControlBitmap Rect="0,0,39,9" Name="Buttons"/>
La zone dans l'image des boutons s'étend sur l'axe X du pixel 0 au pixel 39 et sur l'axe Y du pixel 0 au pixel 9. Nous avons donc (où x1 et y1 sont les coordonnées de départ et x2 et y2 les coordonnées de fin) :
Largeur d'un bouton = ((x2 - x1) + 1)/4
Hauteur d'un bouton = (x2 - x1) + 1
Vous n'êtes pas obligé de créer 4 boutons différents. En revanche, dans le cas où le bouton ne change pas en fonction de son état, vous devrez avoir quatre occurrences du même dessin pour former la zone utilisée.
Notre description du bouton est terminée, n'oublions pas de fermer la portée de ButtonControl avec </ButtonControl>.
MultiStateControl
Un MultiStateControl est un élément très semblable au ButtonControl mais se différencie par le fait qu'il peut prendre des états arbitrairement choisis. C'est le cas, par exemple, du bouton de répétition de morceau (Repeat).
Le bouton de répétition peut se trouver dans trois états différents :
- RepeatNone pour aucune répétition ;
- RepeatOne pour répéter le morceau en cours ;
- RepeatAll pour répéter tous les morceaux dans la liste.
Nous utilisons donc :
<MultiStateControl Name="Repeat" NumStates="3">
Le contrôle (bouton) Repeat est un MultiStateControl et nous précisons le nombre d'états où il peut se trouver avec NumStates="3". Il ne nous reste plus, comme avec ButtonControl, qu'à spécifier le tag Info :
<Info Desc="Repeat no tracks||Repeat current track||Repeat all tracks"
Tip="Repeat none||Repeat current||Repeat all"/>
Vous constaterez la présence des symboles ||. Ceux-ci permettent de spécifier plusieurs textes pour les tooltips en fonction de l'état du contrôle. Nous voyons ici que les trois états sont utilisés dans un ordre précis. Consultez le tableau en annexe pour connaître les noms et les états.
Les tags Position et ControlBitmap ne s'utilisent de manière identique qu'avec ButtonControl.
TextControl
Ces contrôles n'utilisent pas d'image mais du texte. C'est dans ces tags que vous ferez usage du nom de police que vous aurez défini en début du fichier de description de thème.
Tout comme les autres contrôles, ils utilisent un nom (Name=) pour désigner une partie donnée du thème. Par exemple :
<TextControl Name="Title">
Title est le nom du contrôle où s'affiche le nom du morceau en cours de lecture. Dans la portée de ce tag, vous devrez spécifier l'emplacement du texte avec :
<Position Rect="72,46,309,61"/>
La zone ne peut être spécifiée que par le paramètre Rect=, FreeAmp ne calculera pas la largeur et la hauteur du texte pour vous. Si la zone est plus petite que le texte à afficher pour le contrôle, cela ne posera pas de gros problèmes. Il se mettra automatiquement à défiler dans le sens horizontal.
Une petite astuce concernant le contrôle Time nous permet de tester la largeur de notre zone : il suffit de lancer la lecture d'un morceau et d'utiliser les touches <Alt-Gr>-0 (caractère @) pour forcer l'affichage d'une durée de 23:59:59. Vous saurez alors immédiatement si la largeur du contrôle Time est assez importante pour votre thème. Ceci est fort utile puisque tous les autres TextControl peuvent facilement être testés (nom du morceau, info, etc.). Pour la durée, le seul autre test consisterait à créer un fichier MP3 ou Ogg de 10 heures !
Vous devrez ensuite utiliser un nouveau tag permettant de définir l'alignement du texte et la police utilisée :
<Style Font="Main" Align="Center"/>
C'est tout, n'oubliez pas de fermer la portée avec </TextControl>. Vous pourrez consulter les tableaux en annexe pour connaître les différents TextControl utilisables.
SliderControl et VSliderControl
Ces deux contrôles sont respectivement des barres de position horizontale et verticale. Les barres horizontales sont habituellement utilisées pour le déplacement dans le morceau et la barre verticale pour le volume et l'equalizer (pour info, nous n'avons pas trouvé d'equalizer dans les versions stables de FreeAmp :-/).
Les deux contrôles s'utilisent de la même manière :
<VSliderControl Name="Volume">
<Info Desc="Change volume" Tip="Volume"/>
<Position Rect="2,21,11,121"/>
<ControlBitmap Rect="322,243,351,256" Name="Buttons"/>
</VSliderControl>
Attention ! La ligne, et donc la base sur laquelle glisse le poussoir de contrôle, ne dispose pas, pour l'instant, d'un graphique spécifique. Cette glissière est dessinée sur le fond de la fenêtre principale et seul le poussoir est un élément graphique.
Autre aspect important, dans le fichier images, un bouton poussoir sera répété trois fois (contre 4 pour un bouton classique). Ce poussoir peut en effet se trouver dans seulement trois états différents : normal, sous la souris et désactivé.
Deux autres paramètres peuvent être utilisés dans le tag VSliderControl :
- Notch donne la position par défaut sur la ligne en pour cent. Notch="50%" signifiera, par exemple, que le poussoir se trouvera au centre de la glissière par défaut.
- NotchWidth permet de spécifier une valeur pour une fonctionnalité fort agréable que nous appellerons en français le magnétisme d'une position. Ce paramètre ne s'utilise que si Notch est présent. Il permet de spécifier un nombre de pixels autour de la position par défaut depuis laquelle le poussoir sera attiré. Avec NotchWidth="5", par exemple, si l'utilisateur place le poussoir à 5 pixels ou moins de la position par défaut, il rejoindra cette dernière automatiquement.
Nous arrêterons ici notre tour d'horizon de la création de thèmes pour FreeAmp. N'oubliez pas de fermer les portées des tags en fin de fichier de description :
</Controls>
</Window>
Nous avons fourni les bases de la création, mais il reste des fonctionnalités très puissantes et malheureusement plus complexes. Je parle, par exemple, de la possibilité de spécifier des Name= spécifiques pour certains boutons. Ces noms ne sont pas pris en charge par FreeAmp mais se rapportent à des noms de fenêtres. Il est ainsi possible qu'un seul et même thème ait plusieurs aspects différents.
On composera avec un bouton spécifique permettant de changer le contenu et l'organisation de la fenêtre principale en fonction de l'état du bouton. C'est le cas du bouton de changement de vue du thème par défaut.
Pour en savoir plus sur les thèmes FreeAmp, reportez-vous aux deux documents présents dans la section thèmes du site officiel de FreeAmp : http://www.freeamp.org.
Annexe 1 : ButtonControls
Nom
Description
Play
Déclenche la lecture (le bouton est inactif durant la lecture)
Pause
Met en pause (le bouton est inactif s'il n'y a pas de lecture en cours)
Stop
Stoppe la lecture
Prev
Saute au morceau précédent
Next
Saute au morceau suivant
Quit
Quitte FreeAmp
MyMusic
Ouvre le navigateur musicbrowser
Options
Ouvre la fenêtre des options
Download
Ouvre le gestionnaire de téléchargement
Logo
Lance le navigateur Web par défaut sur l'ULR spécifiée
Minimize
Réduit l'application FreeAmp
ReloadTheme
Recharge le thème courant
Credits
Affiche les informations sur le thème
Help
Affiche l'aide en ligne
Files
Ouvre la fenêtre de sélection de fichiers
Annexe 2 : MultiStateControl
Nom
Etats
Description
PlayPause
Play/Pause
Lecture/pause
PlayStop
Play/Stop
Lecture/stop
Repeat
Repeat None/Repeat One/Repeat All
Aucune répétition /du morceau/de tous les morceaux
Shuffle
Normal/Shuffle
Mode aléatoire
Mute
.
Silence oui/non
EqEnable
Enabled/disabled
Affichage de l'equalizer
Annexe 3 : TextControl
Nom
Description
Title
Titre du morceau en cours
Info
Information sur le thème
StreamInfo
Information sur le flux MP3 en cours (bitrate, sample, mode)
BufferInfo
Etat des tampons d'entrée/sortie
Time
Durée écoulée
TimeRemaining
Durée restante (remplace Time)
Annexe 4 : (V)SliderControls
Nom
Description
Volume
Réglage du volume
Seek
Position dans le morceau
Balance
Réglage dans la balance
Preamp
Réglage du pré-ampli
Eq0 - Eq9
Réglage des 10 equalizers (0 à 9)