SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 259 visiteurs en ce moment

Accueil > Affichage multimédia > Audio, vidéo > MP3player > skinnableMP3player > Le plugin ’skinnableMP3Player’

Le plugin ’skinnableMP3Player’

Un mini lecteur MP3 à interface paramétrable

24 juin 2008 – par franckGre – 11 commentaires

1 vote

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.

Voir en ligne : Le dedans du bocal

Dernière modification de cette page le 26 octobre 2009

Retour en haut de la page

Vos commentaires

  • Le 24 février 2011 à 14:34, par Niko En réponse à : Le plugin ’skinnableMP3Player’

    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

  • Le 7 mai 2010 à 15:34, par david En réponse à : Le plugin ’skinnableMP3Player’

    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

    • Le 7 mai 2010 à 15:51, par franckGre En réponse à : Le plugin ’skinnableMP3Player’

      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

    • Le 7 mai 2010 à 17:49, par franckGre En réponse à : Le plugin ’skinnableMP3Player’

      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

    • Le 2 juillet 2010 à 14:21, par David En réponse à : Le plugin ’skinnableMP3Player’

      Merci Franck ! c’était bien ça.
      Un problème d’adressage.

      David

    Répondre à ce message

  • Le 24 octobre 2009 à 12:29, par jfredd En réponse à : Le plugin ’skinnableMP3Player’

    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

  • Le 18 juillet 2008 à 17:24, par Arnaud En réponse à : Le plugin ’skinnableMP3Player’

    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

    • Le 8 août 2008 à 00:22, par franckGre En réponse à : Le plugin ’skinnableMP3Player’

      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 ?

    • Le 10 août 2008 à 20:23, par franckGre En réponse à : Le plugin ’skinnableMP3Player’

      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

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Compositions 2 et 3

    25 mars 2011 – 176 commentaires

    Ce plugin vous permet de définir plusieurs variantes de squelettes (nommées compositions) pour un même type d’objet SPIP. Dans l’espace privé, il est alors possible de choisir, dans un menu déroulant, la composition qu’on veut attribuer à chaque (...)

  • Configurer Sparkpost

    25 avril – 18 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

Ça spipe par là