Un lecteur de liste audio pour WordPress sans plugin

Si vous avez une seule piste audio à partager sur votre site, WordPress propose un bloc natif à intégrer. Si vous voulez proposer plusieurs pistes audios qui s’enchaînent automatiquement (comme sur un lecteur) avec la possibilité de changer de piste ou revenir en arrière, il faut soit utiliser une plateforme externe, soit un plugin mais ça pose problème. Le mieux est de proposer un code html à insérer là où vous le voulez dans votre page. Je vous le partage ici.

---

Le problème des plateformes

J’ai un temps utilisé des plateformes comme Soundcloud. Outre le fait que la solution gratuite est limitée, relier le site à une solution externe et commerciale c’est imposer des cookies aux visiteurs. Ce site est sans cookie. Par ailleurs, confier ses médias à un tiers peut être problématique quand on veut rester indépendant. (sécurité, évolution de la plateforme).

La seule exception que je fasse concerne les vidéos que j’héberge sur une instance Peertube.

Le problème des plugins

Les plugins proposent rarement (plus maintenant je crois) la possibilité d’avoir un lecteur qui permette d’enchaîner les titres sans payer une version pro. Avec un plugin, on alourdit le site et on reste dépendant des mises à jour et des mariages parfois problématiques avec certains caches ou d’autres plugins. Par ailleurs, certains de ces plugins abaissent la sécurité générale du site. C’est la raison qui m’a fait abandonner l’utilisation d’un plugin ou extension pour cette fonctionnalité.

Je souhaite pouvoir garder les bonnes « notes » (le site est noté A avec Sécurity Headers).

Un seul audio ?

Un lecteur de liste audio

Cahier des charges

• pouvoir lire plusieurs .mp3 (ou autres fichiers sons mais il faut essayer d’être « léger »)
• pouvoir enchaîner automatiquement la lecture (sans imposer un démarrage automatique que je trouve pénible)
• pouvoir passer d’un morceau à l’autre, avancer sur la piste, revenir en arrière

Mode d’emploi

1. insérer les audios dans la médiathèque
2. intégrer les liens vers chaque audio dans l’ordre voulu dans le code html (voir plus bas, il est donné) [il suffit de passer par le biais d’un éditeur de texte] . Ne pas oublier de donner un titre à chaque lien, c’est ce qui va s’afficher
   • pour trouver le lien de l’audio, il faut cliquer dessus dans la médiathèque : ce sera l’occasion de renseigner les méta données dont le titre correct, le nom de l’auteur…
3. insérer le code .html modifié dans la page voulue
4. enregistrer, valider / vérifier

Le code type à insérer

Il est disponible dans le github où je partage l’ensemble des bouts de code, snippets etc. utilisés pour ce site. Voir le lien https://github.com/vincentbreton-auteur/lecteuraudio

Le code est donné avec ici 5 lignes ou 5 titres : on peut ajouter ou remplacer autant que de besoin. Bien vérifier de ne pas modifier le code.

Je donne l’exemple ici :

<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/11/haletant.mp3"> Haletant</li>
    <li data-src="https://vincentbreton.fr/wp-content/uploads/2025/12/uneerreur.mp3">Une erreur</li>
    <li data-src="https://vincentbreton.fr/wp-content/uploads/2025/12/ilyadeschoses.mp3">Il y a des choses</li>
    <li data-src="https://vincentbreton.fr/wp-content/uploads/2025/12/buridan.mp3">Buridan</li>
    <li data-src="https://vincentbreton.fr/wp-content/uploads/2025/12/alorsjaccepte.mp3">Alors j'accepte</li>
  </ol>
</div>

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

  function loadTrack(index) {
    player.src = tracks[index].getAttribute('data-src');
    player.load();
    tracks.forEach(t => t.classList.remove('active'));
    tracks[index].classList.add('active');
    currentTrack = index;
  }

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

  player.addEventListener('ended', () => {
    currentTrack++;
    if (currentTrack < tracks.length) {
      loadTrack(currentTrack);
      player.play();
    }
  });

  loadTrack(0);
</script>

Pour mémoire j’utilise WordPress 6.9 et le Thème Twenty Twenty-Five avec Twentig.

En principe cela devrait s’adapter à votre thème WordPress. On doit pouvoir modifier et enrichir ce code (si on veut certaines mises en forme).