Rapatrier l’adresse d’un fichier mp3 par un boucle document, c’est assez simple, mais proposer une playlist… c’est toujours assez simple grâce aux fonctionnalités AJAX de SPIP.
Télécharger si ce n’est déjà fait un dewplayer gratuit sur le site d’Alsacreations. Pour l’exemple qui suit, nous allons prendre le mini dewplayer que nous plaçons à la racine du site.
Nous allons aussi créer un mot clé pour regrouper les mp3 et les appeler grâce à des boucles.
Nous allons créer un INCLUDE, pour pouvoir éventuellement l’utiliser sur plusieurs squelettes. Nous allons le nommer inc-playlist.html et nous le mettons dans le dossier « squelettes », comme d’habitude.
Dans cet INCLUDE, nous créons une div : <div id= »content_dew_player »> </div>.
Puis nous mettons le code du dewplayer en prenant soin d’y ajouter les éléments d’appel nécessaires pour récupérer ensuite les URL de nos mp3.
<div id= »content_dew_player »>
<object type= »application/x-shockwave-flash » data= »/dewplayer-mini.swf?son=#URL&autoplay=1″ height= »20″ width= »240″>
<param name= »movie » value= »/dewplayer-mini.swf?son=#URL&autoplay=1″ />
</object>
Ensuite, nous allons créer la liste des mp3 :
<BOUCLE_sonsM(MOTS){id_mot=1}><ul id= »liste_sons »><BOUCLE_sons(DOCUMENTS){extension==mp3} {mode=document}>
<li><a href= »?url=[(#URL_DOCUMENT)] » class= »ajax »>[(#TITRE|sinon{« sans titre »})]</a></li></BOUCLE_sons>
</ul></BOUCLE_sonsM>
Le mot clé 1 appelle dans cet exemple tous les articles qui ont un mp3 et auxquels nous avons pris soin d’y ajouter le mot clé (sinon ça ne marche pas). Ensuite, dans ces articles nous ne prenons que les mp3. On peut ensuite limiter le nombre d’articles dans la première boucle en rajoutant {0,5} pour limiter à 5 articles et limiter le nombre de mp3 par article, {0,1} si nous n’en voulons qu’un.
Comme vous pouvez le voir, nous créons une valeur « url » qui prend l’adresse du fichier que nous ajoutons ensuite dans le dewplayer avec #URL. Pour éviter des vides lorsque le titre du document est manquant, nous rajoutons un filtre sinon…
Lorsqu’aucun fichier n’a été cliqué, le dewplayer n’a pas de mp3.
Maintenant il faut rédiger l’INCLUDE pour que celui-ci ne recharge pas la page mais seulement la div.
<INCLURE{fond=inc-playlist}{ajax}{env}{url}>
Il est important que les liens est une classe « ajax » comme dans cet exemple, sinon ça ne fonctionnera pas.
Vous allez me dire quel avantage par rapport à des players déjà existant : vous maîtrisez au mieux le design grâce au CSS et aux possibilités que propose Alsacréations pour modifier le dewplayer.
Subtilité : pour afficher le titre du document en écoute, il faut changer le href du document en rajoutant &titre-#TITRE :
<a href= »?url=[(#URL_DOCUMENT)]&titre=#TITRE » class= »ajax »>
Puis dans l’INCLUDE on stipule {titre} pour récupérer la valeur.
Ensuite il suffit de rajouter une ligne dans le fichier inc-playlist.html du type :
<p>En lecture : [(#TITRE|sinon{« vide »})]</p>