Lecteur MP3
Macromedia Flash offre la possibilité (entre bien d'autres choses) de lire des fichiers audios.
Dans certains cas, il peut être utile d'intégrer un lecteur aux pages WEB permettant ainsi de préauditer un son au format MP3 par exemple.
Bon nombre de ces animations disposent d'interfaces peu attrayantes ou bien trop lourdes.
Le principal avantage du Player Flash MP3
dewPlayer, outre sa légèreté, réside en sa capacité à télécharger le fichier audio à la demande et non au moment du chargement de la page.
En effet, le fichier audio n'est pas contenu dans l'animation mais appelé dynamiquement lorsque l'on clique sur
Play.
Cela permet de générer des listes de fichiers audio sur un serveur, par exemple dans une page WEB via un script PHP, et de proposer des aperçus en utilisant le même code et le même fichier swf (ShockWave-Flash).
On peut aussi se déplacer dans le MP3 en cliquant sur la barre de temps du Lecteur.
L'uns des avantages de
dewPlayer est qu'il n'impose pas un style particulier. En effet, seuls les éléments essentiels à l'audition d'un fichier audio sont proposés (
Play,
Pause,
Stop et la barre de temps).
Ainsi, nous pouvons personnaliser notre propre Lecteur MP3 graphiquement à l'aide d'un logiciel de graphisme et/ou du langage HTML et CSS.
Demonstration
Le fichier audio (d'une durée de 27 sec.) présenté ici est un extrait de la chanson :
- Terra du groupe de Techno Corse Synthologie
Pour la démonstration, le lecteur MP3 à une couleur de fond bleu et est entouré d'une simple boite de couleur verte.
Installation du lecteur MP3 sur votre site WEB
Le Player Flash MP3 dewPlayer est une petite application développée en Flash.
Il se présente sous la forme d'un petit fichier du nom de dewplayer.swf.
Son installation est trés simple. En effet, il vous suffit juste de le télécharger sur le site WEB de l'auteur afin de l'héberger dans votre espace WEB.
Vous trouverez le lien vers la page de téléchargement de l'application en bas de page de cet article.
Integration du lecteur MP3 dans une page WEB
Il suffit d'utiliser le code HTML classique pour une animation Flash, en spécifiant dans l'URL du fichier swf (c.a.d. le lecteur) le nom du fichier MP3 comme argument suivi des éventuelles options.
-
URL du lecteur MP3 = [chemin/] dewplayer.swf ? son = ... [ &option = ... [ &autre-option = ... ] ]
Le caractère ? annonce un ou plusieurs paramêtres.
Le caractère & permet de les séparer.
Ce caractère peut être remplacé par sont entitée HTML & afin d'avoir des pages conformes au standard du WEB (W3C).
Dans l'exemple d'intégration ci-dessous le fichier se nomme exemple.mp3 en supposant qu'il se trouve dans le même répertoire du lecteur.
-
<object type="application/x-shockwave-flash" data="dewplayer.swf?son=exemple.mp3" width="200" height="20">
<param name="movie" value="dewplayer.swf?son=exemple.mp3"/>
</object>
Remarque : L'URL du fichier audio doit être spécifié dans data et dans value du code de l'animation Flash.
Options du lecteur MP3
dewPlayer supporte plusieurs options afin de personnaliser le lecteur MP3.
Rappel :
Ces options doivent être ajoutées dans la partie de l'URL du lecteur MP3 (après le premier paramêtre qui correspond au nom du fichier audio).
autoplay (ou autostart)
Permet de lancer automatiquement la lecture. Valeurs supportées : 1, true ou yes.
- dewplayer.swf?son=exemple.mp3&autostart=1
autoreplay
Permet la lecture en boucle. Valeurs supportées : 1, true ou yes.
- dewplayer.swf?son=exemple.mp3&autoreplay=1
bgcolor
Permet de modifier la couleur de fond pour l'adapter à la page où se trouve le lecteur MP3. La valeur attendue correspond au code (format hexa-décimal) de la couleur choisie.
- dewplayer.swf?son=exemple.mp3&bgcolor=FFFFFF
volume
Permet de définir un volume par défaut. La valeur attendue est un nombre entier ( 0 <= valeur <= 100).
- dewplayer.swf?son=exemple.mp3&volume=100
Code HTML complet
Avec toutes les options activées.
-
<object type="application/x-shockwave-flash" data="dewplayer.swf?son=exemple.mp3&autostart=1&autoreplay=1&bgcolor=FFFFFF&volume=100" width="200" height="20">
<param name="movie" value="dewplayer.swf?son=exemple.mp3&autostart=1&autoreplay=1&bgcolor=FFFFFF&volume=100"/>
</object>
Générateur de code (X)HTML
Si vous désirez personnaliser votre propre lecteur rapidemment et/ou que vous ne connaissez pas le langage HTML, le plus simple est d'utiliser le générateur de code XHTML sur le site de l'auteur (l'adresse est fournie en bas de page).
Le générateur produit deux versions à copier-coller selon vos besoins.
La première étant très complète (non valide W3C), la seconde étant plus propre et valide W3C.
L'exemple présenté dans cet article correspond à la deuxième version du code XHTML.
N'oubliez pas ! Préférez des noms de fichier (URL du MP3) sans espace ni caractères accentués.
Informations complémentaires
Licence
La licence du Player Flash MP3 dewPlayer est libre. Il est gratuit et vous n'êtes pas obligé d'indiquer le lien vers le site à chaque utilisation du Lecteur MP3.
Site officiel
Rendez-vous sur le site de l'auteur :
- Player Flash MP3 léger comme une plume
- dewplayer-reloaded
Developpement >>