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.

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 à jour de la librairie jQuerry : depuis que jQuery est passé en version 1.9, la version 2.2 de jplayer ne fonctionne plus — à cause de l’emploi de jQuery.fn.die() et de jQuery.fn.live() —. Une solution — temporaire — consiste à charger le greffon de migration de jQuery, ce qui se fait très simplement :

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>

Sinon, passer à une version ultérieure de jPlayer — la 2.3 par exemple — règle également ce problème !

Mise en place

Il vous faut tout d’abord télécharger la dernière version de jPlayer, la 2.7.0. au moment où est rédigée cette note (disponible à cette adresse). Curieusement, cette version est livrée « nue », sans peau (skin, personnalisation). Vous pouvez télécharger les démonstrations et les peaux à http://www.jplayer.org/download/.

Placez les fichiers jPlayer.swf, jquery.jplayer.min.js (et 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 note 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">
 <div class="jp-type-playlist">
	<div class="jp-gui jp-interface">
	 <ul class="jp-controls">
	 <li><a href="javascript:;" class="jp-previous" tabindex="1" title="Jouer le titre précédent">Précédent</a></li>
	 <li><a href="javascript:;" class="jp-play" tabindex="1" title="Démarrer la lecture">Jouer</a></li>
	 <li><a href="javascript:;" class="jp-pause" tabindex="1" title="Mettre en pause">Pause</a></li>
	 <li><a href="javascript:;" class="jp-next" tabindex="1" title="Jouer le titre suivant">Suivant</a></li>
	 <li><a href="javascript:;" class="jp-stop" tabindex="1" title="Stopper la lecture">Stop</a></li>
	 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="Muet">Muet</a></li>
	 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="Sonore">Sonore</a></li>
	 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="Volume maximum!">Volume maximum</a></li>
	 </ul>

	 <div class="jp-progress">
	 <div class="jp-seek-bar">
	 <div class="jp-play-bar"></div>
	 </div>
	 </div>
	 <div class="jp-volume-bar">
	 <div class="jp-volume-bar-value"></div>
	 </div>
	 <div class="jp-current-time"></div>

	 <div class="jp-duration"></div>
	 <ul class="jp-toggles">
	 <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="Mélanger">Mélanger</a></li>
	 <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="Arrêter de mélanger">Arrêter de mélanger</a></li>
	 <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="Répéter">Répéter</a></li>
	 <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="Arrêter de répéter">Arrêter de répéter</a></li>
	 </ul>
	</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>

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 <ul class="jp-toggles"> à la balise </ul> 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). Ces modifications sont disponibles pour différentes versions de jPlayer, dans des fichiers .zip contenant tous le nécessaire :

À noter que le tutoriel ci-dessus est garanti pour la version 2.7 de jPlayer, de légères modifications peuvent être à apporter pour les versions antérieures. 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. Ces fichiers sont distribués sous double licence G.P.L. et MIT. À noter également que le code html à insérer entre les balises <body> qui précède a été françisé.

Notes diverses

  1. L’appel au fichier image personnalisant votre lecteur se fait depuis la feuille de style : pensez à changer le chemin vers l’image dans le css si vous renommez ou déplacez le fichier image !
  2. 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.