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