Lecteur mp3 multi playlist

Nous allons voir dans ce tutoriel comment créer un player MP3 pour site multi playlist...c'est à dire concevoir une page permettant d'écouter des albums de musiques en affichant un seul et unique lecteur MP3 pour l'ensemble des albums et pour ce faire nous allons utiliser le langage XHTML, CSS et JavaScript pour le concevoir.

Démonstration du player MP3 multi playlist.

Dans un premier temps, téléchargez le zip Dewplayer qui contient entre autre des lecteurs MP3 en Flash. Un fois dé-zippé, ouvrez le dossier et gardez uniquement les fichiers et dossiers suivant :
  • Dossier covers.
  • Dossier mp3.
  • Fichier dewplayer-playlist.swf.
  • Fichier playlist.xml.
Le dossier covers contient les jaquettes des albums.
Le dossier mp3 contient les fichiers mp3.
Le fichier dewplayer-playlist.swf est le lecteur en version Playlist.
Le fichier playlist.xml contient la liste des musiques au format MP3 d'un seul album.

Dans le dossier contenant tout ces éléments, nous allons créer 3 nouveaux fichiers :
  1. Un fichier "index.html".
  2. Un fichier "styles.css".
  3. Un fichier "fonctions.js".
On ouvre le fichier "styles.css" et on y colle le code ci-dessous :
body {
font-family:"Trebuchet MS",Verdana,Helvetica,Arial,"sans-serif";
margin:0;
background:#eee;
}
#content {
width:50%;
margin:auto;
}
.players{
background:white;
padding:5px;
margin:5px;
border:1px solid #DDD;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
overflow:auto;
}
h1,h2{
color:#456;
margin-top:10px;
padding:0 0 20px 10px;
border-bottom:1px solid #ddd;
}
.image{
width:120px;
height:90px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
float: left;
margin:0 6px 6px 0;
}
#bandeau{
position: fixed;
width:250px;
height:100%;
bottom:0;
left:-500px;
background: black;
color:white;
border-right:2px solid #6ea421;
cursor: pointer;
}
#open-player{
position: fixed;
left:-5px;
top:50%;
display:none;
cursor: pointer;
border:1px solid #20BCFF;
background-color:#00C9ED;
color:white;
font-size:15px;
text-decoration:none;
padding:6px;
height:100px;
line-height:100px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#centrer{
text-align:center;
margin:5px;
}
#covers{
width:120px;
height:90px;
margin:5px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.button{
float:left;
border:1px  solid #6ea421;
background-color:#7ebc22;
color:white;
font-size:15px;
text-decoration:none;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
cursor: pointer;
}
#close-player{
position: absolute;
right:0;
top:50%;
cursor: pointer;
border:1px solid #6ea421;
background-color:#7ebc22;
color:white;
font-size:15px;
text-decoration:none;
padding:6px;
height:100px;
line-height:100px;
border-radius:3px 0 0 3px;
-moz-border-radius:3px 0 0 3px;
-webkit-border-radius:3px 0 0 3px;
}
#playlist{
margin:30px 5px;
}
Nous reviendrons sur l'utilisation de certains style CSS au fur et à mesure de la progression du tutoriel.

A présent, passons au fichier "index.html" dont la structure de base est la suivante :
<!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>Multi playlist en JavaScript, CSS et Flash</title>
            <meta name="Description" content="Exemple d'une playlist permettant de charger des albums dans un seul lecteur flash." />
            <script type="text/javascript" src="fonctions.js"></script>
            <link rel="stylesheet" type="text/css" href="styles.css" />
        </head>
 
    <body>
 
        <div id="content">
 
            <h1>Player mp3 Multi playlist en JavaScript, CSS et Flash</h1>
 
    <!-- Emplacement du code -->
 
        </div> <!-- #content -->
 
    </body>
</html>
 Mis en place du premier album :
                <div class="players">
                    <h2>Album 1</h2>
                        <p><img alt="album 1" class="image" src="covers/0.jpg" />Description de l'album 1.</p><a class="button" title="Album 1" onclick="javascript:AFFICHE('playlist.xml','Album 1','covers/0.jpg');">Ecouter</a>
                </div>
La structure pour afficher un album est relativement simple et je vous laisse donc le plaisir de découvrir à quoi correspond chaque class CSS utilisé dans le code ci-dessus.

Comme vous le remarquez, lors du clique sur le bouton "Ecouter" (onclick) une fonction Javascript nommé AFFICHE() est appelé.
onclick="javascript:AFFICHE('playlist.xml','Album 1','covers/0.jpg');"
Cette fonction contient 3 arguments qui fait référence à la playlist utilisé (playlist.xml), au titre de l'album (Album 1) et enfin à la jaquette de l'album (covers/0.jpg).

Nous allons à présent ouvrir le fichier "fonctions.js" et créer la fonction "AFFICHE()".

Comme nous l'avons vu juste avant, 3 arguments sont appelés dans cette fonction. Nous allons donc y faire référence dans la fonction ci-dessous :
function AFFICHE(player, titre, jacket){
 
}
player = playlist.xml
titre = Album 1
jacket = covers/0.jpg

Nous allons donc via cette fonction, appeler le code du lecteur flash dans lequel nous allons faire passer le fichier "playlist.xml".
function AFFICHE(player, titre, jacket){
    //affichage des éléments player + titre + jacket
     document.getElementById('playlist').innerHTML = '<object type="application/x-shockwave-flash" data="dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-playlist.swf" /><param name="flashvars" value="showtime=true&autostart=true&autoreplay=true&volume=100&xml='+player+'" /></object>';
}
 A cela nous ajoutons l'affichage du titre de l'album
function AFFICHE(player, titre, jacket){
    //affichage des éléments player + titre + jacket
     document.getElementById('playlist').innerHTML = '<p><strong>'+titre+'</strong></p><object type="application/x-shockwave-flash" data="dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-playlist.swf" /><param name="flashvars" value="showtime=true&autostart=true&autoreplay=true&volume=100&xml='+player+'" /></object>';
}
 Puis la jaquette de l'album :
function AFFICHE(player, titre, jacket){
    //affichage des éléments player + titre + jacket
     document.getElementById('playlist').innerHTML = '<p><strong>'+titre+'</strong></p><object type="application/x-shockwave-flash" data="dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-playlist.swf" /><param name="flashvars" value="showtime=true&autostart=true&autoreplay=true&volume=100&xml='+player+'" /></object><br/><img alt="'+titre+'" id="covers" src="'+jacket+'" />';
}
 Notez au passage l'id  id="covers" qui est associé à la class css #covers.

A ce stade, la fonction fait appel à tout les éléments et est fonctionnelle, reste plus qu'à savoir ou afficher tout ça... Dans la feuille de style, nous utilisons une class css nommé "#bandeau" qui permet d'afficher un bandeau fixe sur le côté gauche de la page et qui est caché via le style "left:-500px;". Nous allons donc faire appel à ce bandeau pour qu'il soit affiché lors de la sélection de l'album en utilisant un style à gauche de zéro pixel :
    //ouverture du bloc contenant le player
    var teste = document.getElementById('bandeau').style.left='0px';
 Soit :
function AFFICHE(player, titre, jacket){
    //affichage des éléments player + titre + jacket
    document.getElementById('playlist').innerHTML = '<p><strong>'+titre+'</strong></p><object type="application/x-shockwave-flash" data="dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-playlist.swf" /><param name="flashvars" value="showtime=true&autostart=true&autoreplay=true&volume=100&xml='+player+'" /></object><br/><img alt="'+titre+'" id="covers" src="'+jacket+'" />';
    //ouverture du bloc contenant le player
    var teste = document.getElementById('bandeau').style.left='0px';
}
Étant donné que la class #bandeau utilise également le style width:250px; , le bandeau occupera donc une largeur de 250 pixels à partir du bord gauche de la page .

La fonction fait également appel à l'élément "playlist" qui correspond au style CSS #playlist :
document.getElementById('playlist').innerHTML
C'est donc dans cet élément que sera affiché l’entièreté de la playliste (titre, jaquette, lecteur) lui même affiché par l'ouverture du bandeau... oui je sais, je vous donne mal au crane et ce n'est pas finit !

Nous revenons à présent sur la page "index.html" et nous allons mettre en place l'affichage du player.

Sous la balise :
 </div> <!-- #content -->
 Insérez le code suivant :
            <!-- Affichage/fermeture du player -->
        <div id="bandeau">
                <div id="centrer">
                    <span id="playlist">Chargement en cours...</span>
                </div><!-- #centrer -->
        </div><!-- #bandeau -->
 Si vous faites un teste en cliquant sur le bouton "Ecouter", le bandeau doit théoriquement s'ouvrir sur la gauche et lancer l'album automatiquement :).

A ce stade, nous pouvons donc à la sélection de l'album lancé la lecture de celui-ci qui va s'afficher dans un bandeau. Ce bandeau étant ouvert et occupant 250 pixels de large, il serait judicieux d'y placer un bouton permettant à l'internaute de rétracter celui-ci pour une meilleurs navigation et c'est ce que nous allons faire!

Réfléchissons 2 minutes...
Un bouton de fermeture du bandeau doit s'afficher uniquement quand celui-ci est ouvert.
Un bouton d'ouverture du bandeau doit s'afficher uniquement quand le bandeau est fermé et qu'une lecture est en cours.
Aucun des 2 boutons ne doit être affichés si aucune lecture n'a été lancé.

Dans la page "index.html" au niveau de l'affichage du bandeau, nous allons ajouter un bouton de fermeture :
<a id="close-player" onclick="javascript:closeplayer();" title="Fermer le player">«</a>
Soit :
            <!-- Affichage/fermeture du player -->
        <div id="bandeau">
            <a id="close-player" onclick="javascript:closeplayer();" title="Fermer le player">«</a>
                <div id="centrer">
                    <span id="playlist">Chargement en cours...</span>
                </div><!-- #centrer -->
        </div><!-- #bandeau -->
Ce bouton fait appel au style css #close-player et à une nouvelle fonction JavaScript nommé closeplayer() lancé lors du clique sur le bouton de fermeture que nous allons voir tout de suite.

Ouvrez de nouveau le fichier "fonctions.js" et insérez-y le code suivant :
function closeplayer(){
    //fermeture du bloc contenant le player
    var teste1 = document.getElementById('bandeau').style.left='-500px';
    //si l'objet est égal à -500px
    if(teste1 == '-500px'){
        // on montre le bouton d'ouverture du player
        document.getElementById('open-player').style.display='block';
    }
}
Cette fonction permet dans un premier temps de caché le bandeau en le décalent de -500 pixels vers la gauche ce qui aura pour but de faire "sortir" celui-ci du cadre de la page.
Dans un second temps, on teste si l'objet est bien égal à "-500px" pour afficher un second bouton qui va permettre la réouverture du bandeau en faisant appel au style css #open-player.

Nous revenons sur la page "index.html" pour insérer le bouton d'ouverture qui sera placé sous la balise </div><!-- #bandeau --> :
<a id="open-player" onclick="javascript:openplayer();" title="Ouvrir le player">»</a>
Soit :
            <!-- Affichage/fermeture du player -->
        <div id="bandeau">
            <a id="close-player" onclick="javascript:closeplayer();" title="Fermer le player">«</a>
                <div id="centrer">
                    <span id="playlist">Chargement en cours...</span>
                </div><!-- #centrer -->
        </div><!-- #bandeau -->
 
            <a id="open-player" onclick="javascript:openplayer();" title="Ouvrir le player">»</a>
Ce bouton fait appel au style css #open-player et à une nouvelle fonction JavaScript nommé openplayer() lancé lors du clique sur le bouton d'ouverture que nous allons voir tout de suite.

Ouvrez de nouveau le fichier "fonctions.js" et inserez-y le code suivant :
function openplayer(){
    //ouverture du bloc contenant le player
    var teste2 = document.getElementById('bandeau').style.left='0px';
    //si l'objet est égal à 0px
    if(teste2 == '0px'){
        // on cache le bouton d'ouverture du player
        document.getElementById('open-player').style.display='none';
    }
}
Cette fonction permet dans un premier temps d'afficher le bandeau en le repositionnant à partir du bord gauche de la page.
Dans un second temps, on teste si l'objet est bien égal à "0px" pour masquer le bouton d'ouverture.

Le bouton d'affichage et de masquage du player est à présent fonctionnel mais il demeure une "anomalie"... Si un album est lancé et que le bandeau est fermé et que l'on lance un nouvel album en cliquant su le bouton "Ecouter", le bouton d'ouverture du player reste affiché. Pour contrer cela, on ajoute un teste dans la fonction AFFICHE() du fichier "fonctions.js" qui va vérifier si le bandeau est ouvert et masquer le bouton d'ouverture :
    //si l'objet est égal à 0px
    if(teste == '0px'){
        // on cache le bouton d'ouverture du player
        document.getElementById('open-player').style.display='none';
    }
Soit à la final :
function AFFICHE(player, titre, jacket){
    //affichage des éléments player + titre + jacket
    document.getElementById('playlist').innerHTML = '<p><strong>'+titre+'</strong></p><object type="application/x-shockwave-flash" data="dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-playlist.swf" /><param name="flashvars" value="showtime=true&autostart=true&autoreplay=true&volume=100&xml='+player+'" /></object><br/><img alt="'+titre+'" id="covers" src="'+jacket+'" />';
    //ouverture du bloc contenant le player
    var teste = document.getElementById('bandeau').style.left='0px';
    //si l'objet est égal à 0px
    if(teste == '0px'){
        // on cache le bouton d'ouverture du player
        document.getElementById('open-player').style.display='none';
    }
}

Comment ajouter un album?

Pour ajouter un album c'est très simple. Vous ajoutez sur votre page "index.html" un nouvel "emplacement" sur lequel vous changez simplement les données :
                <div class="players">
                    <h2>Album 2</h2>
                        <p><img alt="album 2" class="image" src="covers/2.jpg" />Description album 2.</p><a class="button" title="Album 2" onclick="javascript:AFFICHE('playlist2.xml','Album 2','covers/2.jpg');">Ecouter</a>   
                </div>
Puis vous créez un nouveau fichier "xml" (playlist2.xml) sur la même base que le fichier d'origne (playlist.xml) dans lequel vous changez les informations relatifs à l'album.

Exemple d'un fichier XML (playlist2.xml) simplifié :
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
 
    <trackList>
        <!-- Première musique -->
        <track>
          <location>mp3/test1.mp3</location>
          <title>La Moldau (Vltava)</title>
        </track>
        <!-- Seconde musique -->       
        <track>
          <location>mp3/test2.mp3</location>
          <title>La Symphonie du Nouveau Monde</title>
        </track>
        <!-- Troisième musique -->
        <track>
          <location>mp3/test3.mp3</location>
          <title>Le Hussard sur le Toit</title>
        </track>
 
    </trackList>
</playlist>
Dans cet exemple on ne garde que l'url du fichier MP3 et son titre pour chaque musique mais vous pouvez garder l'ensemble des informations de ce fichier si vous le souhaitez.

Chaque album doit posséder son propre fichier XML et aucun de ces fichiers ne doit porter le même nom si ils sont placés au même endroit!

Libre à vous de créer un dossier pour chaque album, de changer la disposition, etc...  
Voir/déposer un commentaire (3) | Signaler un problème