Sneoplayer est un lecteur mp3 en Flash pour sites web avec Playlist XML, facile à utiliser et léger

Mini 300x60

Playlist 300x230

Téléchargez le player Flash, placez-le sur votre site et suivez les instructions ci-dessous afin d'ajouter le lecteur à votre site !
Je crée aussi des lecteurs professionnels sur mesure.

Le fichier Flash .swf est à placer sur votre site web (par FTP) avec les fichiers .mp3 et la playlist .xml (dans des répertoires ou non) .

Placez le codes HTML dans vos pages .html, .php ou autre.

Les couleurs de votre lecteur sont entièrement configurable via des variables Flash. Vous pouvez ainsi modifier la couleur des boutons, des fonds, des textes ...

Instructions et exemples de code HTML

01. Téléchargez l'archive zip tout-en-un

02. Transférez le fichier .swf du lecteur que vous désirez utiliser sur votre site

03. Renseignez votre fichier playlist.xml suivant le modèle fournit dans l’archive zip

04. Copiez-collez le code HTML sur votre page web en vérifiant le chemin vers la playlist .xml.

<object data="sneoplayer.swf" height="200" id="sneoplayer" name="sneoplayer" type="application/x-shockwave-flash" width="400">
  <param name="movie" value="sneoplayer.swf" />
  <param name="flashvars" value="urlXML=playlist.xml" />
  <param name="wmode" value="transparent" />
</object>

Je vous conseille cependant d’utiliser la librairie swfobject pour insérer le flash

<!-- Import des ressources nécesaires, librairie swfobject -->
<script type="text/javascript" src="swfobject.js"></script>
			
<script type="text/javascript">
<!-- 
var flashvars = {};
  flashvars.urlXML= "playlist.xml"; // url de votre fichier xml playlist
  flashvars.autoplay= "false"; // joue automatiquement dès que le 1er fichier est chargé
  
  flashvars.textColor= "#000000";  // Applique une couleur aux textes
  flashvars.textColor2= "#9A9EA0";  // Applique une couleur aux textes artiste et temps total
  flashvars.textColor3= null;  // Applique une couleur aux textes de la playlist
  
  flashvars.buttonColor= "#279acf";  // Applique une couleur aux boutons de navigation et fond
  flashvars.buttonColor2= "#FFFFFF";  // Applique une couleur icones des boutons 
  
  flashvars.disBrowserScroll= "false";  // à mettre à false en local car sinon la sécurité flash vous bloquera.

var params = {};
  params.menu = "false"; 

var attributes = {};

attributes.id = "sneoplayer_ID";
attributes.name = "sneoplayer_NAME"; 
swfobject.embedSWF("sneoplayer.swf", "player_sneoplayer", "320", "230", "9.0.0","expressInstall.swf", flashvars, params, attributes); 
	
// -->
</script>
<div id='player_sneoplayer'></div>

Options

Toutes ces options peuvent être mentionnées dans flashvars="option1=valeur1&option2=valeur2"

Playlist	urlXML=/chemin/vers/playlist.xml	Le chemin doit être valide et sur votre domaine
Lecture automatique	autoplay=true	Valeur par défaut false
Couleur du texte	textColor=#000000	Couleur en Hexadécimal (ici #000000 = Noir, #ffffff = Blanc)
Couleur du texte	textColor2=#000000	Pour les éléments artiste et temps total, couleur en Hexadécimal (ici #000000 = Noir, #ffffff = Blanc)
Couleur du texte	textColor3=#000000	Pour les textes de la playlist, couleur en Hexadécimal (ici #000000 = Noir, #ffffff = Blanc)
Couleur du bouton	buttonColor=#279acf	Pour les éléments de navigation et de fond, couleur en Hexadécimal (ici #000000 = Noir, #ffffff = Blanc)
Couleur du bouton	buttonColor2=#FFFFFF	Pour les icones des éléments de navigation, couleur en Hexadécimal (ici #000000 = Noir, #ffffff = Blanc)
Scroll	disBrowserScroll=true	A mettre à false en local car sinon la sécurité flash vous bloquera. Cette option vous permet de bloquer le scroll du navigateur lorsque vous survolez le Flash

FAQ

01. Doit on mettre Sneoplayer à la racine ?

Non, il n'est pas nécessaire de mettre le fichier .swf à la racine de votre site. Vous pouvez télécharger cet exemple dans lequel j'ai deplacé les ressources dans des dossiers séparés.

<!-- Import des ressources nécesaires, librairie swfobject -->
<script type="text/javascript" src="js/swfobject.js"></script>
			
<script type="text/javascript">
<!-- 
var flashvars = {};
  flashvars.urlXML= "sneoplayer/playlist.xml"; // url de votre fichier xml playlist
  flashvars.autoplay= "false"; // joue automatiquement dès que le 1er fichier est chargé
  
  flashvars.textColor= "#000000";  // Applique une couleur aux textes
  flashvars.textColor2= "#9A9EA0";  // Applique une couleur aux textes artiste et temps total
  flashvars.textColor3= null;  // Applique une couleur aux textes de la playlist
  
  flashvars.buttonColor= "#279acf";  // Applique une couleur aux boutons de navigation et fond
  flashvars.buttonColor2= "#FFFFFF";  // Applique une couleur icones des boutons 
  
  flashvars.disBrowserScroll= "false";  // à mettre à false en local car sinon la sécurité flash vous bloquera.

var params = {};
  params.menu = "false"; 

var attributes = {};

attributes.id = "sneoplayer_ID";
attributes.name = "sneoplayer_NAME"; 
swfobject.embedSWF("sneoplayer/sneoplayer.swf", "player_sneoplayer", "320", "230", "9.0.0","expressInstall.swf", flashvars, params, attributes); 
	
// -->
</script>
<div id='player_sneoplayer'></div>

02. Comment définir le chemin des fichiers MP3 dans le fichier playlist.xml ?

Pour défnir le chemin vers vos fichiers MP3, vous devez connaitre évidement le chemin physique de vos fichiers.

Ceux ci peuvent être en absolue, c'est dire qu'ils seront déterminés en fonction de la racine de votre site, ils commenceront donc par un / (slash) : Ex: /ressources/mp3/
Ils peuvent aussi être en relatif. Le chemin relatif se construit par rapport à l'emplacement de votre fichier html (ou php) qui va inclure sneoplayer. Si le fichier html se trouve dans un répertoire par exemple /pageHTML/fichier.html et que vos ressources MP3 se trouvent dans le répertoire /ressources/mp3/, vous devrez dans le fichier xml définir les chemins comme suit : ../ressources/mp3/ ../ indique que vous souhaitez retourner de 1 dossier en arrière dans votre arborescence. Vous pouvez évidement en mettre autant qu'il sera nécessaire (ex ../../../ressources/mp3/)

Copyright

Sneoplayer est sous licence Creative Commons. Son utilisation est libre et gratuite même dans un cadre professionnel ou commercial.

Compatibilité : tous les navigateurs (Internet Explorer, Mozilla Firefox, Opera, Apple Safari, Google Chrome, etc).

Vous êtes ici