J’ai trouvé un player MP3 avec playlist en HTML5 / JS. J’ai remplacé celui en Flash que j’avais jusque-là.
EDIT: J’avais un bug sur la playlist GGJ2015. Corrigé : j’avais oublié de mettre “http://” dans le chemin d’accès des fichiers. Ne jamais oublier le “http://” dans les chemins d’accès.
Il s’agit de JPlayer. C’est de l’open-source libre et gratuit en licence MIT, tout ce qu’il y a de plus standard. Ca marche plutôt bien. C’est basé sur jQuery. J’ai passé à peu près 4 heures pour le trouver, le choisir et le faire marcher. Je ne panne rien à JS (à part que c’est le langage du diable), encore moins à jQuery, j’ai quand-même réussi à le mettre en oeuvre. Ok, 4 heures c’est long.
J’ai ajouté une playlist avec l’EP que j’ai enregistré en 2007-2008. Voilà voilà. Je mets mes chansons en licence CC BY-NC 3.0 FR.
Quelques notes concernant l’implémentation de Jplayer:
- J’utilise des widgets “text” de Dotclear que je mets dans la barre latérale. Dans le texte, je colle le code de la démo 2 de Jplayer (démo playlist audio), en faisant bien gaffe:
- Modifier la playlist (duh !) et en mettant tous les chemins d’accès absolus en dur. A priori je devrais pouvoir utiliser des chemins en relatif, mais je ne suis pas sûr que Dotclear ne me foute pas la merde, donc je n’essaie pas. Plus tard peut-être … Ah ! Et le chemin d’accès externe, avec le NDD. Et, oui, faire du dev web avec un abonnement Orange (pas de loopback !!!) c’est la galère !
- Virer les balises \<head> et \<body>,
- Mettre des noms d’instance différents sur chaque playlist sur le jPlayer et le jp_container, sinon tous les players de la page auront la même playlist,
- Modifier la feuille de style pour que le player rentre dans la bordure. La console de dev de Firefox est ton amie.
Voici, pour exemple, le code que j’ai mis dans le widget text qui contient la playlist de la GGJ 2015:
<link href="http://www.randagodron.eu/blog/dotclear/plugins/jplayer/dist/skin/blue.monday/css/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.randagodron.eu/blog/dotclear/plugins/jplayer/lib/jquery.min.js">
</script>
<script type="text/javascript" src="http://www.randagodron.eu/blog/dotclear/plugins/jplayer/dist/jplayer/jquery.jplayer.min.js">
</script>
<script type="text/javascript" src="http://www.randagodron.eu/blog/dotclear/plugins/jplayer/dist/add-on/jplayer.playlist.min.js">
</script>
<script type="text/javascript">
%%%
%%%
%%%
//<![CDATA[
$(document).ready(function(){
%%%
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
},
%%%
[
{
title:"Musique d'ascenseur",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/ascenseur.mp3"
},
{
title:"Musique 1",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_01.mp3"
},
{
title:"Musique 3",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_03.mp3"
},
{
title:"Musique 4",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_04.mp3"
},
{
title:"Musique 5",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_05.mp3"
},
{
title:"Musique 7 - 1",
artist:"Randagoron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_07_seq01.mp3"
},
{
title:"Musique 7 - 2",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_07_seq02.mp3"
},
{
title:"Musique 7 - 3",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_07_seq03.mp3"
},
{
title:"Musique 7 - 4",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_07_seq04.mp3"
},
{
title:"Musique 7 - 5",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_07_seq05.mp3"
},
{
title:"Musique 7 - 6",
artist:"Randagodron",
mp3:"www.randagodron.eu/blog/dotclear/public/music_perso/ggj2015/music_07_seq06.mp3"
}
]
%%%
, {
swfPath: "http://www.randagodron.eu/blog/dotclear/plugins/jplayer/dist/jplayer",
supplied: "mp3",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
});
});
//]]>
%%%
</script>
%%%
<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">previous</button>
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-next" role="button" tabindex="0">next</button>
<button class="jp-stop" role="button" tabindex="0">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">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</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>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
J’ai mis les morceaux dans le répertoire public/music_perso de Dotclear, les fichiers de jPlayer dans le dossier plugins de Dotclear. Ce n’est pas forcément le plus judicieux : je ferais mieux d’y mettre à l’extérieur, pour ne pas avoir à m’emmerder quand je mets à jour Dotclear. Mais bon, c’est une contrainte acceptable.
Note : avec cette méthode, je ne peux pas, à priori, utiliser un fichier séparé pour y mettre le contenu de la playlist. En tous cas, moi, pour faire ça j’utilise un include PHP, et visiblement le PHP n’est pas interprété dans les widgets text de Dotclear. Tant pis ! A moins qu’il y ait un moyen de le faire en HTML, mais ça me casse les pieds de chercher ça, donc tant pis je mets les playlists en dur dans le corps du code.
Voilà voilà. Sinon mon certificat (Gandi) a expiré la semaine dernière et j’ai la flemme de m’en refaire un auto-signé (surtout que ça va encore me prendre des heures à mettre en oeuvre), et je ne suis pas ultra-motivé à payer pour en bénéficier. Donc je pense que je vais rester comme ça pour le moment.