Accueil du site > Lecteurs audio > SkinnableMP3player > Le lecteur MP3 ’skinnableMP3player’

Le lecteur MP3 ’skinnableMP3player’

Un mini lecteur MP3 à interface paramétrable

dimanche 15 juin 2008, par Franck Ruzzin

Le skinnableMP3player est un lecteur MP3 minimaliste pur actionscript.
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 exemples contenus dans l’archive
II - Implantation du lecteur MP3
III - Implantation du lecteur MP3 – Variante
IV - Comportement et aspect par défaut
V - Surcharge par un fichier de configuration
VI - Surcharges supplémentaires du comportement
VII - Variante pour le moteur MP3

I - Les exemples contenus dans l’archive


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.
Les sons sont ajoutés à la liste de lecture en utilisant l’attribut "flashvars.mp3list" de cette instance du lecteur dans la page HTML.
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 lecteur MP3


On utilise la boîte à outils javascript swfobject 2.0.

Nota : Si on ne souhaite pas utiliser la boîte à outils swfobject 2.0, voir la variante au paragraphe 3.

Note : la documentation sur l’usage de swfobject ainsi que le téléchargement de l’archive se fait à l’adresse suivante : http://code.google.com/p/swfobject/

1) Importer dans la partie de la page le fichier javascript swfobject.js.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Utilisation du skinnableMP3player</title>
        <script type="text/javascript" src="javascript/swfobject.js"></script>
</head>

 

2) Ajouter le code indiquant le point d’insertion du moteur skinnableMP3Player dans la page :

<div id="myAlternativeContent1">
        <a href="http://www.adobe.com/go/getflashplayer">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
</div>

Si le plugin Flash est manquant ou si la version est trop ancienne, alors cette partie du code sera utilisée pour le lien vers le plugin adéquat.
L’élément important est id, dans notre exemple "myAlternativeContent1" qui permet d’indiquer à la boite à outils swfobject où implanter, si possible, le JSMP3Player. Ainsi, le conteneur <div> d’id myAlternativeContent1 devrait être remplacé par un objet SWF.

 

3) Créer le player skinnableMP3player_v1, avec ses options

var flashvars = {
        xmlDataPath : "skindata1.xml",
        autoStart : "true",
        loop : "false",
        mp3list : "§sons/transfer_data.mp3"
};
var pageData = {
        wmode:"transparent"
};
var attributes = {
        id: "skinnableMP3player1",
        name: "skinnableMP3player1"
};
swfobject.embedSWF("SkinnableMP3player_v1.swf", "myAlternativeContent1", "133", "73", "8.0.0", false, flashvars, pageData, attributes);

- xmlDataPath : optionnel - chemin du fichier XML des données spécifiques du player (valeur par défaut : "skindata.xml")
- autoStart : optionnel - la lecture des sons démarrent elle automatiquement ? (valeur par défaut dans le fichier xmlDataPath sinon : "false")
- loop : optionnel - la lecture se fait elle en boucle ? (valeur par défaut dans le fichier xmlDataPath sinon : "false")
- mp3list : optionnel - liste des sons, séparés par le caractère "§" (cette liste s’ajoute aux sons décrits dans le fichier xmlDataPath)
- wmode : optionnel - permet d’implanter un lecteur dont le fond est transparent.
- id : optionnel - id du player pour sa manipulation éventuel dans le DOM
- name : optionnel - nom du nœud à affecter à l’attribut name de l’objet

Si on souhaite ne pas définir une valeur, il suffit de ne pas écrire la paire correspondante. Si on ne souhaite définir aucune valeur pour un objet il faut tout de même créer un objet vide, par exemple :
flashvars={}
pageData={}
attributes={}

les paramètres de embedSWF sont :
- swfUrl : adresse du fichier swf (ici, SkinnableMP3player_v1.swf)
- id : id de l’élément à remplacer (ici, myAlternativeContent1)
- width : largeur nécessaire pour afficher le swf (ici, 133)
- height : hauteur nécessaire pour afficher le swf (ici, 73)
- version : version minimale du Flash Player pour exécuter le swf (ici, 8.0.0)
- flashvars, pageData, attributes : comme vu précédemment.

ATTENTION : dans la description des attributs d’un objet (flashvars, pageData ou attributes), il est indispensable de séparer deux valeurs par le caractère virgule ",", sauf pour le dernier qui ne doit EN AUCUN CAS être suivi de virgule (cela provoque une erreur avec IE et Opéra) !

Lorsque la page décrite ci-dessus est affichée dans un navigateur , on obtient le lecteur skinnableMP3player_v1 prêt à reproduire le son :

- transfer_data.mp3

plus tous les sons décrits dans le fichier skindata1.xml.

 

III - Implantation du lecteur MP3 – Variante

Cette variante permet de ne pas utiliser la boîte à outils javascript swfobject 2.0, et remplace donc la méthode vue en 1.
Il suffit d’insérer le code suivant à l’endroit où l’on souhaite implanter le lecteur :

<object
        id="myElementId"
        type="application/x-shockwave-flash" data="SkinnableMP3player_v1.swf?mp3list=§sons/transfer_data.mp3§sons/bosco.mp3"
        width="133"
        height="73">
        <param name="wmode" value="transparent" />
        <param name="movie" value="SkinnableMP3player_v1.swf?mp3list=§transfer_data.mp3§bosco.mp3" />
</object>

La liste des sons à ajouter à la playlist est passée à l’aide de l’attribut mp3list et chaque son est séparé par le caractère "§".
Note : on préfèrera l’implantation utilisant la boîte à outils javascript swfobject 2.0, plus en respect avec la norme W3C.

 

IV - 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 ».

 

V - Surcharge par un fichier de configuration

S’il existe dans le même dossier que la page HTML qui implante le lecteur skinnableMP3player un fichier nommé « skindata.xml », alors 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 xmlDataPath) lors de l’implantation de l’objet SWF.

//Options pour l'insertion d'un player MP3
var flashvars = {
        xmlDataPath : "<chemin vers le fichier de conf>/maConfig.xml"  
};

Lors de la création du skinnableMP3player, le fichier de configuration implicite ou explicite est donc éventuellement lu. Ce fichier de configuration est 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).

 

VI - 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
- une liste de sons à jouer (qui s’ajoute à ceux définis par le fichier XML s’il est présent) avec la variable mp3list où chaque son est séparé par le caractère « § ».

//Options pour l'insertion d'un player MP3
var flashvars = {
        xmlDataPath : "<chemin vers le fichier de conf>/maConfig.xml",
        autoStart : "false",
        loop : "false",
        mp3list : "§sons/transfer_data.mp3"   
};

 

VII - 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 lecteur MP3 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 lecteur MP3 ’skinnableMP3player’ Le 4 novembre 2011 à 18:58 , par CH

    Appel au secours...
    Je suis en train de mettre en place un site de podcast d’élèves de collège (classe d’éducation aux médias qui travaille sur la radio) qui fonctionne sous spip 2.1.11 avec le plugin globenews. Les élèves souhaitent mettre en page d’accueil un fichier mp3 qui se lancerait automatiquement et s’arrêterait de même (court slogan sonore). Le lecteur MP3 ’skinnableMP3player’ me semble convenir parfaitement à ces besoins mais je n’arrive pas à l’installer correctement. Pouvez-vous m’aider en tenant compte du fait que je ne suis pas informaticienne mais documentaliste et totalement autodidacte dans le domaine de la création de sites ?
    D’avance merci, si vous pouvez faire quelque chose pour moi
    CH

    Répondre à ce message

Répondre à cet article