<!– Conteneur pour les lecteurs –>
<div id=”players-container”>

<div class=”player” data-post-id=”{ id:%post_id% }”>
<a class=”link play podcast-btn” href=”javascript:IRON.sonaar.player.setPlayerAndPlay({ id:%post_id% })” onclick=”togglePlayPause(event)”>
<i class=”fa-solid fa-circle-play”></i> <!– Icône de lecture –>
Lecture
</a>
<a class=”link pause podcast-btn” href=”javascript:IRON.sonaar.player.pause({ id:%post_id% })” style=”display:none;” onclick=”togglePlayPause(event)”>
<i class=”fa-solid fa-circle-pause”></i> <!– Icône de pause –>
Pause
</a>
</div>

</div>

<script>
// Sélectionne tous les éléments avec la classe .player
const players = document.querySelectorAll(‘.player’);

// Parcours chaque lecteur et attache les événements
players.forEach(player => {
const playButton = player.querySelector(‘.play’);
const pauseButton = player.querySelector(‘.pause’);
const postId = player.getAttribute(‘data-post-id’);

playButton.addEventListener(‘click’, function(event) {
event.preventDefault();
togglePlayPause(event, postId);
});

pauseButton.addEventListener(‘click’, function(event) {
event.preventDefault();
togglePlayPause(event, postId);
});
});

// Fonction pour basculer entre les boutons PLAY et PAUSE pour un lecteur donné
function togglePlayPause(event, postId) {
const clickedButton = event.currentTarget; // Bouton sur lequel on a cliqué
const parentPlayer = clickedButton.parentNode; // Parent de l’élément cliqué
const playButton = parentPlayer.querySelector(‘.play’);
const pauseButton = parentPlayer.querySelector(‘.pause’);

if (clickedButton.classList.contains(‘play’)) {
playButton.style.display = ‘none’;
pauseButton.style.display = ‘inline-block’;
IRON.sonaar.player.pause({ id: postId });
// Exécuter l’action de lecture avec postId
IRON.sonaar.player.setPlayerAndPlay({ id: postId });

} else if (clickedButton.classList.contains(‘pause’)) {
playButton.style.display = ‘inline-block’;
pauseButton.style.display = ‘none’;
// Exécuter l’action de pause avec postId
IRON.sonaar.player.pause({ id: postId });
}
}
</script>