Gérer la playlist du dewplayer en ligne

OpenClassrooms

Formation

En Semi-présenciel Paris

Prix sur demande

Description

Typologie

Formation
Méthodologie

En semi-présentiel

Lieu

Paris

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Paris ((75) Paris)

Voir plan

7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Tous
Aux étudiants
À l'établissement

Saisissez vos coordonnées pour recevoir une réponse

J'accepte la Politique de confidentialité et les Conditions.

Nous ne publierons que votre nom et votre question

Emagister S.L. (responsable du traitement) traitera vos données pour mener des actions promotionnelles (par e-mail et/ou téléphone), publier des avis ou gérer des incidents. Vous pouvez consulter vos droits et gérer votre désinscription dans la politique de confidentialité.

Les Avis

Le programme

Introduction du cours

Salut les Zér0s.

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.

Pour suivre ce tuto, il vous faudra connaître le XHTML, le PHP et le SQL et avoir des notions de javascript (ou ici).

Le principe de fonctionnement

On va distinguer plusieurs parties :

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

La partie administrationLa base de données

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=""/>  <link rel="shortcut icon" type="image/x-icon" href="images/design/icone.ico"/>  <link rel="stylesheet" media="screen" type="text/css" title="design" href="css/design_par_defaut.css" />  <link rel="alternate stylesheet" media="screen" type="text/css" title="print" href="css/print.css" />  <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'  <div id="pied_de_page"></div> </body> </html> '; } ?>

Voici donc le code de la page import_song.

Pour le fonctionnement de l'upload de fichiers par formulaire, je vous invite à lire l'excellent tuto de DHKold.

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

Je vous rappelle que c'est en fait la dernière partie du code (bien que son résultat s'affiche en premier).

<?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

Ceci est la deuxième partie du code. :lol:

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());

Le or die(mysql_error()) nous permet de débugger la requête si l'on fait une erreur d'écriture. Bien pratique... ^^

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.

Gérer la playlist du dewplayer en ligne

Prix sur demande

Gérer la playlist du dewplayer en ligne

Questions / Réponses

Les Avis

Le programme

Ajoutez des cours similaireset comparez-les pour mieux choisir.

Ajoutez des cours similaires
et comparez-les pour mieux choisir.