p5.jsのサウンドエフェクトの配列

Question

私の目的は、嵐の隊員が画面の周りを跳ね返り、一度クリックすると音を出すことです。私はそれを達成することができましたが、今はもっと効果的なサウンドエフェクトを追加したいと思います。サウンドエフェクトもランダム化したい。私は配列を試みたが、私はそれを把握するように見える。ここで

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

は、あなたがそれを達成できた方法です...

• は、すべてのサウンドエフェクトを含む配列を作成
• 乱数（インデックス）Math#randomまたはp5#randomを使用して生成しますその番号を（index）〜soundFxにすると、効果音が再生されます

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>