week09 -Interactive Sound 02

// 1- Sounds

var soundFloppy;

var soundNokia;

​

// 2- Buttons

var btn; // floppy button 

var btnNokia;

​

// background color

var cl;

​

// Description Text

var descriptionTxt;

​

// Title Text

var headerTxt;

​

// Info text

var currentlyPlayingTxt;

​

​

function preload() {

  // 3- load sounds

  soundFloppy = loadSound('floppy.mp3');

  soundNokia = loadSound('nokia-3310.mp3');

}

​

function setup() {

  cnv = createCanvas(600, 450);

​

  // HTML Floppy Disk image button

  btn = new imageButton("floppy.png", 100    , 100);

  //                     ^ file name, ^ width, ^ height            

  btn.position(30, height / 2);         // Set x and y position of the button

  btn.mousePressed(floppyBtnPressed);   // Check the line 82: play sound

  btn.mouseReleased(floppyBtnReleased); // Check the line 87: stop sound

  btnNokia = new imageButton("nokia.png", 100    , 100);

  //                     ^ file name, ^ width, ^ height            

  btnNokia.position(145, height / 2);         // Set x and y position of the button

  btnNokia.mousePressed(nokiaBtnPressed);   // Check the line 82: play sound

  btnNokia.mouseReleased(nokiaBtnReleased); // Check the line 87: stop sound

  // Title and description text

  cl = "#ffeebf"

  headerTxt = "Sound Museum";

  descriptionTxt = "Step into a nostalgic journey with Sound Museum, where you can relive the iconic sounds of classic technological devices! Our interactive platform allows you to hear the unique audio signatures of devices that shaped our digital lives.";

​

  // Currently playing track information on buttom

  currentlyPlayingTxt = "...";

​

  // set background color

  background(cl);

}

​

function draw() {

  // Set the background color

  background(cl);

​

  noStroke();

  // Header Title

  textAlign(LEFT);

  textSize(30);

  textLeading(22);

  fill(0);

  text(headerTxt, 20, 50);

​

  // Description Text

  textAlign(LEFT);

  textSize(18);

  textLeading(22);

  fill(0);

  text(descriptionTxt, 20, 70, width - 50);

​

  // Conditions to set currently playing device information

  if (soundFloppy.isPlaying() == true) {

    currentlyPlayingTxt = 'You are listening the sound of a Floppy Disk...';

  } 

  else if(soundNokia.isPlaying() == true) {

    currentlyPlayingTxt = 'You are listening the sound of a Nokia 3310 mobile phone...';

  }

  else {

    currentlyPlayingTxt = '...'; // If nothing is playing then display ...

    soundLevel = 0;

  }

​

  // Currently playing device information

  textAlign(CENTER);

  textSize(12);

  fill(0);

  text(currentlyPlayingTxt, 20, height - 50, width - 50);

}

​

// Call the following function when the user presses mouse button on Floppy Disk Image

function floppyBtnPressed() {

  soundFloppy.play(); // Play floppy sound

}

​

// Call the following function when the user releases mouse button on Floppy Disk Image

function floppyBtnReleased() {

  soundFloppy.stop(); // stop floppy sound when user leaves the mouse

}

​

​

// Call the following function when the user presses mouse button on Floppy Disk Image

function nokiaBtnPressed() {

  soundNokia.setVolume(0.15);

  soundNokia.play(); // Play floppy sound

}

​

// Call the following function when the user releases mouse button on Floppy Disk Image

function nokiaBtnReleased() {

  soundNokia.stop(); // stop floppy sound when user leaves the mouse

}

​