exte bienvenue

Sorcière Corbeau, la reine fée des astuces. Découvrez les secrets de mon univers !

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. 

3 commentaires:

  1. coucou Sorcière merci encore pour tout tes partages bonne soirée bisous ♥

    RépondreEffacer
  2. Ah oui, super avec le bouton !!! 👍

    RépondreEffacer
    Réponses
    1. Fait plaisir . Jai oublier verrouiller les commentaires lol mais si vous faites suite cliquez sur mon livre d'or en bas a droite.

      Effacer