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 MP3, placez-le sur votre site et suivez les instructions ci-dessous afin d'ajouter le lecteur audio MP3 à votre site !

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 code HTML dans vos pages .html, .php ou autre.

Les couleurs de votre lecteur audio MP3 ainsi que la playlist sont entièrement paramétrables.

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. Utilisez le générateur de code pour personaliser votre player MP3, copiez/collez le code généré sur votre page web en vérifiant le chemin vers la playlist .xml !



Code XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>Sneoplayer</title>
</head>

<body id="sneobody">
<object data="" height="410" id="sneoplayer" name="sneoplayer" type="application/x-shockwave-flash" width="600">
  <param name="movie" value="sneoplayer.swf" />
  <param name="flashvars" value="" />
  <param name="wmode" value="transparent" />
</object>
</body>
</html>

Code swfobject

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>Sneoplayer</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="swfobject.js"></script>

<!-- Import des ressources nécessaires, librairie swfobject -->
<script type="text/javascript" src="swfobject.js"></script>
            
<script type="text/javascript">
<!-- 
var flashvars = {};



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

var attributes = {};

attributes.id = "player_sneoplayer";
attributes.name = "player_sneoplayer"; 
swfobject.embedSWF("", "player_sneoplayer", "600", "410", "9.0.0","expressInstall.swf", flashvars, params, attributes); 
    
// -->
</script>

</head>

<body id="sneobody">
    <div id='player_sneoplayer'></div>  
</body>
</html>

Playlist

Sneoplayer prend en compte le format de playlist standard XSPF

Vous avez donc la possibilité de fournir les titres, numéros de piste et nom des artistes pour chaque piste de votre playlist

<?xml version="1.0" encoding="UTF-8"?>
<playlist>
    <trackList>
        <track>
            <!-- le chemin vers votre mp3 -->
            <location>mp3/01 Jeremy Soule - Dragonborn.mp3</location>
            <!-- le titre de votre mp3 -->
            <title>Dragonborn</title>
            <!-- le numéro de piste de votre mp3 -->
            <identifier>1</identifier>
            <!-- le nom de l'auteur de votre mp3 -->
            <creator>Jeremy Soule</creator>
        </track>
        <track>
            <location>mp3/05 - New Years End.mp3</location>
        </track>
        <track>
            <location>mp3/Ramin Djawadi - Main Title.mp3</location>
        </track>
        <track>
            <location>mp3/02 - All Is Violent, All Is Bright.mp3</location>
        </track>
        <track>
            <location>mp3/01 Nightcall (Feat. Lovefoxxx).mp3</location>
        </track>
        <track>
            <location>mp3/01 - Into The Fire.mp3</location>
        </track>
        <track>
            <location>mp3/Una Mattina -01 una mattina.mp3</location>
        </track>
    </trackList>
</playlist>

Reload de la playlist en JS

Vous avez la possibilité d'appeler une fonction permettant de reloader la playlist du flash.

//inclure la librairie JQUERY 
<script src="http://code.jquery.com/jquery.js"></script>

<a id='reloadP'>Reload playlist</a>
<script type="text/javascript">
$(document).ready(function() {
    $('#reloadP').click(function(){
       //appel de la fonction js
      reloadplaylist();
    });
// fonction qui va se charger d'appeler la méthode reloadPlaylist_js qui recharge la playlist XML 
    function reloadplaylist(){
      document.getElementById("player_sneoplayer").reloadPlaylist_js();
    }
});
</script>

Ce code ci-dessus va créer un lien sur lequel sera associé un évenement jquery click.

Au click, la fonction JS reloadplaylist() va être déclanché, ce qui va déclancher l'appel de la fonction qui se trouve dans l'AS3 reloadPlaylist_js().

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)
Couleur de la progress Bar progressBarColor=#279ACF Pour la progress Bar couleur en Hexadécimal
Couleur de la progress Bar - Background progressBarColor_background=#88c7e4 Pour le fond de la progress Bar couleur en Hexadécimal
Couleur du survol playlist rolloverPlaylistColor=#ffffff Pour le fond de la barre de survol de la playlist
Couleur du Volume colorSound=#279acf Pour les icones du volume
Couleur de background du Volume colorSound_background=#cccccc Pour le background des icones du volume
Couleur de grip de la scrollbar colorScroll_grip=#ffffff Couleur de grip de la scrollbar
Couleur de background de la scrollbar colorScroll_background=#cccccc Pour le background de la Scrollbar
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
Lecture en boucle loopsong=true Permet de lire en boucle la piste courante
Auto reload playlist autoReloadPlaylist=true Permet de recharger votre playlist à la fin de chaque lecture d'une piste (non recommandé car va charger votre xml à chaque lecture et surcharger votre serveur ! Préférez la méthode JS )

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 deplacer les ressources dans des dossiers séparés.

 

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.

  • Vous pouvez définir les chemins vers vos fichiers mp3 en Url.
    Ex: http://www.votresite.com/my/song.mp3
  • Vous pouvez définir les chemins vers vos fichiers mp3 en absolue.
    Ex: /my/song.mp3
  • Vous pouvez définir les chemins vers vos fichiers mp3 en relatif.
    Ex: ../../parent/my/song.mp3 ou my/song.mp3
    Le chemin relatif se construit par rapport à l'emplacement de votre fichier html (ou php) qui va inclure sneoplayer.

 

03. Le fond de mon flash est tout blanc, comment supprimer ce fond ?

Il suffit de bien spécifier le param "wmode" en "transparent" :

Avec une intégration classique en object :

<param name="wmode" value="transparent" />

Avec une intégration swfobject :

params.wmode = "transparent";

Changelog

27/07/2013 v.2.1.10

  • On force la lecture pour les mp3 récalcitrants.
  • Ajout du déplacement des textes de la playlist.

25/07/2013 v.2.1.9

  • Correction de l'affichage du titre personnalisé qui ne s'affichait pas dans la playlist, malgré l'avoir mis dans le XML

31/01/2013 v.2.1.8

  • Remplacement des zones de texte TFl apr des zones classiques. Le TFL posait des problèmes de performance inacceptable !!
  • Mise en conformité pour compatibilité avec le configurateur automatique

28/01/2013 v.2.1.7

  • Ajout d'un callback depuis js pour recharger la playlist
  • Ajout d'une variable permettant de reloader à chaque fin de piste la playlist

06/12/2012 v.2.1.6

  • Ajout de l'option loopsong qui permet de répéter indéfiniment la piste courante.

22/08/2012 v.2.1.5

  • Correction du bug de lecture automatique à la fin de lecture d'un piste.
  • Correction du bug sur le changement de couleur du son qui freezait le lecteur.

14/08/2012 v.2.1.4

  • Ajout d'un espace transparent sur la bas de la playlist afin d'éviter que la playlist ne soit pas affiché en entier.

13/08/2012 v.2.1.3

  • Correction chemin playlist.
  • Optimisation de la lecture des pistes avec petite connexion.
  • Correction sur la prise en charge des fichiers MP3 avec accents.

10/08/2012 v.2.1.2

  • Correction Bug sur le volume sonnore après click sur la progress bar.
  • Optimisation de la lecture des pistes avec petite connexion.
  • Ajout gestion de couleur pour le Volume.
  • Ajout gestion de couleur pour la scrollBar.
  • Fix bug graphique sur scrollbar qui descendait trop bas.

10/07/2012 v.2.1.1

  • Ajout de couleur sur le fond de la playlist
  • Nouveau format de playlist supporté : http://xspf.xiph.org/

 

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