Modèle SPIP Lecteur audio

Écrit le 5 avril 2026 - 34 vues

J’ai développé un petit modèle de lecteur audio pour SPIP, avec l’idée de proposer quelque chose de simple à intégrer, agréable à utiliser et visuellement propre. Le résultat est un lecteur au design sombre et compact, capable de gérer aussi bien un fichier unique que de vraies playlists.

Pour illustrer son fonctionnement, je vous propose trois essais juste en dessous :

Un lecteur simple (un seul fichier audio)

Un multi-lecteur avec playlist (plusieurs pistes enchaînées)

Un multi-lecteur avec playlist regroupant tous les audios de cette article

Installation

Rien de compliqué côté mise en place. Il suffit de déposer trois fichiers dans votre dossier /squelettes/ :

• Le modèle HTML
  → /squelettes/modeles/audio_player.html

• Le fichier de style
  → /squelettes/css/audio_player.css

• Le script JavaScript
  → /squelettes/javascript/audio_player.js

Si les dossiers n’existent pas encore, vous pouvez simplement les créer.

Utilisation

Une fois en place, le lecteur s’insère directement dans vos articles avec des raccourcis SPIP :

• Pour un seul fichier audio :
  → <audio_player|id_document=123>

• Pour une playlist personnalisée :
  → <audio_player|id_documents=5,8,14>

• Pour lire tous les sons d’un article (ex : art45) :
  → <audio_player|id_article=45>

• Pour afficher un nom d’artiste commun :
  → <audio_player|id_article=45|nom_artiste=Nom du Groupe>

Ce que fait le lecteur

J’ai essayé de le rendre à la fois discret et fonctionnel :

• Si vous lancez un lecteur, les autres s’arrêtent automatiquement
• Une playlist peut être affichée ou masquée
• Navigation facile avec précédent / suivant
• Lecture automatique du morceau suivant
• Aucun impact sur les résumés SPIP (pas de pollution du #INTRODUCTION)
• Format compact pour ne pas alourdir la page

Personnalisation

Le style est modifiable assez facilement dans le fichier CSS.
Quelques variables permettent d’ajuster rapidement les couleurs :

• --player-bg : fond du lecteur
• --player-accent : couleur principale
• --player-text : texte principal
• --player-text-muted : texte secondaire

Vous pouvez aussi ajuster des détails, comme la taille du nom de l’artiste directement dans le CSS.

/* Contrôle sur le titre du morceau */
.track-title-compact {
font-size: 16px;
font-weight: 600;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--player-text);}

/* Contrôle sur le nom de l'artiste */
.track-artist-compact {
font-size: 12px;
color: var(--player-text-muted);
margin: 2px 0 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}

Petit rappel utile

Après chaque modification :

• Pensez à vider le cache de SPIP
• Et à forcer le rafraîchissement de votre navigateur (Ctrl + F5 ou Cmd + Shift + R)

Si vous voyez “Chargement…” ou des éléments étranges, c’est presque toujours lié au cache.

En résumé

Ce lecteur est pensé comme un outil simple mais efficace pour intégrer de l’audio dans SPIP, sans se compliquer la vie. Il peut rester très basique… ou devenir plus complet avec les playlists.

N’hésitez pas à tester les deux exemples ci-dessus pour voir la différence entre un usage simple et un usage multi-lecteurs.

Téléchargement

À bientôt, ici ou ailleurs !

Chrys