Play the same sound on each of the first 5 mouse presses, reset after the sixth mouse pressed?

trink

Hi all, I am having difficulty with something that is probably quite simple in P5.js :( I have an animation loop of six images and would like the sound to play on each of the first 5 mouse pressed interactions but not when the last image is shown and it is looping back to the first image. The animation loops back to the first image so the sound clip should start again if the mouse is pressed, any thoughts? Thank you in advance!

    var ul;
    var apple;
    var bite;
    var b = 0 ;

    function preload(){
      ul = loadImage("images/background.png");

      bite = loadSound("sounds/Apple_Bite.mp3");

      apple = loadAnimation("images/apple/apple_01.png","images/apple/apple_06.png");
      apple.playing = false; //stop animation from playing, default set to play in p5.play.js library
    }

    function setup() {
    createCanvas(1024,768);
      noCursor();
    }

    function draw() {
      image(ul,0,0,width,height); //background image

      scale(0.5); //scale size of apple images
      animation(apple, 1024, 768); 


      if(b < 5){
        bite.play();

      }
    }


    function mousePressed() {

      b++;

      apple.nextFrame();   //move ahead one frame
    }

AiSard

Do you want a sound to play on the click while b<5, or music to play throughout while b<5 (your code is doing the latter at the moment)

Not sure about P5.js, but moving the if statement to mouseClicked() should work?:

void mouseClicked() {
  if(b<5){
    bite.play();
    b++;
  }else{
    b=0;
  }
  apple.nextFrame();
}

AiSard

woops, copy-paste mistake o///o

void mouseClicked(){

Edit: I have discovered the Edit button

trink

Thank you @AiSard, much appreciated!