P5js audio array loop issues

p5.js Libraries
1

Hi all, I am building an audio/visual project where I have a visual and background change on click and I want a sound to play every time the mouse is clicked. So click once, animation/track1, click again, animation/track2 and so forth.

I am having issues writing my loop to go through the array and my code is all messed up now from throwing everything at the wall lol. Can someone help me properly write the syntax for the loop?

I’m guessing my array is in the wrong place and/or my loop is not written correctly at all. Had success with playing one single audio clip on click, but that’s it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="resources\p5.js"></script>
    <script src="resources\p5.dom.js"></script>
    <script src="resources\p5.sound.js"></script>
    <script type="text/javascript" src="js\app.js"></script>
    <link rel="stylesheet" href="css\style.css">
    <title>Breathe</title>
</head>
<body>
     
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 


let outerDiam = 0;
let cnv;
let px;
let py;
let bgColor;
let sound1;
let sound2;
let sound3;
let sound4;
let sound5;
let allSounds;

function centerCanvas() {
  let x = (windowWidth - width) / 2;
  let y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() { 
  sound1 = loadSound('https://www.dl.dropboxusercontent.com/s/hkg7jnhfwic842j/bubbles.mp3?dl=0', loaded);
  sound2 = loadSound('https://www.dl.dropboxusercontent.com/s/9el41r25exizbwl/clay.mp3?dl=0', loaded);
  sound3 = loadSound('https://www.dl.dropboxusercontent.com/s/8o5rgfknx0do8ps/confetti.mp3?dl=0', loaded);
  sound4 = loadSound('https://www.dl.dropboxusercontent.com/s/g5auzxd6lkk522a/corona.mp3?dl=0', loaded);
  sound5 = loadSound('https://www.dl.dropboxusercontent.com/s/pc73ig27wmmnc4l/dotted-spiral.mp3?dl=0', loaded);
  cnv = createCanvas(windowWidth, windowHeight);
  cnv.style('display', 'block');
  centerCanvas();
  bgColor = random(150, 255);
} 

function loaded() {
  console.log('song is loaded');
}

function windowResized() {
  centerCanvas();
}

function draw() { 
  background(bgColor);
  for (let i = 0; i < 5; i++){
    let diam = outerDiam - 30 * i;  
  if (diam > 0) {
    let fade = map(diam, 0, width, 0, 255);
      stroke(fade);
      noFill();
      ellipse(px, py, diam);
  }
} 
    outerDiam = outerDiam + 2;
}

function mousePressed() {
  outerDiam = 0;
  px = random(width);
  py = random(height);
  bgColor = random (150, 255);
  
//  if (!sound1.isPlaying()) {
//     sound1.play();
//     sound1.play();
// } else {
//     sound1.pause();
// }
 allSounds = [sound1, sound2, sound3, sound4, sound5];
 let newSound = [];
 for (let i = 0; i < allSounds.length; i++) {
   allSounds[i].push(newSound);
   allSounds[i].play();
  }
}
1 Like
2

possible that button logic helps you
https://editor.p5js.org/kll/sketches/NIwFX54Gk

1 Like
3

I was thinking of assigning the different sounds to key presses and do it that way, but how would this translate to mobile? In my mind, I wanted the click function so it could be applied to mobile.

4

i not understand, we talk p5.js in browser,
i call that page from a tablet and that button works ( and the sound )

or you dream of a android app?

and that button class structure i give you is a good start for make many buttons?

the idea was originally to show song start stop logic,
you not have to use that code at all.

5

ok sorry I am confused as well lol. Is there a way to loop each sound, every time I click the mouse? This is what I want to happen. click(sound1) click again(sound2).

You tested my code and all of the sounds play? Or just one sound. My goal is to have multiple sounds start every time the mouse is clicked. Can I do this? Or should I use keypress instead and assign each sound to a key.

6

-a- i not tested your code
-b- the newSound i not understand
-c- play on click all songs not makes sense, but up to you
-d- key press or mouse press should be same logic,
what requires that you make multiple buttons for mouse too,
( like you have many keys on the keyboard )
and that i wanted to show you: learn to make buttons.