Et hop ! un plugin de moins pour WordPress

Sans être minimaliste, j’apprends à me libérer des extensions et plugins. Certains ont grand intérêt, d’autres sont problématiques. De plus, avec quelques lignes de code bien choisies, on peut les remplacer de façon allégée et efficace. Et hop ! un plugin de moins pour WordPress.

Quelques exemples déjà éprouvés

J’avais une extension dédiée au plan de site mais SLIM SEO (extension bien plus légère que les usines à gaz intrusives comme Yoast ou Rank Math) permet de le faire…

J’en avais une pour compter le nombre d’articles : un bout de code fait ça très bien. Tout comme pour celle qui estimait le temps de lecture.

J’ai déjà raconté comment je me suis passé de Jet Pack particulièrement lourde et intrusive avec ses liens aux réseaux sociaux, ses fonctions d’abonnement etc.

Le problème avec ces extensions, c’est qu’elles apportent souvent des cookies, qu’il faut les mettre à jour, qu’elles peuvent rencontrer des conflits entre elles ou avec WordPress ou même le système de cache. Très souvent elles font double emploi quand elles n’ajoutent pas des effets multiples ou des fonctionnalités qu’on n’utilise pas…

Audio Player Pro

Audio Player Pro dans le fil de l’extension gratuite, permet de proposer des listes d’audios avec des illustrations. C’est plutôt joli sauf que chaque liste édite sa page propre et que les images se multiplient, ne s’affichent pas toujours correctement sur tous les navigateurs… Plus ennuyeux encore, j’ai découvert que le plugin même dans sa version payante, engendre des vulnérabilités en matière de sécurité. Et je suis un peu attentif à ça !

J’ai écrit au développeur qui je crois est en Inde. Ils ont été plus rapides à toucher mon paiement qu’à se mettre en action. Visiblement, ils ne trouvent pas de solution… ça patauge.

Je ne trouvais pas d’extension gratuite… et rien de très léger ni parfaitement sécurisé.

Du coup j’ai cherché et trouvé trois solutions :

Le bloc natif de WordPress tu utiliseras

Avec certains navigateurs c’est une barre un peu austère. Mais c’est la fonction qui intéresse : permettre d’écouter un .mp3 On peut d’ailleurs faire quelques réglages.

Ce lecteur permet d’écouter une piste, pas deux…On peut faire un démarrage automatique ( pas gentil) ou répéter en boucle (risque d’être lassant).

Il existe des lecteurs gratuits et plus jolis qui font ça: mais attention aux traces et à la sécurité…

Vive le code court !

Alors je me suis souvenu d’un code court :

[playlist ids="123,456,789"]

On va chercher l’id dans l’adresse du fichier audio. Il faut cliquer sur son fichier et elle est en haut de votre tableau de bord. Chaque audio a son numéro. Il suffit de remplacer ceux que j’ai mis par votre numéro d’audio à vous et d’insérer où vous voulez.

Oui, mais selon les configurations, ça peut très bien ne pas fonctionner ou jouer en boucle, ce qui peut agacer.

Même en ajoutant une consigne, ça revenait en boucle chez moi (ça peut varier selon les configurations, donc testez en sachant que les gestions de cache peuvent poser problème).

[playlist ids="123,456,789" loop="false"]

L’HTML au secours

Après quelques recherches et c’est vrai l’aide de l’IA (deux ont été nécessaires), j’ai trouvé pour les listes ce code en principe compatible avec la majorité des navigateurs (testé sur Safari, Edge, Chrome, Brave, Opera, Vivaldi et Firefox).
L’idée c’était : que ce soit léger et sécurisé, que les morceaux s’enchaînent mais qu’à la dernière piste ça ne reparte pas en non stop…

<div class="custom-audio-playlist">
  <audio id="playlist-player" controls preload="metadata"></audio>
  <ol id="playlist-tracks">
    <li data-src="https://vincentbreton.fr/wp-content/uploads/2025/09/lavieilledame.mp3">La vieille dame</li>
    <li data-src="https://vincentbreton.fr/wp-content/uploads/2025/09/donneursdelecons.mp3">Les donneurs de leçon</li>
    <li data-src="https://vincentbreton.fr/wp-content/uploads/2025/09/journaldusoir.mp3">Le journal du soir</li>
  </ol>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const player = document.getElementById('playlist-player');
  const tracks = document.querySelectorAll('#playlist-tracks li');
  let currentTrack = 0;

  function loadTrack(index) {
    player.src = tracks[index].dataset.src;
    tracks.forEach((track, i) => track.classList.toggle('active', i === index));
    currentTrack = index;
  }

  player.addEventListener('ended', function() {
    currentTrack++;
    if (currentTrack >= tracks.length) {
      player.pause(); // Forcer la pause à la fin
      return;
    }
    loadTrack(currentTrack);
    player.play();
  });

  tracks.forEach((track, index) => {
    track.addEventListener('click', () => {
      currentTrack = index;
      loadTrack(index);
      player.play();
    });
  });

  if (tracks.length > 0) {
    loadTrack(0); // Charger la première piste
  }
});
</script>

<style>
.custom-audio-playlist { max-width: 600px; }
#playlist-tracks { list-style: none; padding: 0; }
#playlist-tracks li { cursor: pointer; padding: 5px; border-bottom: 1px solid #ddd; }
#playlist-tracks li.active { background: #f0f0f0; font-weight: bold; }
</style>

Si ça semble un peu plus complexe qu’un plugin où l’on va cliquer sur le fichier, en réalité il suffit de copier l’adresse du fichier et de lui donner un titre. On peut modifier en intervenant juste sur l’adresse à copier et le titre à donner. Et là, encore une fois, dans un usage raisonné et raisonnable, on peut faire bosser une IA. C’est moins fastidieux que tout copier coller ou risquer d’écrire de travers. Mais si vous voulez faire à la main c’est aussi possible.

Conclusion provisoire

Même si ce n’est pas parfait, on se sent moins dépendant de tiers. Surtout, manipuler un peu permet de comprendre un peu comment ça se passe sous le capot, les problèmes d’interactions tant au niveau du CMS qu’au niveau des navigateurs et de leurs normes.

Une nouvelle fois, on constate que Firefox (sur lequel je travaille) est le plus exigeant. Ce n’est pas la première fois que j’observe qu’il est sourcilleux avec le respect du code et de la sécurité.

Bon, on va tester en tout cas ce retour à l’audio de base d’une part et quand j’aurai des listes au code html. Voilà, c’était le petit défi du jour !

Nota : pour mes bouts de code .php notamment, j’utilise WPCode, simple et efficace comme extension pour le coup !