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 src="../../../votre/chemin/jquery.jplayer.min.js"></script> <script 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>
//<![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"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </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> </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.
