Des lecteurs Bandcamp pour SPIP !!!

Bandcamp permet de proposer sa musique à la vente. On peut choisir de donner un prix fixe pour ses albums ou track ou bien de fixer un prix minimum et ainsi laisser éventuellement l’acheteur choisir de payer plus... Notez que l’on peut mettre le prix à 0 et ainsi offrir un téléchargement légal et gratuit. Ceci dit, si les téléchargement s’envolent, à une certaine limite, ils deviennent payant au prix standard fixé par Bandcamp. Appréciant cette flexibilité, j’ai décidé d’utiliser Bandcamp pour héberger mes projets musicaux. Ceux qui veulent en savoir plus sur les possibilités offertes par Bandcamp peuvent lire cette page si ils comprennent l’anglais...

Le lecteur Bandcamp de SPIP FAT - Free Art Template

Ayant, avec plaisir, réalisés quelques mini-sites avec SPIP FAT, j’ai pu voir comment Jean-Emmanuel, le créateur de ce template, avait fait pour implémenter un lecteur d’album Bandcamp. Vous pouvez jeter un oeil sur le dépôt du template sur github si ça vous intéresse.

En gros, il y a ce que l’on appelle un modèle dans la terminologie SPIP qui, par l’intermédaire d’un peu de code jQuery, permet de générer le lecteur. Je vais expliquer tout cela dans la partie suivante de mon article...

Ma solution pour intégrer facilement des lecteurs Bandcamp dans un site SPIP

En fait, ce n’est pas vraiment ma solution si je veux être honnête. Je l’ai carrément pomper sur celle de Jean-Emmanuel ! Je l’ai adoptée, modifiée et vais la partager avec vous !

Pour pouvoir implémenter nos lecteurs d’album Bandcamp facilement dans un article ou un squelette, nous avons donc besoin de ce que l’on appelle un modèle dans la terminologie de SPIP. Un modèle est un petit squelette SPIP qui décrit un fragment de HTML facile à insérer dans un autre squelette ou — et c’est là son grand avantage — dans le texte d’un article. On peut lui passer des paramètres pour jouer sur son contenu. Nous allons tout d’abord voir comment est fait notre modèle et tout ce qu’il à besoin pour être fonctionnel avant de voir comment l’intéger dans les squelettes et dans les articles.

Notre modèle sera placé dans le sous répertoire de "squelettes" dans le répertoire "modeles". Notez que squelettes et le nom par défaut du répertoire dans lequel on place les squelettes personnalisés pour SPIP. Ce répertoire peut avoir un autre nom si votre SPIP à été configuré ainsi. On choisit d’appeler notre modèle "bandcamp.html". Voici donc l’arborescence : racine > squelettes > modeles > bandcamp.html.

A la ligne 1, on définit la valeur par défaut de la class qui servira à identifier si on doit gérer un album ou une track ( chanson ). Par défaut, le lecteur sera celui d’un album.

A la ligne 2, si on passe au paramètre "modele" la valeur "track", la class celle utilisée pour les tracks seules.

A la ligne 5, on trouve le bout de code html qui sera incorporé dans la page html. #GETclass_modele #ENVid seront remplacés par la valeur adéquate en fonction des paramètres passés ou pas lors de l’appel du modèle. Nous verrons plus tard comment appeler ce modèle.

Voici maintenant le code jQuery à mettre au bas de chacunes de vos pages ayant un lecteur Bandcamp :

A partir de la ligne 1, à l’intérieur de chaque élément ayant la class bandcamp_album en créant une iframe associer à la variable bandcamp grâce à

puis lui attribut une url avec

Je vous expliquerais plus loin comment personnaliser le lecteur via cette url. Pour votre information $(this).attr('id') récupère la valeur de l’attribut id dans le code généré par le modèle, identifiant qui sera passé en paramètre lors de l’appelle du modèle. Cet identifiant est donc l’identifiant de l’album bandcamp. Vous vous demandez comment connaitre cette identifiant ? Je vous l’expliquerais plus loin. Mon dieu, quel suspens insoutenable !

$(this)[0].appendChild(bandcamp); ajoute à l’intérieur de l’élément actuellement parcouru l’iframe repérée par la variable bandcamp.

Personnellement, pour me simplifier la vie, j’inclus ce code au bas de chaque page par l’intermédiaire d’un squelette comprenant tous mes code javascript/jQuery.

Et maintenant, un peu de style !

La class .bandcamp iframe définit l’aspect général de iframe contenant un lecteur.

La class .bandcamp.bandcamp_album iframe définit la hauteur de l’iframe contenant un lecteur de type album.

La class .bandcamp.bandcamp_track iframe définit la hauteur de l’iframe contenant un lecteur de type track.

Personnellement, j’ai mis ces styles dans une feuille de style appelée par toutes mes pages. Il s’agit de bootstrap-theme.css car j’utilise bootstrap pour mettre en forme mon blog. Vous pouvez les mettre dans n’importe quelle feuille de style appelée par toutes pages susceptibles de contenir un ou plusieurs lecteurs bandcamp.

Pour en savoir plus sur les CSS ou feuilles de style, je vous recommande le site d’Alsacréation ou carrément pour les anglophones le site du w3c. C’est du lourd pour le dernier site ! Pour en savoir plus sur le w3c, lisait cette page sur wikipédia. Si si, c’est intéressant ! Un peu hors sujet, certes... Quoique...

