Audiovisual

let soundFiles = [];

let buttons = [];

let volumeSlider;

let currentSound;

let backgroundColor;

let uploadedImage; // Variable to store the uploaded image

let imageX = 0;    // Initial X-coordinate for the animation

let direction = 1; // Direction of movement

​

// Preload audio files and image

function preload() {

  soundFiles.push(loadSound("1.mp3"));

  soundFiles.push(loadSound("2.mp3"));

  soundFiles.push(loadSound("3.mp3"));

  uploadedImage = loadImage("21.jpg"); // Load the provided image

}

​

function setup() {

  // Set up the canvas and background

  createCanvas(800, 600);

  backgroundColor = color(50, 50, 70);

​

  // Volume slider setup

  textFont("Georgia");

  volumeSlider = createSlider(0, 1, 0.5, 0.01);

  volumeSlider.position(20, height - 40);

  volumeSlider.style("width", "150px");

​

  // Add buttons to play the sounds

  buttons.push(createButton("Play Sound 1"));

  buttons.push(createButton("Play Sound 2"));

  buttons.push(createButton("Play Sound 3"));

​

  // Position and style buttons

  for (let i = 0; i < buttons.length; i++) {

    buttons[i].position(20, 20 + i * 40);

    buttons[i].mousePressed(() => playSound(i));

    buttons[i].style("font-size", "16px");

    buttons[i].style("background-color", "#007BFF");

    buttons[i].style("color", "#FFF");

    buttons[i].style("border", "none");

    buttons[i].style("padding", "10px 20px");

    buttons[i].style("cursor", "pointer");

  }

}

​

function draw() {

  background(backgroundColor);

​

  // Update volume based on slider

  if (currentSound && currentSound.isPlaying()) {

    currentSound.setVolume(volumeSlider.value());

  }

​

  // Draw visual elements

  noStroke();

  let x = map(mouseX, 0, width, 0, 255);

  let y = map(mouseY, 0, height, 0, 255);

  fill(x, y, 200);

  ellipse(width / 2, height / 2, 200, 200);

​

  // Animate the image

  imageMode(CENTER);

  tint(255, 150); // Add transparency

  image(uploadedImage, imageX, height / 2, 300, 300);

​

  // Update animation

  imageX += 2 * direction;

  if (imageX > width || imageX < 0) {

    direction *= -1; // Reverse direction when reaching canvas edges

  }

​

  // Display text

  fill(255);

  textSize(16);

  text("Adjust Volume:", 20, height - 50);

}

​

// Function to play a specific sound

function playSound(index) {

  // Stop any currently playing sound

  if (currentSound) {

    currentSound.stop();

  }

​

  // Play the selected sound

  currentSound = soundFiles[index];

  currentSound.play();

}

​