I - Les skins par défauts
|
Il s’agit ici de l’habillage par défaut. Un bouton stop rouge et un bouton play/pause vert. Le lecteur ne démarre pas automatiquement et la lecture n’est pas en boucle. |
|
Surcharge de l’habillage par défaut par le fichier skindata2.xml. Surcharge du fond, du bouton stop (3 images) et du bouton play/pause (3 images). |
|
Surcharge de l’habillage par défaut par le fichier skindata3.xml. On fixe l’attribut backgroundImage=« », ce qui a pour effet de surcharger le fond par défaut par une image inexistante, par conséquent le fond n’est pas représenté. Surcharge du bouton stop (3 images) et du bouton play/pause (3 images). |
|
Surcharge de l’habillage par défaut par le fichier skindata4.xml. Surcharge du fond, du bouton stop (3 images) et du bouton play/pause (3 images). |
|
Surcharge de l’habillage par défaut par le fichier skindata5.xml. On fixe l’attribut backgroundImage=« », ce qui a pour effet de surcharger le fond par défaut par une image inexistante, par conséquent le fond n’est pas représenté. Surcharge du bouton stop (3 images) et du bouton play/pause (3 images). |
|
Surcharge de l’habillage par défaut par le fichier skindata6.xml. On fixe l’attribut backgroundImage=« », ce qui a pour effet de surcharger le fond par défaut par une image inexistante, par conséquent le fond n’est pas représenté. Surcharge du bouton play/pause (3 images). Concernant le bouton stop, on indique ici pour l’attribut upImg=« » ce qui a pour effet de surcharger l’état haut du bouton par une image inexistante, et comme on n’indique pas d’images pour les attributs downImg et overImg ceux-ci héritent de celle de l’attribut upImg ,qui est vide et en conséquence le bouton stop n’est pas affiché. |
II - Implantation du plugin
Désarchiver le fichier « skinnableMP3player-spip-plugin.zip » dans le dossier plugins de votre installation SPIP.
L’activer via l’administration des plugins. (Consulter la documentation officielle pour plus de détails.)
Dans ce plugin, on utilise l’utilitaire javascript d’installation d’objet Flash swfobject 2.0, disponible à l’adresse suivante : http://code.google.com/p/swfobject/
En conséquence, il conviendra d’intégrer ce fichier dans la partie « head » des pages qui doivent utiliser le plugin :
<script type="text/javascript" src="#CHEMIN{javascript/swfobject.js}"></script>
par exemple, si la librairie swfobject est dans le répertoire « /javascript » de votre installation SPIP.
III - La balise #SKINNABLEMP3PLAYER
Lorsque le plugin est activé, on dispose de la balise #SKINNABLEMP3PLAYER qui liste tous les documents « mp3 » joints à l’article, les intègre à la liste des morceaux à jouer (la playlist), et insère dans la page un lecteur mp3 minimal.
Ainsi,
[(#SKINNABLEMP3PLAYER)] implante dans la page un lecteur skinnableMP3player avec comme interface :
De la même manière on dispose de la balise #SKINNABLEMP3PLAYER_RUB qui a la même syntaxe que la balise #SKINNABLEMP3PLAYER, mais qui utilise la rubrique du contexte en cours et ajoute à la playlist tous les fichiers MP3 joints aux articles enfants de cette rubrique (on peut donc utiliser cette balise dans un article ou une rubrique).
Pour plus d’informations concernant les paramètres à transmettre à ces balises, voir
IV - Le modèle contentSkinPlayer
Lorsque le plugin est activé, il permet l’utilisation du modèle contentSkinPlayer dans le corps des articles.
La syntaxe complète est :
<contentSkinPlayer
|autostart=(true ou false) -> par défaut false
|loop=(true ou false) -> par défaut false
|xmlData=(chemin fichier xml de configuration) -> par défaut skindata.xml
|width=(nbPixels) -> par défaut 133
|height=(nbPixels) -> par défaut 73
|mp3list=(liste de fichiers mp3 séparés par §)
>
Les paramètres sont facultatifs (il en faut cependant au moins un).
Un grande différence avec la balise #SKINNABLEMP3PLAYER est qu’il n’y a pas intégration des sons mp3 joints à l’article.
Pour la description du fichier xml de configuration, voir
Remarque : Dans l’espace d’administration, les lecteurs skinnableMP3player implantés par modèle sont visualisés par une empreinte bleue. Le fichier swfobject.js requis est chargé dans l’espace d’administration par le plugin.
V - Comportement et aspect par défaut
- Aspect graphique
— Un fond de 133 x 73 pixels
— Un bouton stop à 3 états
L’image « Haut » est affichée lorsque la souris est hors de la zone opaque du bouton. Les autres images sont cachées.
L’image « Bas » est affichée lorsque l’utilisateur presse le bouton de la souris sur la zone opaque du bouton. Les autres images sont cachées.
L’image « Survolé » est affichée lorsque la souris survole la zone opaque du bouton. Les autres images sont cachées.
Appuyer sur le bouton « Stop » arrête la lecture et repositionne la tête de lecture au début du son courant.
— Un bouton play/pause à 3 états
L’image « Haut » est affichée lorsque le lecteur est arrêté.
L’image « Bas » est affichée lorsque le lecteur est en cours de lecture
L’image Survolé » est affichée lorsque la souris survole la zone opaque du bouton « Haut ». Les images « Bas » et « Haut » (en fonction de l’état de lecture ou d’arrêt du lecteur) restent affichées. Celles-ci étant situées sur une couche plus profonde que l’image « Survolé », elle sont vues par transparence car l’image « Survolé » n’est pas totalement opaque.
Appuyer sur le bouton « Haut » lance la lecture. Si le son a été mis en pause, alors la lecture reprend à l’endroit où le son s’est arrêté. Appuyer sur le bouton « Bas » met en pause la lecture et positionne un marqueur pour reprendre la lecture à cet endroit.
Il est à noter que les boutons « stop » et « play/pause », peuvent être placés n’importe où sur la scène et avoir une forme quelconque. Cependant, le bouton « stop » sera toujours au-dessus du bouton « play/pause » qui sera lui même toujours au-dessus du fond.
- Comportement de lecture
Le lecteur skinnableMP3player ne démarre pas la lecture lorsque la page est chargée. L’utilisateur doit cliquer sur le bouton « Play » pour démarrer la lecture.
Lorsque la lecture du dernier son est terminée, la tête de lecture est repositionnée sur le début du premier son et le lecteur s’arrête. Pour recommencer la lecture, l’utilisateur doit à nouveau cliquer sur le bouton « Play ».
VI - Surcharge par un fichier de configuration
Dans le répertoire du plugin skinnableMP3player, il existe un sous-répertoire « xml » dans lequel se situe un fichier nommé « skindata.xml ». Ce fichier de configuration est lu et les valeurs qu’il défini viennent surcharger les valeurs par défaut de comportement.
Il est aussi possible de spécifier un fichier de configuration situé dans un autre dossier et/ou ayant un nom différent. Il suffit pour cela de passer l’information (variable xmlData des balises ou paramètre xmlData du modèle) lors de l’implantation.
Un fichier de configuration est par exemple constitué comme suit :
<?xml version="1.0" encoding="UTF-8"?>
<SkinnableMP3player backgroundImage="images/fond/skin2/background.png" autoStart="false" loop="false" >
<pushButtons>
<playButton upImg="p_up.png" downImg="p_down.png" overImg="p_over.png" x="47" y="47" />
<stopButton upImg="s_up.png" downImg="s_down.png" overImg="s_over.png" x="8" y="8" />
</pushButtons>
<sounds>
<sound url="sons/frogs.mp3" />
<sound url="sons/accessed.mp3" />
<sound url="sons/dogs.mp3" />
</sounds>
</SkinnableMP3player>
Les attributs possibles (tous sont facultatifs) sont :
- nœud racine du fichier XML
— Image de fond
— Démarrage de la lecture
— Lecture en boucle
- nœud enfant de niveau 1 <pushButtons>
— nœud enfant de niveau 2 <playButton>
— nœud enfant de niveau 2 <stopButton>
- nœud enfant de niveau 1 <sounds>
— nœuds enfant de niveau 2 <sound>
On ajoute autant de lignes qu’il y a de sons à ajouter à la playlist.
Pour ne pas modifier la valeur par défaut d’un des attributs, il suffit de l’omettre ou de régler sa valeur à « ».
Pour surcharger les images qui définissent un bouton, il faut au moins définir l’attribut upImg. En effet, il est utilisé pour définir la zone de clic du bouton. De plus, seules ses zones opaques sont considérées comme actives. Toutes les images du bouton dont l’attribut n’est pas défini dans le fichier XML seront dessinées avec l’image définie pour l’attribut upImg. Si upImg n’est pas défini, alors les images du bouton par défaut seront utilisé.
Pour « cacher » un bouton, il suffit de définir l’attribut upImg et de lui donner une valeur d’image inexistante, par exemple « » (caractère espace).
Pour « cacher » le fond, il suffit de définir l’attribut backgroundImage et de lui donner une valeur d’image inexistante, par exemple « » (caractère espace).
VII - Surcharges supplémentaires du comportement
Comme on vient de le voir le lecteur skinnableMP3player a un comportement par défaut qui peut être modifié par un fichier XML. Cela défini un comportement type que l’on choisi d’appliquer pour un contexte précis.
On peut aussi lors de l’implantation communiquer des variables au lecteur qui prennent le pas sur la configuration par défaut et la surcharge par le fichier XML si elle existe. On peut agir sur :
- le démarrage automatique (ou non) de la lecture au chargement de la page avec la variable autoStart
- le comportement lorsque le dernier son à été joué (recommencer au début ou arrêter) avec la variable loop
- un fichier de description xml alternatif avec la variable xmlData
- la hauteur d’implantation de l’objet SWF avec la variable height
- la largur d’implantation de l’objet SWF avec la variable width
ce qui donne par exemple :
[(#SKINNABLEMP3PLAYER{autostart=true}{loop=false}{xmlData=skindata5.xml}{height=300}{width=300})]
VIII - Variante pour le moteur MP3
L’archive est livrée avec deux moteurs pour le player MP3
- SkinnableMP3player_v1.swf (celui qui est utilisé par défaut)
- SkinnableMP3player_v1-SansImages.swf
En effet, si le besoin d’utiliser les images par défaut se révèle inutile, il suffit de remplacer le fichier SkinnableMP3player_v1.swf par le fichier SkinnableMP3player_v1-SansImages.swf (le renommer).
On utilise alors le même moteur, dans sa version sans images. Il est plus léger, mais impose de définir les images composant l’interface utilisateur dans le fichier XML.
Le plugin SPIP skinnableMP3Player est mis à disposition selon les termes de la licence Creative Commons Paternité-Partage des Conditions Initiales à l’Identique 2.0 France.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |