Le retour du bloc liste de lecture chez WordPress 7.1

Le site partage des chansons, parfois en « albums » autrement dit des listes à écouter. On trouve aussi des lectures de poèmes. Certaines nouvelles sont proposées en audio. Quand c’était « à l’unité » nous avions le « bloc audio » qui fait le travail. Depuis un moment WordPress n’avait plus de bloc « liste de lecture » ou playlist. Il est heureusement revenu. Si vous aussi voulez partager des podcasts, audios divers, musique, chansons… c’est très simple.

Abandonnez les plugins tiers

Pas toujours gratuits, il existe des plugins tiers. J’en ai utilisé avant de découvrir que certains sont lourds et même ajoutent des cookies !

Ils sont donc à fuir.

J’ai fui également depuis longtemps les plateformes comme Soundcloud puisqu’on y dépose ses contenus d’une part et qu’on se retrouve également à imposer des cookies en intégrant le lecteur sur le site.

J’ai utilisé alors du code html. C’est une solution qui est satisfaisante du point de vue de l’indépendance mais fastidieuse, car il faut écrire le code à la main.

Je redonne l’exemple que j’avais partagé. Il n’y a pas d’automatisation possible même si on peut utiliser une IA, il faut tout de même donner chaque lien de .mp3 et copier sans se tromper.

<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>

Le nouveau bloc « liste de lecture »

Le bloc « de base » n’abaisse pas les performances

Alors qu’avec certains plugins tiers on peut vite perdre en performances, ce bloc permet d’insérer des listes sans perte tant sur mobile que sur ordinateur. Il est important que tout se charge rapidement. Bien entendu, votre solution de cache va jouer et comme dit plus haut votre choix de couleurs et d’images.

Petit truc en plus

En bricolant pour basculer vers l’utilisation de ce bloc, je me suis rendu compte que j’avais laissé pas mal d’audios sans le nom de l’auteur. Tout faire à la main est fastidieux. Du coup, j’ai utilisé une petite tâche automatisée qu m’a permis de l’appliquer partout en un geste. Vous pouvez la transposer avec votre propre nom. C’est un code php qu’on utilise une fois (je l’insère via WP Code)

add_action('init', function () {
    if (!isset($_GET['fix_mp3_artist']) || !current_user_can('manage_options')) {
        return;
    }

    $attachments = get_posts([
        'post_type'      => 'attachment',
        'post_mime_type' => 'audio/mpeg',
        'posts_per_page' => -1,
        'fields'         => 'ids',
    ]);

    $fixed = 0;
    $skipped = 0;

    foreach ($attachments as $id) {
        $meta = wp_get_attachment_metadata($id);
        if (empty($meta['artist'])) {
            $meta['artist'] = 'Vincent Breton';
            wp_update_attachment_metadata($id, $meta);
            $fixed++;
        } else {
            $skipped++;
        }
    }

    wp_die("Terminé : $fixed corrigés, $skipped déjà renseignés.");
});

On reste connecté en admin puis on fait travailler le code : https://vincentbreton.fr/?fix_mp3_artist=1

Il faut ensuite désactiver le code et le supprimer. Ça ne modifie pas la base en profondeur mais ça corrige l’affichage. Selon les besoins, il est possible d’automatiser pas mal de choses sur WordPress.

---

Voilà ce petit truc tout bête que j’utilise et qui intéressera peut-être celles et ceux qui voudraient mettre du son, des listes, des podcasts etc sur leur propre site. Bon amusement !