Interactive Ball Animation with Directional Sound in p5.js

 let ballX;

let ballSpeed = 1;

let ballDirection = 1;

let firstSound, secondSound;

function preload() {

  soundFormats('mp3');

  firstSound = loadSound('first.mp3');

  secondSound = loadSound('second.mp3');

}

function setup() {

  createCanvas(windowWidth, windowHeight);

  ballX = width / 2;

}

function draw() {

  background(220);

  fill(255, 0, 0);

  ellipse(ballX, height / 2, 50, 50);

  // Move the ball

  ballX += ballSpeed * ballDirection;

  // Check for edges and reverse direction

  if (ballX >= width - 25) {

    ballDirection = -1;

    playSecondSound();

  } else if (ballX <= 25) {

    ballDirection = 1;

    playFirstSound();

  }

}

function playFirstSound() {

  if (!firstSound.isPlaying()) {

    secondSound.stop();

    firstSound.play();

  }

}

function playSecondSound() {

  if (!secondSound.isPlaying()) {

    firstSound.stop();

    secondSound.play();

  }

}