Vous êtes à Accueil > Nos techniques > Jouer un disque

Passer le menu Aller au pied de page

Licences Joueb English version Accessibilité

Jouer un disque à l’aide de jPlayer

micr0lab emploie jPlayer en complément de la balise <audio> d'html5 et du lecteur flash dewplayer. Pour voir une démonstration, filez vers le lecteur.

Ce lecteur de fichier audios (et vidéos !) est hautement compatible (presque tous les navigateurs, presque tous les formats), hautement personnalisable (grâce au css) et permets la mise en place de liste de lectures. Et bien sûr il est libre.

Le guide du développeur étant très (trop ?) complet et en anglais, nous vous proposons ici quelques astuces qui ne remplacent pas la lecture attentive du code source des démonstrations mis à votre disposition sur la page de jPlayer.

Sommaire : Mise en placePersonnalisation par micr0labDiverses notes complémentaires

 

Mise en place

Il vous faut tout d’abord télécharger la dernière version de jPlayer, la 2.9.2. au moment où est rédigée cette note (disponible à cette adresse).

Placez les fichiers dist/jplayer/jquery.jplayer.swf, dist/jplayer/jquery.jplayer.min.js (et dist/add-on/jplayer.playlist.min.js si vous comptez mettre en place une liste de lecture) dans le dossier de votre choix sur votre serveur (nous supposerons par la suite que ces fichiers sont accessibles par le chemin /votre/chemin/). Nous supposons que dans ce dossier se trouvent également les fichiers style.css et habit.jpg qui personnalisent votre lecteur (vous pouvez prendre ceux de micr0lab, Blue Monday ou Pink Flag).

Créez un fichier html ou php dans le dossier de votre choix, nous supposerons que ce fichier est à /un/autre/chemin/lecteur.php. Commencez par renseigner les balises habituelles (doctype, balises html, etc.), chargez la bibliothèque jQuery puis indiquez dans la tête de votre document (entre les balises <head>) :

<script type="text/javascript" src="../../../votre/chemin/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="../../../votre/chemin/jplayer.playlist.min.js"></script>
<link href="../../../votre/chemin/style.css" rel="stylesheet" type="text/css"/>

Notez qu'on emploie ici des adresses relatives : nous descendons trois dossiers (../../../), puis remontons dans le dossier votre et ainsi de suite. Ce n'est bien évidemment pas obligatoire, vous pouvez également employer un script php qui se charge de calculer pour vous le chemin vers la racine ou indiquer l’adresse absolue.

Nous supposons que vous voulez mettre en place un lecteur avec deux titres au format oggnote, titre1.ogg et titre2.ogg, qui se trouvent à /un/autre/chemin/musique/. Le premier titre peut être téléchargé, mais pas le second (champ free), la lecture démarre automatiquement (autoPlay: true,), le lecteur passe en flash si la balise audio du html5 n'est pas supportée (solution: "html, flash",). Insérez ce code entre vos balises <head> :

<script type="text/javascript">
        //<![CDATA[
                $(document).ready(function(){
                        new jPlayerPlaylist({
                                        jPlayer: "#jquery_jplayer_1",
                                        cssSelectorAncestor: "#jp_container_1"
                                }, [
                                        {
                                                title:"Le premier titre",
                                                artist:"Artiste artiste1",
                                                free:true,
                                                ogg:"musique/titre1.ogg"
                                        },
                                        {
                                                title:"Le second titre",
                                                artist:"Artiste artiste2",
                                                free:false,
                                                ogg:"musique/titre2.ogg"
                                        }
                                        ], {
                                                playlistOptions: {
                                                        autoPlay: true,
                                                },
                                                swfPath: "../../../votre/chemin/",
                                                supplied: "ogg",
                                                solution: "html, flash",
                                                wmode: "window"
                                        });
                });
        //]]>
</script>

Voilà, il ne vous reste plus qu’à insérer le code suivant entre vos balises <body> :

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
        <div class="jp-type-playlist">
                <div class="jp-gui jp-interface">
                        <div class="jp-controls">
                                <button class="jp-previous" role="button" tabindex="0" title="Précédent">Précédent</button>
                                <button class="jp-play" role="button" tabindex="0" title="Jouer">Jouer</button>
                                <button class="jp-next" role="button" tabindex="0" title="Suivant">next</button>
                                <button class="jp-stop" role="button" tabindex="0" title="Stop">stop</button>
                        </div>
                        <div class="jp-progress">
                                <div class="jp-seek-bar">
                                        <div class="jp-play-bar"></div>
                                </div>
                        </div>
                        <div class="jp-volume-controls">
                                <button class="jp-mute" role="button" tabindex="0" title="Sourdine">Mettre en sourdine</button>
                                <button class="jp-volume-max" role="button" tabindex="0" title="Volume Maximum">Volume au max</button>
                                <div class="jp-volume-bar">
                                        <div class="jp-volume-bar-value"></div>
                                </div>
                        </div>
                        <div class="jp-time-holder">
                                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                        </div>
                        <div class="jp-toggles">
                                <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                                <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                        </div>
                </div>
                <div class="jp-playlist">
                        <ul>
                                <li>&nbsp;</li>
                        </ul>
                </div>
                <div class="jp-no-solution">
                        <span>Aïe! Le lecteur ne fonctionne pas !</span>
                        <p>Peut-être pouvez-vous tenter de télécharger <a href="http://get.adobe.com/flashplayer/" title="Redirige vers un autre site, attention aux conditions d'utilisation!">le greffon <em>flash</em></a> ? Sinon, vous pouvez <a href="/un/autre/chemin/musique/" title="Directement l’index.">accéder à la liste des titres</a>.</p>
                        </div>
                </div>
        </div>
</div>

Si vous ne voulez pas qu’apparaîsse la possibilité de jouer la liste de lecture dans un ordre aléatoire ou de répéter un ou plusieurs titres, commentez de <div class="jp-toggles"> à la balise </div> correspondante.

Notez que dans ce code, si aucune des solutions ne fonctionne (ni html, ni flash), nous renvoyons le visiteur vers le dossier /un/autre/chemin/musique/, où il pourra accéder directement au contenu du répertoire contenant vos titres.

 

Personnalisations

micr0lab a personnalisé ce lecteur en modifiant le fichier css et le fichier image du skin « Blue Monday » (à savoir jplayer.blue.monday.css et jplayer.blue.monday.jpg). Le fichier jplayer.playlist.min.js a également été personnalisé, afin de traduire les « by » par des « par », et d'ajouter un titre aux liens. À noter également que le code html à insérer entre les balises <body> qui précède a été françisé.

Ces fichiers sont distribués sous double licence G.P.L. et MIT.

 

Notes diverses

  1. Soyez vigilants si vous proposez le format mp3 : le plugin d’Adobe flash ne supporte que les taux d’encodages multiples de 11,025Hz. Ainsi par exemple 22,050Hz et 44,100Hz sont des fréquences d’échantillonnages valides (source).

Contact :

Contact Plan Lettre F.a.q. C.G.U.