Le plugin ’skinnableMP3Player’

Un mini lecteur MP3 à interface paramétrable

Le plugin SPIP skinnableMP3player permet une intégration aisée du lecteur MP3 minimaliste skinnableMP3player (il ne comporte que deux contrôles : Stop et Pause/Play). Il est entièrement paramétrable par le biais d’un fichier de configuration XML.
Contrairement au lecteur minimalJSMP3player, l’interface graphique et le pilotage sont parties intégrantes du lecteur.
On abordera les points suivants :
I - Les skins par défaut
II - Implantation du plugin
III - La balise #SKINNABLEMP3PLAYER
IV - Le modèle contentSkinPlayer
V - Comportement et aspect par défaut
VI - Surcharge par un fichier de configuration
VII - Surcharges supplémentaires du comportement
VIII - Variante pour le moteur MP3

Mise à jour du 26 octobre 2009 : fonctionne avec toutes les versions de SPIP supérieures à 1.9

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

- 6) Surcharge par un fichier de configuration
- 7) Surcharges supplémentaires du comportement


 

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

- 6) Surcharge par un fichier de configuration


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

backgroundImage : <nom complet de l’image de fond ; valeur par défaut : barre arrondie ombrée métallique de 133x73 pixels>

— Démarrage de la lecture

autoStart : <démarrer automatiquement la lecture ou non (valeurs « true » ou « false ») ; Valeur par défaut : false>

— Lecture en boucle

loop : <redémarrer sur le premier morceau de la liste de diffusion lorsque le dernier se termine (valeurs « true » ou « false ») ; Valeur par défaut : false>


-  nœud enfant de niveau 1 <pushButtons>

— nœud enfant de niveau 2 <playButton>

upImg : <nom complet de l’image pour l’état « haut » ; Valeur par défaut : disque vert « play » de 61 pixels>
downImg : <nom complet de l’image pour l’état « bas » ; Valeur par défaut : disque vert « pause » de 61 pixels >
overImg : <nom complet de l’image pour l’état « survolé » ; Valeur par défaut : disque transparent de 61 pixels >
x : position sur l’axe des X ; Valeur par défaut : 63
y : position sur l’axe des Y(orienté vers le bas) ; Valeur par défaut : 1



— nœud enfant de niveau 2 <stopButton>

upImg : <nom complet de l’image pour l’état « haut » ; Valeur par défaut : disque rouge haut « stop » de 61 pixels>
downImg : <nom complet de l’image pour l’état « bas » ; Valeur par défaut : disque rouge enfoncé « stop » de 61 pixels >
overImg : <nom complet de l’image pour l’état « survolé » ; Valeur par défaut : disque rouge survolé « stop » de 61 pixels >
x : position sur l’axe des X ; Valeur par défaut : 1
y : position sur l’axe des Y(orienté vers le bas) ; Valeur par défaut : 1



-  nœud enfant de niveau 1 <sounds>

— nœuds enfant de niveau 2 <sound>

<sound url=(chemin complet vers le son mp3) />

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.

 

 

Creative Commons License
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.

Discussion

4 discussions

  • 1

    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

    Répondre à ce message

  • 3

    Bonjour,

    Je n’arrive absolument pas à changer de skin en faisant par exemple :

    <contentskinplayer
    |autostart=true
    |loop=true
    |xmlData=skindata5.xml
    |mp3list=IMG/mp3/mon_mp3.mp3
    >

    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

  • 1

    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

    Répondre à ce message

  • 2

    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 :

    Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/www/57a0d935c2cf99101518d7a30ca24d98/web/dev/solucom/ecrire/exec/breves_voir.php:70) in /home/www/57a0d935c2cf99101518d7a30ca24d98/web/dev/solucom/ecrire/public/assembler.php(398) : eval()'d code on line 41

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom