Lire / Laisser un commentaire
Introduction :
Minimalist Mp3 Player est un lecteur mp3 en Flash qui se veut petit, skinnable et facile à intégrer dans un site.
Il ne fait que 88 x 31 pixels et peut facilement s'intégrer dans un site web, il pourra aussi être mis aux couleurs du site en changeant certains paramètres voir le fichier de skin (changement de tout les graphismes).
Fonctionnalités :
Ce que ce player ne fait pas :
- Il ne permet pas de lire de playlist mais uniquement un fichier mp3, son format permet de l'intégrer plusieurs fois sur une même page pour permettre de lire plusieurs chansons. (Vous verrez pour ceux qui veulent qu'il vous suffirait d'un petit bout de JavaScript pour permettre de lire plusieurs morceaux avec une seule instance de l'objet flash).
- La vaisselle.
Ce que ce player fait :
- Lit des fichiers au format mp3.
- Permet la lecture pendant le preload du fichier.
- Affiche les infos ID3 du morceau (titre, album, artiste, année, durée).
- Curseur de lecture permettant de se positionner au passage voulu dans le morceau.
- Fonctions standarts : Play, Pause, Stop.
- Accès direct (lien) au fichier en cours de lecture.
- Paramètrable (skin, couleurs).
Intégration et paramètrage :
Vous pouvez facilement intégrer ce lecteur mp3 dans un de vos sites web en copiant un bout de code de ce style:
<embed src="......." flashvars="....." />
Voir plus loin pour les exemples d'intégration du lecteur.
Différents paramètres acceptés par le lecteur :
Mp3Url :
- Chemin du fichier à mp3 à charger.
- Si non renseigné : un mp3 par défaut est chargé.
SkinUrl :
- Chemin du fichier de Skin.
- Si non renseigné : le skin par défaut est chargé.
TxtCol :
- Code héxadécimale de la couleur du texte (titre de la chanson et info ID3).
- Si non renseigné : couleur par défaut (0xDDDDDD [gris clair]) utilisée.
BorderCol :
- Code héxadécimale de la couleur du de la bordure du lecteur.
- Si non renseigné : couleur par défaut (0xFFFFFF [blanc]) utilisée.
CrossDomainUrl (voir plus loin la partie CrossDomain) :
- Chemin du fichier crossdomain.xml si celui ci n'est pas situé à la racine.
- Si non renseigné : flash tentera de trouvé un fichier crossdomain.xml à la racine des domaines à partir desquelles des fichiers sont lus (fichier mp3 et fichier de skin).
Chaque paramètre est à préciser dans l'attribut 'flashvars' de la balise 'embed' et se note de la forme :
param1=valeur1¶m2=valeur2¶m3=valeur3
Exemples :
Code :
<embed src="http://darokin.info/DarMiniPlayer/MiniPlayer_v04.swf" flashvars="Mp3Url=http://darokin.info/mp3/Darokin_NES_song_1.mp3&SkinUrl=http://darokin.info/DarMiniPlayer/Skin_Darokin.png&TxtCol=0xCCCCCC&BorderCol=0xCCCCCC" quality="high" width="88" height="31" name="Minimalist MP3 Player" align="middle" allowScriptAccess="always" bgcolor="#000000" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />Rendu :
Code :
<embed src="http://darokin.info/DarMiniPlayer/MiniPlayer_v04.swf" flashvars="Mp3Url=http://darokin.info/mp3/Darokin_NES_song_1.mp3&SkinUrl=http://darokin.info/DarMiniPlayer/Skin_Darokin.png&TxtCol=0xFF0000&BorderCol=0xFFFF00" quality="high" width="88" height="31" name="Minimalist MP3 Player" align="middle" allowScriptAccess="always" bgcolor="#000000" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />Rendu :
Vous pouvez téléchargez le swf (clic droit - enregistrer sous) et l'héberger sur votre domaine, ainsi vous n'aurez pas à vous préoccuper du fichier crossdomain, n'oubliez pas de modifiez la balise embed en fonction. Exemple : Si vous placez sur 'votre-site.fr' le swf dans un dossier 'Mp3Player' et que vous voulez lire le mp3 nommez 'song01.mp3' de votre dossier mp3, votre code sera :
<embed src="http://votre-site.fr/Mp3Player/MiniPlayer_v04.swf" flashvars="Mp3Url=http://votre-site.fr/mp3/song_01.mp3" quality="high" width="88" height="31" name="Minimalist MP3 Player" align="middle" allowScriptAccess="always" bgcolor="#000000" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
Skin :
Vous pouvez personnaliser tous les éléments graphique de 'Minimal Mp3 Player' grâce au fichier de Skin. Cette image PNG contient tous les graphismes du lecteur et ressemble à ceci :
Pour personnaliser votre lecteur :
- Téléchargez ce fichier.
- Modifiez ce que vous voulez en respectant les emplacements et dimensions de chaque élément.
- Uploader ce fichier.
- Dans les paramètres (flashvars) de l'anim, précisez :
'SkinUrl=Chemin_Complet_De_Votre_Nouveau_Skin_En_Png.png' (voir partie Intégration).
Attention : Si le fichier de skin n'est pas sur le même domaine que le SWF, vous devez placé un fichier crossdomain.xml sur le serveur hébergeant l'image pour authoriser l'animation Flash à la lire (voire partie CrossDomain).
CrossDomain :
[INFO : Cette partie ne vous concerne pas si les mp3 et le fichier de skin sont sur le même domaine que le fichier swf]
Adobe a renforcé la protection autour de FlashPlayer. Une animation ne peut pas accéder au contenu de fichiers se trouvant sur un autre domaine que celui de l'animation, à moins que l'autorisation soit explicitement formulée par le biais d'un fichier de 'crossdomain'. Ce fichier (crossdomain.xml) indique qu'un domaine permet partiellement ou totalement la lecture de ses fichiers depuis un SWF présent sur un autre domaine.
Même sans fichier de crossdomain, un fichier mp3 peut être chargé (et lu) depuis un serveur distant. Mais le SWF génèrera une erreur de 'Policy' lors de la tentative de lecture des infos ID3 du fichier mp3.
Lors de l'accès d'un fichier sur un autre serveur que celui du swf, flash tente de trouver un fichier crossdomain.xml à la racine de ce domaine. Si aucun fichier n'est trouvé, il génèrera un message d'erreur.
Le problème survient si vous tentez de lire un mp3 sur un serveur distant non muni du fichier crossdomain.xml (ou celui ci ne permettant pas la lecture depuis le domaine du SWF), mais surviendra également pour l'accès au fichier de skin. Si le fichier de skin à charger n'est pas sur le même domaine que le swf, le domaine devrait posséder un fichier crossdomain.xml pour permettre la lecture du fichier PNG.
Exemple :
- Le fichier SWF est placé dans une page du domaine A.
- Le fichier MP3 à lire est sur un domaine B.
Le domaine B doit posséder un fichier crossdomain à la racine, sinon les infos ID3 du mp3 ne pourront être lues.
Autre exemple :
- Le fichier SWF est placé dans une page du domaine A.
- Le fichier MP3 à lire est sur un domaine B.
- Le fichier PNG (skin) est sur un domaine C.
Le domaine C doit posséder un fichier crossdomain à la racine, sinon le skin ne pourra pas être chargé et le morceau ne pourra pas être lu.
Le domaine B doit posséder un fichier crossdomain à la racine, sinon les infos ID3 du mp3 ne pourront être lues.
Si le fichier crossdomain.xml n'est pas présent à la racine mais que vous connaissez son chemin complet, vous pouvez le préciser grâce au paramètre 'CrossDomainUrl' (voir partie Intégration).
Copiez coller ce texte dans un fichier que vous nommerez 'crossdomain.xml' et que vous placerez à la racine de votre domaine comportant le fichier de skin ou les mp3. Ou téléchargez directement ce fichier (crossdomain.xml) (clic droit - enregistrer sous) et placez le à la racine de votre domaine.
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy>
<cross-domain-policy>
<allow-access-from domain="*" secure="true" />
</cross-domain-policy>
Si vous voulez n'authoriser qu'un domaine en particulier à lire vos fichiers depuis une appli flash, précisez le en remplacant le joker (étoile) qui est la valeur du paramètre 'domain' de la balise 'allow-access-from' par le nom du domaine à authoriser.
Voilà vous savez tout ce qu'il faut pour intégrer et paramètrer Minimalist Mp3 player pour votre site, n'hésitez pas à m'envoyer vos skins, remarques, critiques etc. à cette adresse : 'admin [at] darokin . info' ou en postant un commentaire sur la news correspondante.
:: 9/06/2026 :: 12:38 :: visites depuis le 29/01/07 ::
darokin '06
: