Il existe sur le net de nombreux players mp3. Il y en a un que j'affectionne tout particulièrement car il est léger et simple d'utilisation, j'ai nommé le dewplayer (sélectionnez la version multi). Le seul défaut que je lui connaisse est qu'on ne peut pas modifier facilement la playlist en ligne. Il faut forcément entrer dans le code de la page, ce qui n'est pas génial à la longue. Et puis un jour, je suis tombé sur cet article, sur le site all html. Le souci est que la solution donnée ne fonctionne pas très efficacement. J'ai donc pris la liberté de modifier le code pour pouvoir gérer la playlist directement depuis la partie administration d'un site.
la partie administration avec une page pour importer les morceaux et une page pour les gérer,
une page pour le lecteur,
et un contrôle par JavaScript.
Les morceaux seront importés via la page d'import et leur titre sera enregistré dans une base de données avec un identifiant différent pour chaque morceau. La page de gestion nous permettra de déplacer les morceaux dans la playlist, de leur attribuer une catégorie ou de les supprimer de la base (je n'ai pas codé de système permettant d'effacer le fichier mp3 sur le serveur, mais ceux qui le veulent pourront aisément le faire). La page pour le lecteur affichera le lecteur et la playlist en dessous. Il suffira de cliquer sur le titre d'un morceau pour changer celui en cours de lecture. Le nom du morceau en cours s'affichera entre le lecteur et la playlist. Petit défaut : si on utilise les flèches du lecteur, le nom du morceau en cours ne change pas :-° . Mais il suffit d'ouvrir une fenêtre de taille réduite et de faire en sorte que les flèches ne puissent pas être vues. Personnellement, je préfère dédier une page au player car cela permet de pouvoir naviguer tout en ayant de la musique (si cette page est ouverte dans une autre fenêtre grâce au JavaScript).
Enfin, le JavaScript est là aussi pour changer le morceau en cours de lecture sans recharger la page.
Vous pouvez voir le player en fonctionnement en visitant cette page (aucun commentaire quant aux morceaux. Merci. :p ).
Je ne vais pas m'étendre sur la base de données qui est très simple. Elle ne contient que 3 champs : l'identifiant, la catégorie et le titre du morceau.
CREATE TABLE `sons` (
`id_son` int(11) NOT NULL AUTO_INCREMENT,
`categorie` tinytext NOT NULL,
`fichier_son` text NOT NULL,
KEY `id_son` (`id_son`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
La page d'importation des morceaux
Je vous donne le code que je vais commenter au fur et à mesure. Pour simplifier et éviter des redondances dans le code, j'ai placé l'entête de ma page (partie depuis le Doctype jusqu'à la balise <body> incluse) dans une fonction appelée haut(). Cette fonction sera appelée sur toutes nos pages. N'oubliez donc pas de l'inclure avant de l'appeler.
Je vous donne un exemple basique de cette fonction. À vous de l'étoffer comme bon vous semble.
<?php
function haut($titrepage)
{
echo'
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>'.$titrepage.'</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="robots" content="index,follow"/>
<meta name="author" content=""/>
<meta name="contact" content=""/>
<!-- Lien vers la favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/design/icone.ico"/>
<!-- Ci-dessous le design "par défaut" du site -->
<link rel="stylesheet" media="screen" type="text/css" title="design" href="css/design_par_defaut.css" />
<!-- Ci-dessous les designs alternatifs-->
<link rel="alternate stylesheet" media="screen" type="text/css" title="print" href="css/print.css" />
<!-- Javascripts-->
<script type="text/javascript" src="js/fonction_nouvellefenetre.js"></script>
<script type="text/javascript" src="js/controle_player.js"></script>
</head>
<body>
';
}
?>
Même principe pour le bas de page :
<?php
function bas()
{
echo'
<!-- Le pied de page -->
<div id="pied_de_page"></div>
</body>
</html>
';
}
?>
Voici donc le code de la page import_song.
On peut diviser cette page en trois étapes :
l'initialisation des variables et l'appel des différentes fonctions,
lorsqu'on affiche la page pour la première fois, on affiche le formulaire. Bien que cela soit la deuxième étape, cette partie du code sera rédigée en dernier ;
si le formulaire a été complété, on vérifie et on traite le fichier envoyé.
Initiation des variables / fonctions
<?php
//initialisation des variables
$titrepage= 'Envoi de fichier mp3';
require_once('fonctionconnexionbdd.php');
require_once('fonctionshautbas.php');
connexionbdd();
$extensions_ok = array('mp3'); //Pour être sûr que l'on importe uniquement des fichiers mp3
$dest_dossier = '../musique/'; //Le dossier de destination
?>
Affichage du formulaire par défaut
<?php
else//À l'ouverture de la page, on affiche le formulaire
{
haut($titrepage);
echo '
<div id="import" style="margin-top:200px;">
<h1><a href="index.php">'.$titrepage.'</a></h1>
<p style="color:red;">Le fichier n\'est pas un fichier mp3, ou il y a eu un problème lors de l\'importation !</p>
<form method="post" action="import_song.php" enctype="multipart/form-data" style="text-align:center;">
<p>
<label for="categorie">Spectacle:</label>
<select name="categorie" id="categorie">
<option value="pop">Musique Pop</option>
<option value="rock">Musique Rock</option>
<option value="classique">Musique Classique</option>
</select>
<label for="chanson">Chanson (Type .mp3 uniquement) :</label>
<br/>
<br/>
<input type="hidden" name="MAX_FILE_SIZE" value="2097152"/><br/>//Taille maximale 2Mo
<input type="file" name="chanson" id="chanson"/>
<br/><br/>
<input type="hidden" name="soumettre" value="1" />
<input type="submit" name="envoi" value="Envoyer le fichier .mp3" />
</p>
</form>
</div>
';
}
bas();//On ferme les balises html
mysql_close();// On ferme la connexion Mysql
?>
Traitement des données du formulaire
Le code est un peu long mais il est abondamment commenté pour que vous puissiez vous y retrouver, et la dernière partie n'est que l'affichage du formulaire. Donc ne fuyez pas :D .
<?php
if(isset($_POST['soumettre'])) // Si le formulaire est envoyé
{
$categorie=htmlentities(trim($_POST['categorie']),ENT_QUOTES); //Protection des données
$dest_fichier = strtolower($_FILES['chanson']['name']); //récupération du nom du fichier qui a été envoyé
// formatage du nom du fichier
$dest_fichier = str_replace(' ','_',$dest_fichier);
$dest_fichier = str_replace('-','_',$dest_fichier);
$dest_fichier = str_replace("'",''',$dest_fichier);
// enlève les accents
$dest_fichier = strtr($dest_fichier, 'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
$extension=$dest_fichier;
$extension=strtolower(substr(strrchr($_FILES['chanson']['name'],'.'),1));// Récupération de l'extension du fichier pour vérification
if(in_array($extension, $extensions_ok)) //Si l'extension est l'extension attendue
{
$dest_dossier = $dest_dossier.$dest_fichier;
$fichier = str_replace('.'.$extension,'',$dest_fichier); //On supprime l'extension pour n'avoir que le nom du fichier dans la base de données
$resultat =move_uploaded_file($_FILES['chanson']['tmp_name'],$dest_dossier); // On déplace le fichier sur le serveur
if($resultat) //Si tout va bien
{
$sql=mysql_query('INSERT INTO sons VALUES("","'.$categorie.'","'.$fichier.'")')or die(mysql_error()); //On entre les données dans la base
haut($titrepage); // On affiche la page
echo 'Le fichier a bien été importé. Le chemin relatif est : "'.$dest_dossier.'"
<br/>
<br/>
<a href="index.php">Retour à l\'accueil</a>';
}
else
{
haut($titrepage); // On affiche la page
echo'
Il y a eu un problème lors du téléchargement :
<ul>
<li>fichier '.$dest_fichier.'</li>
<li>erreur fichier n'.$_FILES['chanson']['error'].' : ';
switch($_FILES['chanson']['error'])
{
case '1': echo'le fichier a une taille supérieure à 2Mo.'; //Le fichier téléchargé excède la taille de upload_max_filesize, configurée dans le php.ini.
break;
case '2': echo'le fichier a une taille supérieure à 2Mo.'; //Le fichier téléchargé excède la taille de MAX_FILE_SIZE, qui a été spécifiée dans le formulaire HTML.
break;
case '3': echo'le fichier n\'a été chargé que partiellement.';
break;
case '4': echo'aucun fichier n\'a été chargé.';
break;
case '6': echo'échec de l\'écriture du fichier sur le disque.';
break;
case '7': echo'l\'envoi du fichier a été arrêté.';
break;
}
echo'</li>
</ul>
<a href="index.php">Retour à l\'accueil</a>';
}
}
else //Si l'extension n'est pas celle attendue
{
haut($titrepage);//Affichage du formulaire et du message d'erreur
echo '
<div id="import" style="margin-top:200px;">
<h1><a href="index.php">'.$titrepage.'</a></h1>
<p style="color:red;">Le fichier n\'est pas un fichier mp3, ou il y a eu un problème lors de l\'importation !</p>
<form method="post" action="import_song.php" enctype="multipart/form-data" style="text-align:center;">
<p>
<label for="categorie">Spectacle:</label>
<select name="categorie" id="categorie">
<option value="pop">Musique Pop</option>
<option value="rock">Musique Rock</option>
<option value="classique">Musique Classique</option>
</select>
<label for="chanson">Chanson (Type .mp3 uniquement) :</label>
<br/>
<br/>
<input type="hidden" name="MAX_FILE_SIZE" value="2097152"/><br/>//Taille maximale 2Mo
<input type="file" name="chanson" id="chanson"/>
<br/>
<br/>
<input type="hidden" name="soumettre" value="1" />
<input type="submit" name="envoi" value="Envoyer le fichier .mp3" />
</p>
</form>
</div>
';
}
}
?>
En résumé, on vérifie que le formulaire a envoyé un fichier, que l'extension est la bonne, que la taille du fichier est inférieure ou égale à la taille maximale autorisée, que le transfert s'est bien passé, et si tout va bien, on entre le nom et la catégorie du fichier dans la base de données. Sinon, on affiche le formulaire avec éventuellement un message d'erreur.
La page de gestion des morceaux
La page va être séparée en deux parties :
la première va afficher les morceaux par catégorie,
la deuxième va afficher les formulaires.
Le principe
Pour pouvoir afficher les morceaux en fonction de leur catégorie, on va définir 2 variables qui n'ont pas de signification particulière mais qui vont nous permettre de savoir ce que l'on doit afficher. On va les appeler $tmp et $tmp2. Au début de la boucle d'affichage (car oui, nous allons utiliser une boucle), $tmp n'aura pas de valeur particulière et $tmp2 aura pour valeur 0. On a donc :
$tmp = '';
$tmp2 = 0;
Ensuite, $tmp prendra la valeur de chaque catégorie, et $tmp2 sera incrémentée de 1. Je vais vous montrer comment.
Commençons ! :pirate:
Tout d'abord, la requète sql. On demande tous les éléments de la base "sons" définie au début de ce tuto, et on va les classer par catégorie puis par identifiant grâce à ORDER BY. Ce qui nous donne :
$requet=mysql_query('SELECT * FROM sons ORDER BY categorie,id_son') OR die(mysql_error());
Ensuite vient la boucle que l'on va faire avec un while($playlist=mysql_fetch_array($requet)).
Avant de vous donner le code, je vais vous expliquer le principe de cette boucle un peu particulière.
Au premier passage de la boucle, $tmp ne vaut rien et $tmp2 vaut 0 comme nous l'avons précédemment défini.
Grâce à un condition (if), on regarde si $tmp est différent de la première catégorie rencontrée.
Si c'est le cas, $tmp prend la valeur de la catégorie et on affiche le début de la liste (balise <ul>) ; $tmp2 est augmentée de 1.
Si $tmp2 vaut 2, c'est que la catégorie a changé. Donc il faut afficher la fin de la liste (</ul>). On diminue alors la valeur de $tmp2 de 1.
Ensuite on affiche les éléments de la liste, c'est-à-dire les morceaux.
Lorsque le dernier morceau de la base sera affiché, on sortira de la boucle. Il faudra donc clôturer la dernière liste en affichant une ultime balise </ul>.
Après cette brève description, je vous donne le code. Vous y verrez plus clair.
On vérifie tout d'abord si on a des entrées dans la base, et on n'affiche le formulaire que si c'est le cas. Je ne vous détaille pas le formulaire car c'est du html de base que je vous donnerai par la suite. Sachez juste qu'il fonctionne par la méthode POST. Ce formulaire va nous permettre de déplacer ou d'effacer les morceaux dans la base. On placera en début de page les éléments qui nous permettront de réaliser ce que le formulaire ordonne.
Intervertir la place de 2 morceaux
On vérifie que l'on a envoyé par le formulaire les deux identifiants de morceaux à intervertir. Si c'est le cas, on sécurise les données et on récupère la catégorie de chaque morceau dans une variable. Ensuite, on change les morceaux de place.
On procède en trois temps.
D'abord, on change l'identifiant du morceau à modifier et on lui donne pour valeur 10000 (pour être sûr de ne pas effacer un identifiant déjà existant, car ça m'étonnerait que vous ayez une base de 10000 morceaux o_O . Si c'est le cas, augmentez le numéro de l'identifiant d'un multiple de 10.).
Ensuite, on intervertit les morceaux.
Enfin, on donne à l'identifiant 10000 l'ancienne valeur de l'identifiant du deuxième morceau.
Ce qui nous donne en langage informatique :
<?php
if(isset($_POST['id_a_remplacer']) AND !empty($_POST['id_a_remplacer']) AND isset($_POST['new_id']) AND !empty($_POST['new_id']))
{
$id_a_modifier=intval($_POST['id_a_remplacer']);
$new_id=intval($_POST['new_id']);
$requet = mysql_query('SELECT categorie FROM sons WHERE id_son="'.$id_a_modifier.'"') or die(mysql_error());
$requet_a_modifier=mysql_fetch_array($requet);
$cat_a_modifier = $requet_a_modifier['categorie'];
$requet = mysql_query('SELECT categorie FROM sons WHERE id_son="'.$new_id.'"') or die(mysql_error());
$new_requet=mysql_fetch_array($requet);
$new_cat = $new_requet['categorie'];
mysql_query('UPDATE sons SET id_son="10000" WHERE id_son="'.$id_a_modifier.'"') or die(mysql_error());
mysql_query('UPDATE sons SET id_son="'.$id_a_modifier.'", categorie="'.$cat_a_modifier.'" WHERE id_son="'.$new_id.'"') or die(mysql_error());
mysql_query('UPDATE sons SET id_son="'.$new_id.'", categorie="'.$new_cat.'" WHERE id_son="10000"') or die(mysql_error());
echo'
<p>
Les chansons ont été déplacées dans la playlist !
</p>
';
}
?>
Modifier la catégorie ou supprimer un morceau
Pour modifier la catégorie d'un seul morceau, ou supprimer un morceau, je vous donne directement la requête car elle est simple à comprendre.
<?php
if(isset($_POST['id_a_modifier']) AND !empty($_POST['id_a_modifier']) AND isset($_POST['new_categorie']) AND !empty($_POST['new_categorie']))
{
$id_a_modifier=intval($_POST['id_a_modifier']);
$new_categorie = htmlentities(htmlspecialchars($_POST['new_categorie']), ENT_QUOTES);
mysql_query('UPDATE sons SET categorie="'.$new_categorie.'" WHERE id_son="'.$id_a_modifier.'"') or die(mysql_error());
echo'
<p>
La catégorie de la chanson n° '.$id_a_modifier.' a été modifiée !
</p>
';
}
if(isset($_POST['supp']) AND !empty($_POST['supp']))
{
$supp=intval($_POST['supp']);
mysql_query('DELETE FROM sons WHERE id_son="'.$supp.'"')or die(mysql_error());
echo'
<p>
La chanson a été supprimée de la playlist !
</p>
';
}
?>
Le code complet
Comme vous avez été sages, je vous donne le code complet de la page. :p
<?php
require_once('fonctionconnexionbdd.php');
require_once('fonctionshautbas.php');
connexionbdd();
$titrepage= 'Gestion des morceaux';
//--------------------------------------------------------------------------------
//--------------------------------------------------------------------------------
if(isset($_POST['id_a_remplacer']) AND !empty($_POST['id_a_remplacer']) AND isset($_POST['new_id']) AND !empty($_POST['new_id']))
{
$id_a_modifier=intval($_POST['id_a_remplacer']);
$new_id=intval($_POST['new_id']);
$requet = mysql_query('SELECT categorie FROM sons WHERE id_son="'.$id_a_modifier.'"') or die(mysql_error());
$requet_a_modifier=mysql_fetch_array($requet);
$cat_a_modifier = $requet_a_modifier['categorie'];
$requet = mysql_query('SELECT categorie FROM sons WHERE id_son="'.$new_id.'"') or die(mysql_error());
$new_requet=mysql_fetch_array($requet);
$new_cat = $new_requet['categorie'];
mysql_query('UPDATE sons SET id_son="10000" WHERE id_son="'.$id_a_modifier.'"') or die(mysql_error());
mysql_query('UPDATE sons SET id_son="'.$id_a_modifier.'", categorie="'.$cat_a_modifier.'" WHERE id_son="'.$new_id.'"') or die(mysql_error());
mysql_query('UPDATE sons SET id_son="'.$new_id.'", cat="'.$new_cat.'" WHERE id_son="10000"') or die(mysql_error());
echo'
<p>
Les chansons ont été déplacées dans la playlist !
</p>
';
}
if(isset($_POST['id_a_modifier']) AND !empty($_POST['id_a_modifier']) AND isset($_POST['new_categorie']) AND !empty($_POST['new_categorie']))
{
$id_a_modifier=intval($_POST['id_a_modifier']);
$new_categorie = htmlentities(htmlspecialchars($_POST['new_categorie']), ENT_QUOTES);
mysql_query('UPDATE sons SET categorie="'.$new_categorie.'" WHERE id_son="'.$id_a_modifier.'"') or die(mysql_error());
echo'
<p>
La catégorie de la chanson n° '.$id_a_modifier.' a été modifiée !
</p>
';
}
if(isset($_POST['supp']) AND !empty($_POST['supp']))
{
$supp=intval($_POST['supp']);
mysql_query('DELETE FROM sons WHERE id_son="'.$supp.'"')or die(mysql_error());
echo'
<p>
La chanson a été supprimée de la playlist !
</p>
';
}
haut($titrepage);
echo'
<h1><a href="index.php">'.$titrepage.'</a></h1>
<div id="liste_chansons">';
$tmp='';
$tmp2= 0;
$requet=mysql_query('SELECT * FROM sons ORDER BY categorie,id_son') or die(mysql_error());
while($playlist=mysql_fetch_array($requet))
{
if($playlist['categorie'] != $tmp)
{
$tmp = $playlist['spect'];
$tmp2 = $tmp2 + 1;
if($tmp2 === 2)
{
$tmp2 = $tmp2 - 1;
echo'
</ul>
<br/>
';
}
echo'
<span style="text-decoration:underline;">Playlist '.$playlist['categorie'].'</span>
<br/>
<br/>
<ul style="list-style:decimal;">
';
}
echo'
<li>chanson n°<strong>'.$playlist['id_son'].'</strong> : '.$playlist['fichier_son'].'</li>
';
}
echo'
</ul>
<br/>
</div>
<form method="post" action="liste_songs.php">
';
$rekete=mysql_query('SELECT COUNT(*) AS nb_entrees FROM sons') or die(mysql_error());
$compte=mysql_fetch_array($rekete);
if($compte['nb_entrees'] != 0)
echo'
<p><strong>Remplacement</strong></p><hr/>
<table summary="changement">
<tr>
<td>
Remplacer la chanson n° :
</td>
<td>
<input type="text" name="id_a_remplacer" value="" size="2"/>
</td>
</tr>
<tr>
<td>
Par la chanson n° :
</td>
<td>
<input type="text" name="new_id" value="" size="2"/>
</td>
</tr>
</table>
<p><strong>Changement de catégorie</strong></p><hr/>
<table summary="changement">
<tr>
<td>
Changer la catégorie de la chanson n° :
</td>
<td>
<input type="text" name="id_a_modifier" value="" size="2"/>
</td>
</tr>
<tr>
<td>
Par la catégorie :
</td>
<td>
<select name="new_categorie" id="categorie">
<option value="categorieA">Musique Pop</option>
<option value="categorieB">Musique Rock</option>
<option value="categorieC">Musique Classique</option>
</select>
</td>
</tr>
</table>
<p><strong>Suppression</strong></p><hr/>
<table summary="suppression">
<tr>
<td>
Supprimer la chanson n° :
</td>
<td>
<input type="text" name="supp" value="" size="2"/>
</td>
</tr>
</table>
<table summary="Envoi">
<tr>
<td>
<input type="submit" name="submit" value="Envoyer"/>
</td>
</tr>
</table>
</form>
';
bas();
mysql_close();
?>
Pour cela, on fait une requête pour enregistrer, grâce à une boucle, tous les morceaux dans $son. Ensuite, on sépare par une barre verticale les morceaux entre eux (nécessaire pour que le lecteur fonctionne).
Je vous donne le code abondamment commenté une fois encore. Il n'y a rien de bien nouveau mis à part le code du lecteur. Le principe de fonctionnement étant équivalent à celui de la page de gestion.
<?php
//initialisation des variables
$titrepage= 'Lecteur mp3';
require_once('fonctionconnexionbdd.php');
require_once('fonctionshautbas.php');
connexionbdd();
//initialisation et formatage de la variable $son
$son='';
$sql=mysql_query('SELECT * FROM sons ORDER BY id_son') or die(mysql_error());
while($result=mysql_fetch_array($sql))
{
$son.='musique/'.$result['fichier_son'].'.mp3';
}
$son=str_replace('mp3m','mp3|m',$son);
//Pour afficher le nom du morceau par défaut à l'ouverture du player
if (!isset($_GET['fichier']))
{
$sql=mysql_query('SELECT fichier_son FROM sons ORDER BY id_son LIMIT 0,1') or die(mysql_error());
$result=mysql_fetch_array($sql);
$nom=str_replace('.mp3','',$result['fichier_son']);
$nom=str_replace('_',' ',$nom);
}
haut($titrepage);
//Le lecteur
echo'
<div id="lecteur" style="width:240px;text-align:center;">
<div id="content_dew_player" style="margin-top:0px;margin-left:-10px;text-align:center;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="dewplayer" type="application/x-shockwave-flash" data="dewplayer-multi.swf?mp3='.$son.'&autostart=1&showtime=1&bgcolor=B2CC53" height="20" width="240">
<param name="wmode" value="transparent"/>
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="dewplayer-multi.swf?mp3='.$son.'&autostart=1&showtime=1&bgcolor=B2CC53" />
<param name="quality" value="high" />
<param name="bgcolor" value="B2CC53" />
<script type="text/javascript">
<!--
document.write(\'<embed src="dewplayer-multi.swf?mp3='.$son.'&autostart=1&showtime=1&bgcolor=B2CC53" quality="high" bgcolor="B2CC53" width="240" height="20" name="dewplayer" wmode="transparent" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"><\/embed>\');
-->
</script>
</object>
<br/>
'.strtolower($nom).'
</div>
<div id="liste_sons">
';
//Affichage de la liste des morceaux selon le même principe que celui de la page de gestion
$tmp='';
$tmp2= 0;
$requet=mysql_query('SELECT * FROM sons ORDER BY categorie,id_son') or die(mysql_error());
while($playlist=mysql_fetch_array($requet))
{
if($playlist['categorie'] != $tmp)
{
$tmp = $playlist['categorie'];
$tmp2 = $tmp2 + 1;
if($tmp2 === 2)
{
$tmp2 = $tmp2 - 1;
echo'
</ul>
';
}
echo'
<span style="text-decoration:underline;">Playlist '.$playlist['categorie'].'</span>
<ul style="list-style:decimal;height:130px;width:200px;overflow:auto;text-align:left;font-size:small;margin-left:-19px;">
';
}
$morceau = str_replace('.mp3','',$playlist['fichier_son']);
$morceau = str_replace('_',' ',$morceau);
$morceau = str_replace('-',' ',$morceau);
echo'
<li><a href="lecteur.php?fichier='.$playlist['fichier_son'].'.mp3" style="color:#A22E30;text-decoration:none;">'.ucfirst($morceau).'</a></li>
';
}
echo'
</ul>
</div>
';
bas();
mysql_close();
?>
Lorsque l'on clique sur un des liens de la liste, la variable va être passée dans l'adresse de la page, mais c'est le JavaScript -et non le php- qui va la traiter. Ce qui permet de changer de morceau sans recharger la page.
Je vous laisse le soin de la placer dans le répertoire de votre choix. Mais faites attention à bien modifier le chemin relatif dans la fonction haut() que nous avons précédemment définie.
Principe
La fonction teste d'abord si le navigateur prend en charge correctement l'accès au modèle DOM, grâce à la méthode getElementById().
Ensuite, si c'est ok, on récupère, dans une variable liste, la liste des morceaux, (située dans la balise dont l'id est liste_sons sur la page du lecteur), que l'on place ensuite les uns à la suite des autres dans la variable song (après les avoir formatés correctement en ajoutant l'extension du fichier suivie du nom du dossier dans lequel sont placés les morceaux. Ce qui nous donne .mp3|musique/). Dans mon exemple, le dossier musique/ est situé au même niveau (dans le même dossier ou à la racine du site) que la page lecteur.php. Je vous conseille d'en faire autant.
Puis, dès que l'on clique sur un lien, on récupère l'adresse du morceau, qui est du type url=http://etc, on extrait la chaine correspondant à l'adresse seule sans url= (deux étapes), et on place dans une nouvelle variable player, le code du player. Ce code, pour qu'il fonctionne doit tenir sur une seule ligne. L'adresse des morceaux sera donnée par la variable son.
On concatène la variable son à la variable song dans le code du player, de façon à ce que son soit en tête de liste. C'est donc le premier morceau qui sera joué par le player. Ça tombe bien car c'est celui que l'on avait sélectionné sur notre page lecteur.php. :-°
On définit une autre variable pour que le nom du morceau sur lequel on a cliqué s'affiche sous le player. C'est la variable nom_son (original, non ? :p ) qui est en fait la première partie de la variable son.
Il reste quelques modifications à faire sur la variable player pour que tout fonctionne bien ; ensuite, on régénère le code du player sur la page lecteur.php grâce à la propriété innerHTML.
Ce qui nous donne au final :
Le code
function control_player(forms)
{
// Test sur les méthodes
if (!document.getElementById || !document.getElementsByTagName){ return false; }
var song='musique/';
var liste=document.getElementById('liste_sons').getElementsByTagName('a');
for(var j=0; j<liste.length; j++)
{
var li=liste[j].innerHTML;
var song=song+li+'.mp3|musique/';
song=song.replace(' ','_');
}
var referent=document.getElementById('liste_sons');
var liens_son=referent.getElementsByTagName('a');
for (i=0; i<liens_son.length; ++i)
{ liens_son[i].onclick=function()
{
/* Au clic sur le lien, on récupère l'adresse absolue du son. Attention : elle sera du type [url=http://...etc...]http://...etc...[/url] */
var adresse_son=this.href;
// Puis on extrait la chaîne de caractères commençant à la dernière occurrence du caractère =
var pre_son=adresse_son.substring(adresse_son.lastIndexOf("="));
/* Enfin, on extrait du résultat une nouvelle chaîne de caractères commençant à l'index 1 de la précédente. L'index 0 qui correspond au caractère = est donc exclu. La variable son est maintenant opérationnelle. */
var son=pre_son.substring(1);
var nom_son=son.substring(0,son.lastIndexOf("."));
nom_son=nom_son.charAt(0).toUpperCase()+nom_son.substring(1).toLowerCase();
var player="<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0\" id=\"dewplayer\" type=\"application/x-shockwave-flash\" data=\"dewplayer-multi.swf?mp3=musique/"+son+'|'+song+"&autostart=1&showtime=1&bgcolor=B2CC53\" width=\"240\" height=\"20\"><param name=\"movie\" value=\"dewplayer-multi.swf?mp3=musique/"+son+'|'+song+"&autoplay=1\" /><embed src=\"dewplayer-multi.swf?mp3=musique/"+son+'%7C'+song+"&autostart=1&showtime=1&bgcolor=B2CC53\" quality=\"high\" bgcolor=\"B2CC53\" width=\"240\" height=\"20\" name=\"dewplayer\" wmode=\"transparent\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\"><\/embed><\/object><br/>"+nom_son;
player=player.replace('|musique/&','&');
player=player.replace('|musique/&','&');
player=player.replace('|musique/'+son,'');
player=player.replace('|musique/'+son,'');
player=player.replace('%7Cmusique/'+son,'');
/* On régénère complètement le code html du Dewplayer grâce à la propriété innerHTML */
document.getElementById('content_dew_player').innerHTML=player
// On annihile le lien
return false;
}
}
}
//On lance la fonction "control_player()"une fois le chargement de la page effectif
window.onload=control_player;
Voilà. Si vous suivez bien toutes les instructions, vous devriez avoir un lecteur opérationnel. Je pense que le code peut encore être amélioré et je suis preneur de toute nouvelle fonctionnalité ou optimisation.
En espérant vous avoir aidés avec ce deuxième tuto.
Wham. :p
Merci aux zcorrecteurs (Guill@ume et Klouguinette) et à Arconis pour leur aide et leur intransigeance.