p5.j​​s中的音效数组

Question

My aim is to have a storm trooper img bounce around the screen and make a sound once clicked. I have managed to achieve that but now I want to add more sound effects (maybe two more). I want the sound effects to randomise as well. I tried an array but I cant seem to figure it out.

var img;
var trooper;
var soundFx;

function preload() {

 img = loadImage("stormy3.png");
 sfx1 = loadSound('Followme(1).mp3');
 sfx2 = loadSound('LetmeseeyourID.mp3');

}

function setup() {
 soundFormats('mp3');
 soundFx = sfx1;
 // background(255, 0, 0, 0.4);
 background(0);
 var myCanvas = createCanvas(800, 800);
 myCanvas.position(0, 0);
 trooper = new storm(random(width),random(height));
}

function draw() {
 // clear();
 background(0);
 trooper.show();
 trooper.update();
}
function mousePressed() {
 trooper.clicked();
}
function storm(x,y) {

 this.x = x;
 this.y = y;
 this.xSpeed = 3;
 this.ySpeed = 3;
 this.img = img;

 this.show = function() {
  image(img,this.x,this.y);
};

this.update = function() {

this.x = this.x + this.xSpeed;
this.y = this.y + this.ySpeed;

if(this.x > width || this.x < 0) {
  this.xSpeed = this.xSpeed * -1;
}

if(this.y > height || this.y < 0) {
  this.ySpeed = this.ySpeed * -1;
}
};
  this.clicked = function() {
  var d = dist(mouseX,mouseY,this.x,this.y);
  if (d < 150) {
    this.xSpeed = -5
    this.ySpeed = -5;
    soundFx.play();
  }
};
} 

Answer 1

Here's how you could achieve that ...

• create an array containing all the sound effects
• generate a random number (index) using Math#random or p5#random and pass that number (index) to soundFx when playing a sound effect

 var img; var trooper; var soundFx; var randomSFX; function preload() { img = loadImage("https://i.imgur.com/aKtmInB.png"); sfx1 = loadSound('https://istack.000webhostapp.com/bell1.mp3'); sfx2 = loadSound('https://istack.000webhostapp.com/bell2.mp3'); } function setup() { soundFormats('mp3'); soundFx = [sfx1, sfx2]; // background(255, 0, 0, 0.4); var myCanvas = createCanvas(635, 218); myCanvas.position(0, 0); background(0); trooper = new storm(random(width), random(height)); } function draw() { // clear(); background(0); trooper.show(); trooper.update(); } function mousePressed() { trooper.clicked(); } function storm(x, y) { this.x = x; this.y = y; this.xSpeed = 3; this.ySpeed = 3; this.img = img; this.show = function() { image(img, this.x, this.y); }; this.update = function() { this.x = this.x + this.xSpeed; this.y = this.y + this.ySpeed; if (this.x > width || this.x < 0) { this.xSpeed = this.xSpeed * -1; } if (this.y > height || this.y < 0) { this.ySpeed = this.ySpeed * -1; } }; this.clicked = function() { var d = dist(mouseX, mouseY, this.x, this.y); if (d < 150) { this.xSpeed = -5 this.ySpeed = -5; randomSFX = Math.floor(Math.random() * soundFx.length); //or use, floor(random(0, soundFx.length)); soundFx[randomSFX].play(); } }; } 

 body { margin: none; overflow: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.sound.min.js"></script>