let button1, button2, button3, stopButton;

    let volumeSlider;

    let circleSpacing = 30;  // Space between each light

​

    function preload() {

      // Preload music files

      song1 = loadSound('1.mp3');

      song2 = loadSound('2.mp3');

      song3 = loadSound('3.mp3');

    }

​

    function setup() {

      createCanvas(800, 400);  

      textAlign(CENTER);

      textSize(18);

      // Create button 1

      button1 = createButton('Play Harry Potter');

      button1.position(150, 130);  // 

      button1.mousePressed(() => playSong(song1));

​

      //create button 2

      button2 = createButton('Play Pirates of the Caribbean');

      button2.position(150, 180);

      button2.mousePressed(() => playSong(song2));

​

      //create button 3

      button3 = createButton('Play Titanic');

      button3.position(150, 230);

      button3.mousePressed(() => playSong(song3));

​

      //create stop button

      stopButton = createButton('Stop All');

      stopButton.position(150, 280);

      stopButton.mousePressed(stopSongs);

​

      // create volume slider

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

      volumeSlider.position(400, 100);

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

    }

​

    function playSong(song) {

      stopSongs(); // Stop any currently playing songs

      song.setVolume(volumeSlider.value()); // Set initial volume

      song.play(); // Play selected song

    }

​

    function stopSongs() {

      if (song1.isPlaying()) {

        song1.stop();

      }

      if (song2.isPlaying()) {

        song2.stop();

      }

      if (song3.isPlaying()) {

        song3.stop();

      }

    }

​

    function draw() {

      background(50, 50, 100); 

      // Draw lights around the screen edges

      drawRandomCircles();

​

      // Volume control text

      fill(255);

      noStroke();

      textSize(16);

      text('Volume Control', 475, 80);

​

      // song choosing text

      text('Choose your Music', 220, 100);

​

      // Adjust volume in real-time

      let volume = volumeSlider.value();

      song1.setVolume(volume);

      song2.setVolume(volume);

      song3.setVolume(volume);

      //back to "home" button

  fill(80, 120, 255);

  rect(width-775,height-75,100,50);

  fill(255);

  textSize(20);

  textAlign(CENTER,CENTER);

  text("Home",width-775,height-75,100,50);

    }

​

    function drawRandomCircles() {

      // lights along the top and bottom borders

      for (let x = 10; x < width-10; x += circleSpacing) {

        fill(random(255), random(255), random(255)); // Random color for each light

        ellipse(x, 10, 20, 20); // Top border light

        ellipse(x, height-10, 20, 20); // Bottom border light

      }

​

      // lights along the left and right borders

      for (let y = 10; y < height-10; y += circleSpacing) {

        fill(random(255), random(255), random(255)); // Random color for each light

        ellipse(10, y, 20, 20); // Left border light

        ellipse(width-10, y, 20, 20); // Right border light

      }

    }

​

function mousePressed() {

  // Check if the "Home" button is clicked

  if (mouseX >= 20 && mouseX <= 120 && mouseY >= height - 60 && mouseY <= height - 10) {

    // Redirect to the arcade home page 

    window.location.href = "arcade.html"; 

  }

}