Répertoire introuvable.<div class="player-controls">
<div class="player-controls">
    <button id="pause" class="emoji" onclick="pauseAudio()">⏸</button>
    <button id="play" class="emoji" onclick="playAudio()">⏯</button>
    <button id="next" class="emoji" onclick="nextTrack()">⏭</button>
    <button id="prev" class="emoji" onclick="prevTrack()">⏮</button>
    <button id="sound-on" class="emoji" onclick="unmuteAudio()">🔈</button>
    <button id="sound-off" class="emoji" onclick="muteAudio()">🔇</button>
</div>

</div>

<style>
.player-controls {
    position: fixed;
    top: 50%; /* Centre verticalement */
    right: 20px; /* Positionné sur le côté droit */
    transform: translateY(-50%); /* Ajustement pour un centrage parfait */
    display: flex;
    flex-direction: column; /* Organise les icônes en colonne */
    justify-content: center; /* Centre les icônes verticalement */
    align-items: center; /* Centre les icônes horizontalement */
}

.player-controls button {
    width: 40px; /* Taille fixe des boutons */
    height: 40px;
    margin: 5px 0; /* Espacement vertical entre les icônes */
    background-color: transparent;
    border: none;
    font-size: 24px; /* Taille des icônes */
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s ease-in-out;
           background-color: #010101; /* Bordure verte pour l'icône active */
}

.player-controls button:hover {
    transform: scale(1.2); /* Agrandissement au survol */
}

.player-controls button:focus {
    outline: none;
}

.player-controls button.active {
         background-color: #010101; /* Bordure verte pour l'icône active */
             background-color: #1b1b1b;
    border: 2px solid #ff5722;

}
.emoji {
    width: 40px;
    height: 40px;
    font-size: 24px; /* Taille de l'émoji */
    text-align: center; /* Centrer le texte */
    border: none;
    background-color: transparent; /* Fond transparent */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center; /* Centre l'émoji verticalement et horizontalement */
}


@media screen and (max-width: 768px) { /* Cible les écrans avec une largeur max de 768px */
    .player-controls {
        position: fixed;
        top: 50%; /* Centre verticalement */
        right: 2px; /* Distance du bord droit réduite à 2px */
        transform: translateY(-50%); /* Ajustement pour un centrage parfait */
        display: flex;
        flex-direction: column; /* Organise les icônes en colonne */
        justify-content: center; /* Centre les icônes verticalement */
        align-items: center; /* Centre les icônes horizontalement */
    }

    .player-controls button {
        width: 32px; /* Taille réduite de 20% (40px * 0.8) */
        height: 32px; /* Taille réduite de 20% */
        margin: 4px 0; /* Espacement vertical réduit */
   background-color: #010101; /* Bordure verte pour l'icône active */
        border: none;
        font-size: 19.2px; /* Taille réduite de 20% */
        cursor: pointer;
        transition: transform 0.2s, background-color 0.3s ease-in-out;
    }

    .player-controls button.active {
        background-color: #1b1b1b; /* Fond actif */
        border: 2px solid #ff5722; /* Bordure orange pour le bouton actif */
        border-radius: 50%;
    }

    .emoji {
        width: 32px; /* Taille réduite de 20% */
        height: 32px; /* Taille réduite de 20% */
        font-size: 19.2px; /* Taille de l'émoji ajustée */
        text-align: center;
        border: none;
        background-color: transparent;
        cursor: pointer;
        display: flex;
        justify-content: center; /* Centre horizontalement */
        align-items: center; /* Centre verticalement */
    }
}





</style>

<script>

let currentAudioPlayer = null; // Initialiser le lecteur audio actif

// Attacher des événements à chaque lecteur audio sur la page
document.querySelectorAll('audio').forEach(audio => {
    // Quand un lecteur est joué, mettre à jour le lecteur actif
    audio.addEventListener('play', () => {
        if (currentAudioPlayer && currentAudioPlayer !== audio) {
            currentAudioPlayer.pause(); // Pause l'ancien lecteur
        }
        currentAudioPlayer = audio; // Met à jour le lecteur courant
    });

    // Quand la lecture s'arrête, retirer la classe active
    audio.addEventListener('pause', () => {
        highlightActiveButton(null); // Supprime la classe active des boutons
    });
});

// Fonctions de contrôle des lecteurs
function pauseAudio() {
    if (currentAudioPlayer) {
        currentAudioPlayer.pause();
        highlightActiveButton('pause');
    }
}

function playAudio() {
    if (currentAudioPlayer) {
        currentAudioPlayer.play();
        highlightActiveButton('play');
    } else {
        // Si aucun lecteur actif, lance le premier lecteur de la page
        const firstAudioPlayer = document.querySelector('audio');
        if (firstAudioPlayer) {
            currentAudioPlayer = firstAudioPlayer;
            currentAudioPlayer.play();
            highlightActiveButton('play');
        }
    }
}

function nextTrack() {
    if (currentAudioPlayer) {
        const allPlayers = Array.from(document.querySelectorAll('audio'));
        const currentIndex = allPlayers.indexOf(currentAudioPlayer);

        if (currentIndex !== -1 && currentIndex < allPlayers.length - 1) {
            currentAudioPlayer.pause(); // Arrête le lecteur actuel
            const nextPlayer = allPlayers[currentIndex + 1];
            currentAudioPlayer = nextPlayer;
            currentAudioPlayer.play(); // Joue le suivant
            highlightActiveButton('next');
        }
    }
}

function prevTrack() {
    if (currentAudioPlayer) {
        const allPlayers = Array.from(document.querySelectorAll('audio'));
        const currentIndex = allPlayers.indexOf(currentAudioPlayer);

        if (currentIndex > 0) {
            currentAudioPlayer.pause(); // Arrête le lecteur actuel
            const prevPlayer = allPlayers[currentIndex - 1];
            currentAudioPlayer = prevPlayer;
            currentAudioPlayer.play(); // Joue le précédent
            highlightActiveButton('prev');
        }
    }
}

function muteAudio() {
    if (currentAudioPlayer) {
        currentAudioPlayer.muted = true; // Désactive le son
        highlightActiveButton('sound-off');
    }
}

function unmuteAudio() {
    if (currentAudioPlayer) {
        currentAudioPlayer.muted = false; // Réactive le son
        highlightActiveButton('sound-on');
    }
}

// Gère la classe "active" des boutons de contrôle
function highlightActiveButton(buttonId) {
    // Supprime la classe active de tous les boutons
    document.querySelectorAll('.player-controls button').forEach(button => {
        button.classList.remove('active');
    });

    if (buttonId) {
        // Ajoute la classe active au bouton cliqué
        const activeButton = document.getElementById(buttonId);
        if (activeButton) {
            activeButton.classList.add('active');
        }
    }
}



</script>