Playlist avec les balises HTML5 audio

Télécharger le projet
Commenter

Description

Présentation

Bonjour, je mets en téléchargement un objet Php permettant de placer sur votre site une playlist html5 sans flash.
Le principe est de placer un lecteur avec les balises audio que l'on rafraichit avec de l'ajax. On peut générer cette playlist de deux façons differentes soit en plaçant vos musiques dans le dossier "musique/" du dossier "Htm5Playlist/", soit en renseignant deux Array, un contenant les liens vers vos fichiers et un autre les titres de vos chansons.
C'est très simple, facilement manipulable.

Mise en place

Il suffit de télécharger sur cette page le zip contenant le dossier "Htm5Playlist/" et de le placer dans un dossier X de votre serveur web.

Intégration

Pour réaliser l'exemple qui va suivre nous placerons un fichier de test dans le même dossier X que celui ou nous avons placé le dossier "Htm5Playlist/". Il suffit de quelques lignes de codes, vous allez voir c'est très simple. Le fichier "index.php" au côté du dossier "Htm5Playlist/" contient le code présentér ici, il permet de tester le fonctionnement du système sur votre serveur.

Pour plus de détailles: http://dariumis.fr/partage.php?clef=2_1417383073_0173
voir ce que ça donne: http://dariumis.fr/ext/ 

<?php
/**
 * Ce code php sert à placer une playliste ou plusieurs playlist sur une page web.
 * Cette playlist fonctionne grace au html5, on place un lecteur avec les balises audio
 * que l'on rafraichit avec de l'ajax. On peut générer cette playliste de deux
 * façons differentes soit en plaçant vos musiques dans le dossier "musique" du dossier
 * "Htm5Playlist", soit en renseignant deux Array, un contenant les liens vers vos fichiers
 * un autre les titre de vos chansons.
 * 
 * Dans l'exemple qui va suivre ce fichier ce trouve dans le même dossier que le 
 * dossier "Htm5Playlist";
 */
//on inclut l'objet contenant la playliste, prenez garde à renseigner le chemin 
//exacte vers ce fichier
include 'Htm5Playlist/PlayList.php';
?>
<!DOCTYPE html>
<html>
    <head>
        <title>htm5Playlist</title>
        <meta charset="utf-8"/>
        <!-- On inclut un fichier javascript , prenez garde à renseigner le chemin 
        exacte vers ce fichier -->
        <script type="text/javascript" language="Javascript" src="Htm5Playlist/traitement/fonction.js"></script>
    </head>
    <body>
        <?php
        /* On déclare l'objet Playlist($path) avec comme paramètre le chemin
         * vers la racine du dossier Htm5Playlist/, prenez garde à renseigner le chemin 
          exacte */
        $playList = new PlayList("Htm5Playlist/");
 
        //*******************************
        // version 1: depuis le dossier musique!
        //*******************************
        //on écrit simplement la playliste généré par le dossier "musique" grâce à 
        //la fonction getDossierMusique($id);, 
        //on place simplement l'id de votre choix en paramètre.
        echo $playList->getDossierMusique("playListDossier");
 
 
        //*******************************
        // version 2: par des Array!
        //*******************************
        //on renseigne deux Arrays, un pour les chemins vers les musiques à lire, 
        //un deuxième pour les titres.
        $chemin[0] = "http://dariumis.fr/lesMp3/1412862486_4166.mp3";
        $titre[0] = "titre 1";
        $chemin[1] = "http://dariumis.fr/lesMp3/1411336191_6685.mp3";
        $titre[1] = "titre 2";
        //on place simplement la playliste généré par les Arrays grâce à 
        //la fonction getArray($id, $chemin, $titre).
        // Les paramètres de cette fonction sont dans l'ordre:
        //---- l'id de votre playlist
        //---- l'Array contenant les chemins
        //---- l'Array contenant les titres
        echo $playList->getArray("depuisArray", $chemin, $titre);
        ?>
    </body>
</html>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (dariumis)