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.
Discussions par date d’activité
4 discussions
Bonjour,
j’ai utilisé votre plugin cependant je rencontre un petit problème.
le player s’affiche dans ma page mais aucun son n’est joué, j’ai bien intégrer le fichier JavaScript, et j’ai insérer le code dans l’article.
Si vous avez une solution a me proposer je suis preneur
Bonjour Niko,
Serait il possible d’avoir un lien vers cette page pour l’étudier ?
A+,
Franck
Répondre à ce message
Bonjour,
Je n’arrive absolument pas à changer de skin en faisant par exemple :
Rien ne s’affiche...
Si je rajoute des paramètres height et width adaptés, pareil.
Une idée ?
Merci d’avance,
David
Bonjour David,
A priori, je dirais que le fichier skindata5.xml n’est pas trouvé (est-il bien dans le dossier xml du plugin ?).
Peux tu me donner une URL pour que je puisse voir le contenu de la page ?
A+,
Franck
Re bonjour David,
Je vois que tu as presque trouvé la solution (le lecteur s’affiche maintenant avec son skin par défaut).
Pour utiliser des images autres que celle par défaut, voilà ce qu’il te faut faire :
- décris les chemins des images qui composent les boutons dans ton fichier xml, indique l’URL complète, par exemple
http://monsite.org/mesimages/boutonhaut.png
.En effet, lorsque l’on installe le plugin dans le répertoire auto, le chemin relatif dans le fichier xml n’indique plus la bonne valeur.
Franck
Merci Franck ! c’était bien ça.
Un problème d’adressage.
David
Répondre à ce message
Bonjour alors moi j’obtiens ceci :
Fatal error : Call to undefined function phraser_arguments_inclure() in C :\wamp\www\spiploic\plugins\skinnableMP3player\skinmp3player_mes_fonctions.php on line 12
Spip 2.0.9 sur Wamp server 2.0 sur Windows XP Pro SP3
Une idée ?
Merci d’avance
Bonjour,
Ca y est, le plugin fonctionne aussi pour les versions de SPIP > 2.0.9
Répondre à ce message
Bonjour, je rencontre quelques petit problème avec se plugin, dans mon site j’utilise des brèves pour simuler un système de module que je puisse placer un peu n’importe où comme dans joomla par exemple.
Pour créer un module je crée une brève dans le secteur ou je veux l’utiliser et ensuite à l’aide d’un modèle je les place ou je veux dans les champs des mes objets SPIP (articles ou rubriques).
Donc pour pouvoir utiliser le plugin je me suis créé un modèle dans lequel je met la balise
#SKINNABLEMP3PLAYER
et j’utilise ce modèle dans une brève, à ce niveau, quand je suis en local tous se passe bien, par contre sur mon serveur de test (hébergé chez infomaniack) j’ai une erreur :ce qui empêche toute modification de la brève car je n’ai plus accès au bouton du coup.
Ensuite au moment d’utiliser mon modèle breve pour placer mon module il écrit une partie du code dans l’espace de prévisualisation (capture).
Sinon sur le site public la lecture se fait sans problème apparent.
Est ce que quelqu’un aurait une idée ?
Arnaud
Bonjour,
Et désole de répondre si tard, je n’avait pas vu le post.
J’utilise effectivement des variables de session pour numéroter les lecteurs.
Je n’ai jamais rencontré de problèmes, mais j’imagine j’ai peut être été privilégié.
Le problème persiste-t-il aujourd’hui ?
Bonjour,
Le plugin a été modifié et ne fait plus appel aux sessions.
Le problème que tu as rencontré doit donc disparaitre...
Répondre à ce message
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 : |