Bouton play, pause et mute/demute

parsimonhi a écrit :
Bonjour,

Plutôt que de changer l'aspect des boutons, il faut mieux avoir un bouton pour chaque fonctionnalité (un bouton "play", un bouton "pause", etc.). Et ensuite, quand on appuie sur un bouton, on affiche ou cache les boutons nécessaires.

Et comme tu décore des boutons avec des images, je suggère d'utilise la balise <button type="button"> au lieu de <input type="button">.

Par exemple (en faisant des modifications a minima), si on crée 4 boutons (play, pause, mute, demute), le html relatifs à ces boutons devient (j'ai ajouté une classe aux boutons pour les styler plus facilement) :

<div id="content">
	<canvas id="canvas"></canvas>
	<audio id="audio" loop></audio>
	<div class="controls">
		<button class="audioBtn" type="button" id="buttonPlay"><img src="img/play-solid.svg" alt="play"></button>
		<button class="audioBtn" type="button" id="buttonPause"><img src="img/pause-solid.svg" alt="pause"></button>
		<button class="audioBtn" type="button" id="buttonMute"><img src="img/mute-solid.svg" alt="mute"></button>
		<button class="audioBtn" type="button" id="buttonDemute"><img src="img/demute-solid.svg" alt="demute"></button>
	</div>
</div>

Dans le js, on rajoute les fonctions gérant ces nouveaux boutons (voir à la fin du js) :

window.onload = function() {
    
    buttonPlay.onclick = function() {
      audio.src = "onigiri_audio.mp3";
      audio.load();
      audio.play();
      var context = new AudioContext();
      var src = context.createMediaElementSource(audio);
      var analyser = context.createAnalyser();
  
      var canvas = document.getElementById("canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      var ctx = canvas.getContext("2d");
  
      src.connect(analyser);
      analyser.connect(context.destination);
  
      analyser.fftSize = 256;
  
      var bufferLength = analyser.frequencyBinCount;
      console.log(bufferLength);
  
      var dataArray = new Uint8Array(bufferLength);
  
      var WIDTH = canvas.width;
      var HEIGHT = canvas.height;
  
      var barWidth = (WIDTH / bufferLength) * 2.5;
      var barHeight;
      var x = 0;
  
      function renderFrame() {
        requestAnimationFrame(renderFrame);
  
        x = 0;
  
        analyser.getByteFrequencyData(dataArray);
  
        ctx.fillStyle = "#000";
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
  
        for (var i = 0; i < bufferLength; i++) {
          barHeight = dataArray[i];
          
          var r = barHeight + (25 * (i/bufferLength));
          var g = 250 * (i/bufferLength);
          var b = 50;
  
          ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
          ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
  
          x += barWidth + 1;
        }
      }
  
      audio.play();
      renderFrame();
    };
    buttonPause.onclick = function()
		{
			audio.pause();
		};
    buttonMute.onclick = function()
		{
			audio.muted=true;
			buttonMute.style.display="none";
			buttonDemute.style.display="inline-block";
		};
    buttonDemute.onclick = function()
    	{
    		audio.muted=false;
			buttonMute.style.display="inline-block";
			buttonDemute.style.display="none";
    	};
};

Et on modifie le css pour que tout ça s'affiche correctement en remplaçant :

#button {
    background-image: url(img/play-solid.svg);
    background-color: var(--color6);
    color: var(--color1);
    padding: 16px;
    font-size: 10px;
    border: none;
    cursor: pointer;
}

par

.audioBtn {
	display: inline-block;
    background-color: var(--color6);
    color: var(--color1);
    padding: 16px;
    font-size: 10px;
    border: none;
    cursor: pointer;
    outline:10px solid red;
}

#buttonDemute {
	display: none;
}

Amicalement,