Musique invisible avec bouton

 On m'a demander comment stopper la musique  si on en veut pas.

 Au debut jme suis dis juste a couper le volume  lol mais apres reflexion

 c'est vrai que sa peut etre chaint la musique surtout si on aime pas ce genre. Donc voila.

-----

- Code a inserer dans un Gadget en HTML Javascript -

CODE:

<!-- 

     CODE CRÉÉ PAR : Sorcière Corbeau 

     COLLABORATION : AI 

-->

<!-- Le Bouton de contrôle (Fixé en bas à droite) -->

<div id="controleur-musique" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999;">

    <button id="btn-audio" onclick="toggleMusique()" 

        style="background: #1a1a1a; color: #ffd700; border: 2px solid #ffd700; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; font-size: 20px; box-shadow: 0px 0px 15px rgba(255, 215, 0, 0.3); transition: 0.3s;">

        ♪

    </button>

</div>

<!-- Le Lecteur Audio -->

<audio id="mon-lecteur-audio" loop>

  <source src="URL MUSIQUE MP3" type="audio/mpeg">

</audio>

<script>

  var audio = document.getElementById('mon-lecteur-audio');

  var btn = document.getElementById('btn-audio');

  // 1. Activation au premier clic n'importe où sur la page (pour Chrome)

  window.addEventListener('click', function() {

    if (audio.paused) {

      audio.play();

      btn.innerHTML = "||"; // Symbole Pause

      btn.style.boxShadow = "0px 0px 15px rgba(255, 255, 255, 0.5)";

    }

  }, { once: true });

  // 2. Fonction pour que le visiteur puisse stop/activer le son

  function toggleMusique() {

    // On stoppe la propagation pour ne pas déclencher l'écouteur "window"

    event.stopPropagation(); 

    

    if (audio.paused) {

      audio.play();

      btn.innerHTML = "||";

      btn.style.color = "#ffd700";

    } else {

      audio.pause();

      btn.innerHTML = "♪";

      btn.style.color = "#ffffff"; // Blanc en arret

    }

  }

</script>

======= Note ======

Bottom =  est pour ajuster la hauteur

Right =Droite  mais si vous le voulez a gauche juste remplacer le right par left.