week09 -Interactive Sound 02

//timeline

var timeline;

​

​

//songs

var songcassette;

var songcd;

var songipod;

var songyoutube;

var songspotify;

​

​

//buttons

var btncassette;

var btncd;

var btnipod;

var btnyoutube;

var btnspotify;

​

// background color

var bg;

​

// Description Text

var descriptionTxt;

​

// Title Text

var headerTxt;

​

// Info text

var currentlyPlayingTxt;

​

​

function preload() {

  songcassette = loadSound('thriller.mp3');

  songcd = loadSound('heart.mp3');

  songipod = loadSound('umberella.mp3');

  songyoutube = loadSound('uptown.mp3');

  songspotify = loadSound('lights.mp3');

  timeline = loadImage('timeline.png');

}

​

function setup() {

  cnv = createCanvas(600, 450);

​

  // HTML cassette image button

  btncassette = new imageButton("cassette.png", 150, 150);

  btncassette.position(-20, height / 2 - 15); // Set x and y position of the button

  btncassette.mousePressed(cassetteBtnPressed); // play song

  btncassette.mouseReleased(cassetteBtnReleased); // stop song

​

  //CD button

  btncd = new imageButton("cd.png", 100, 100);

  btncd.position(130, height / 2 + 15); 

  btncd.mousePressed(cdBtnPressed); 

  btncd.mouseReleased(cdBtnReleased); 

​

  //Ipod button

  btnipod = new imageButton("ipod.png", 100, 100);

  btnipod.position(250, height / 2 + 20); 

  btnipod.mousePressed(ipodBtnPressed); 

  btnipod.mouseReleased(ipodBtnReleased); 

​

  //Youtube button

  btnyoutube = new imageButton("youtube.png", 100, 100);

  btnyoutube.position(370, height / 2 ); 

  btnyoutube.mousePressed(youtubeBtnPressed); 

  btnyoutube.mouseReleased(youtubeBtnReleased);

​

  //Spotify button

  btnspotify = new imageButton("spotify.png", 90, 90);

  btnspotify.position(485, height / 2 + 20); 

  btnspotify.mousePressed(spotifyBtnPressed); 

  btnspotify.mouseReleased(spotifyBtnReleased);

​

​

  // Title and description text

  bg = "#cad2c5"

  headerTxt = "Song Museum";

  descriptionTxt = "A nostalgic journey with various listening devices, each playing a song that defined it's era!";

​

  // Currently playing track information on buttom

  currentlyPlayingTxt = "...";

​

  // set background color

  background(bg);

​

}

​

function draw() {

  // Set the background color

  background(bg);

​

  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);

​

  image(timeline, 8 , -20);

  // Conditions to set currently playing device information

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

    currentlyPlayingTxt = 'Thriller by Michael Jackson';

  } 

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

    currentlyPlayingTxt = 'My Heart will Go On by Celine Dion';

  }

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

    currentlyPlayingTxt = 'Umberella by Rihanna';

  }

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

    currentlyPlayingTxt = 'Uptown Funk by Bruno Mars';

  }

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

    currentlyPlayingTxt = 'Blinding Lights by The Weeknd';

  }

  else {

    currentlyPlayingTxt = '...'; //when nothing is playing

  }

​

  // Currently playing device information

  textAlign(CENTER);

  textSize(15);

  fill(0);

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

}

​

​

​

//cassette

function cassetteBtnPressed() {

  songcassette.play(); // Play song

}

function cassetteBtnReleased() {

  songcassette.stop(); // stop song

}

​

​

//CD

function cdBtnPressed() {

  songcd.play(); 

}

function cdBtnReleased() {

  songcd.stop(); 

}

​

​

//Ipod

function ipodBtnPressed() {

  songipod.play(); 

}

function ipodBtnReleased() {

  songipod.stop(); 

}

​

​

//Youtube

function youtubeBtnPressed() {

  songyoutube.play(); 

}

function youtubeBtnReleased() {

  songyoutube.stop(); 

}

​

​

//Spotify

function spotifyBtnPressed() {

  songspotify.play(); 

}

function spotifyBtnReleased() {

  songspotify.stop(); 

}