Play music - Clicking in objects

p5.js Libraries
1

please format code with </> button * homework policy * asking questions

Hello guys.

I am trying to make a specific mp3 file plays when a specific circle is clicked.
I have a class named as Balls.

Can someone help me with this code, please?
I could write some push.balls with position, color en indicating mp3 directory address. Still a condition to play when clicked inside the ball. But, it’s playing always the same mp3 file. Does not matter what ball was clicked.

let jukebox = [];
let balls = [];
let color;
let milesdavis;
let song;


function preload() {
  milesdavis = loadImage('images/background_alpha.jpg');
  jukebox = loadSound(['songs/s1.mp3', 'songs/s2.mp3', 'songs/s3.mp3']);
}

function setup() {
  createCanvas(1024, 600);
  soundFormats('mp3');
  balls.push(new Balls(70, 300, 'b1', '#5B7478', 'songs/s1.mp3'));
  balls.push(new Balls(70, 380, 'b1','#5B7478', 'songs/s2.mp3'));
  balls.push(new Balls(70, 460, 'b1', '#5B7478', 'songs/s3.mp3'));
}

function mousePressed() {
  for (let i = 0; i < balls.length; i ++) {
    balls[i].click();
  }
}

function draw() {
  imageMode(CENTER);
  image (milesdavis, width/2, height/2, width, height);
  for (let i = 0; i < balls.length; i ++) {
    balls[i].display();
    
  }
}

class Balls {
  constructor(x, y, nome, color, song) {
    this.x = x;
    this.y = y;
    this.n = nome;
    this.c = color;
    this.d = 75;
    this.s = song;

    this.display = function () {
      noStroke();
      fill(this.c);
      ellipse(this.x, this.y, this.d, this.d);
    }
    
    this.click = function() {
      var d = dist(mouseX, mouseY, this.x, this.y);
      if (d < this.d/2) {
        jukebox.play(); 
        console.log(this.n)
      }
    }
  }
}