<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../styles/style.css">
    <link rel="icon" type="image/jpg" href="../img/logo.png">
    <title>Accueil</title>
</head>
<body>
    <h1>Persona Battle</h1>
    
    <a href="index.php?action=start" class='button'>Commencez !</a>

    <div class='music-control'>
    <audio loop src="../music/a_corner_of_memorie.mp3" id='audio'></audio>
        <h3>Musique de l'écran d'accueil</h3>
        <a href="javascript:void(0)" onclick=changeState(0) class='btn'>Play</a>
        <a href="javascript:void(0)" onclick=changeState(1) class='btn'>Pause</a>
        <a href="javascript:void(0)" onclick=changeState(2) class='btn active'>Stop</a>
    </div>

<script>
    //controles de la musique
    function changeState(x){
    let btns = document.querySelectorAll(".btn");
    let audio = document.querySelector("#audio");
    for(let i = 0; i < btns.length; i++){
        btns[i].classList.remove("active");
    }
    btns[x].classList.add("active");

    if(x == 0){
        audio.play();
    }
    if(x == 1){
        audio.pause();
    }
    if(x == 2){
        audio.pause();
        audio.currentTime = 0;
    }
}
</script>
</body>
</html>