Accueil du site > Lecteurs audio > SkinnableMP3player > Le plugin SPIP ’skinnableMP3Player’

Le plugin SPIP ’skinnableMP3Player’

Un mini lecteur MP3 à interface paramétrable

mercredi 18 juin 2008, par Franck Ruzzin

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 en
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.

2 Messages de forum

  • Le plugin SPIP ’skinnableMP3Player’ Le 15 avril 2009 à 21:57 , par nathbni

    Bonsoir,
    J’aurais 2 questions :

    - est-ce qu’on peut faire en sorte que l’ordre des musiques soit aléatoire

    - je souhaiterais créer une sorte de player en pop-up qui commanderait ma playliste indépendamment de la circulation dans le site. est-ce envisageable avec skinnableMPplayer ? Avez-vous une piste pour m’aider à démarrer ?

    Merci beaucoup !
    Le plugin fonctionne très très bien sous spip 2.0.4 : mieux que Lecteur multimedia dont la playliste ne lit que le 1er item (pour le moment, personne n’a pu m’aider à comprendre pourquoi) !! J’ai donc choisi la simplicité et l’efficacité !

    Répondre à ce message

    • Le plugin SPIP ’skinnableMP3Player’ Le 16 avril 2009 à 18:05 , par Franck

      Bonjour,

      - A la question 1 (ordre des musiques), il y a une petite modif a faire dans la boucle, minime, donc pas de problemes.

      - Concernant la question 2, la piste d’une nouvelle fenetre me parait tres interessante. Quelque chose comme ouvrir la page contenant le lecteur dans une nouvelle fenetre (var win=window.open(url,....)) : la fenetre restant toujours ouverte le lecteur n’est jamais reinitialise, et la liste est jouee sans interruption.

      Je ne suis pas pres de mon ordi avant 24 heures, mais je donne une reponse a la question 1 des le debut du weekend. Pour la question 2, je suis un peu charette pour le moment ; mais si tu est bloque, recontacte moi, je te filerais un coup de main.

      Franck

      Répondre à ce message

Répondre à cet article