let button;

let input;

let audio;

let currentImage;

​

let lib = {

  "eclipse": ["EclipseMage.png", "Eclipse.mp3"],

  "big bang": ["BigBangMage.png", "Big Bang.mp3"],

  "doomsday": ["doomsdayImage.jpg", "Doomsday.mp3"], 

  "lil split": ["lilwhiperspliter.jpg", "SplitKing.mp3"], 

  "vital": ["Vital.jpg", "Vital.mp3"], 

  "neo tokyo": ["NeoTokyoMage.jpg", "Neo Tokyo.mp3"],

  "ghost": ["", "SpiesMe.mp3"],

  "thunder roll": ["thunderrl.png", "Thunder Roll.mp3"]

};

​

function preload() {

  for (let key in lib) {

    lib[key][0] = loadImage(lib[key][0]);  // Preload images

  }

  utube = loadImage('beesandbombs.gif');  // Additional image preload

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  image(utube, 240, 0, 100, 100); // Display utube image

  // Create the play button

  button = createButton('Play');

  button.position(200, 350);

  button.mousePressed(playSong);

​

  // Create the search bar for song selection

  input = createInput();

  input.position(50, 0);

  input.attribute('placeholder', 'Enter song name (e.g., Eclipse or Doomsday)');

​

  // Initialize the audio element

  audio = createAudio();

}

​

function playSong() {

  let songName = input.value().toLowerCase();

  if (lib[songName]) {

    let [imgFile, audioFile] = lib[songName];

    currentImage = imgFile;  // Set current image

    audio.src = audioFile;   // Set audio file source

    audio.play();

    redraw();  // Trigger draw to refresh the image display

  } else {

    console.log("Song not found.");

  }

}

​

function draw() {

  background(0);  // Clear the screen

  if (currentImage) {

    image(currentImage, 0, 0, 240, 240);  // Display current image

  }

}

​