Et maintenant, comment intégrer nos lecteurs Bandcamp un site SPIP

Avant toutes choses, il vous faut connaitre le numéro identifiant de votre album ou track. Pour cela rendez-vous sur la page de votre album ou track et faite un click droit puis cherchez quelque chose comme ’Afficher le code source de la page’. Cliquez et allez au bas de la page montrant le code source. Vous y trouverez l’identifiant de votre album. Il en est de même pour une track.

Notez que vous pouvez copier-coller cette identifiant.

Pour intégrer un album,on met la balise

Pour intégrer une track,on met la balise

Dans les exemple, xxxxxxx est à remplacer par l’identifiant trouvé en bas de la page du code source de la page album ou track sur bandcamp.

Au final, on mettra donc dans l’article SPIP :

Pour obtenir :

Pour insérer un album dans un squelette, on met ce bout de code par exemple :

Remplacez ’4095402228’ par l’identifiant de l’album voulu.

Pour insérer une track dans un squelette, on met ce bout de code par exemple :

Remplacez ’3555463215’ par l’identifiant de la track voulue.

Cela devrait afficher les lecteurs tel que l’on peu les voir plus haut...

Vous pouvez voir le code en ligne sur mon github en cliquant ici ! Pour télécharger la release avec cet exemple, cliquez ici ! Et oui, j’ai fait une release rien que pour vous !

Pour récapituler, le modèle se trouve dans racine/squelettes/modeles/bandcamp.html, la feuille de style dans racine/squelettes/bootstrap/css/bootstrap-theme.css et le jQuery dans racine/squelettes/inclure/js-bas-page.html

Pour comprendre la magie et personnaliser un peu ses lecteurs Bandcamp

Avant de rédiger cet article, j’ai chercher la documentation concernant l’intégration des lecteurs de bandcamp, mais je n’ai rien trouvé d’officiel. En regardant un peu le code proposé pour "embarquer" un lecteur, j’y ai vue une iframe et son url. A partir de là, il est facile de comprendre comment personnaliser son lecteur.

Voyons tout d’abord comment obtenir le code d’un lecteur embarqué Bancamp. Il faut tout d’abord se rendre sur un album ou une track. Dans notre exemple, cela sera un album.

Il faut cliquer sur "Share / Embed" sous la pochette de l’album :

Un panneau s’ouvre ! Cliquez sur l’un des icônes. Peu importe laquelle, elles ouvrent toutes la même interface...

Une interface apparaît. Pour notre exemple, nous allons sélectionner le style en haut à droite. C’est celui qui a été intégré à SPIP auparavant.

Une nouvelle interface, ô combien plus intéressante et complète apparaît !
Dans la zone 1, on peut s’amuser à customiser le lecteur. Après quelques instants, une prévisualisation du lecteur apparaît à chaque modification dans la zone de droite. Pour le moment, nous allons prendre le code proposé tel quelle dans le champ 2 répèré d’une croix. Pour ce faire, cliquez sur le champ avant d’enchaîner avec la combo qui tue la mort : "CTRL+C".

Voici le code récupéré :

Décortiquons un peu ce code...

<iframe style="border: 0; width: 100%; height: 120px;" nous indique qu’il s’agit d’une iframe avec comme style, les bordures à 0, une largeur de 100% ( pour info, les lecteurs bandcamp ont une largeur maximum de 700px et minimum de 370 ) avec une hauteur de 120px.

Petit rappel, dans notre code jQuery, nous avions var bandcamp = document.createElement('iframe'); qui créait une iframe et le css :

Voyons la source et donc l’url de cette iframe maintenant :

A comparer avec notre code jQuery toujours :

Bingo ! Nous retrouvons quasiment la même url avec l’identifiant de l’album qui dans un cas et en dur et dans l’autre récupéré via l’attribut ’id’ de la balise div générée par le modèle SPIP. En étudiant un peu cette url, on peut deviner que size est la taille du lecteur. bgcol est quand à lui la couleur du fond de l’iframe en hexadecimal. linkcol est la couleur des liens. tracklist, si on affiche la tracklist ou pas. artwork, la taille de la vignette du lecteur ettransparent, ben, je sais pas trop ! LOL !

Pour connaitre les valeurs possible de chaque paramètre, je vous conseille de jouer avec l’éditeur de la zone 1. En fait pour créer son lecteur perso, il faut donc jouer avec les différent paramètres disponible dans la zone 1 et recopier le code donné par src. Si on veut des couleurs bien précises, modifier en conséquence bgcol et linkcol. Puis, dans votre code jQuery, remplacer l’identifiant de l’album par $(this).attr('id'). Et éventuellement, modifier les style en conséquence si besoin est... Surtout pour les dimensions !

Le bout de code suivant est en fait un lien vers l’album dur Bandcamp. En fait, on l’ignore. Le lien se trouvant à d’autres endroits du lecteurs...

Le mot de la fin

Je pense que vous avez tous les éléments en mains pour mettre en place vos lecteurs Bandcamp dans SPIP sans passer par un plugin et, pour les plus aventureux ou pour ceux ayant déjà un expérience dans la conception d’application internet, de quoi les personnaliser.

Vous avez aimé ? Partager !