* @name Load and Play Sound

 * @arialabel Red screen turns green when the user clicks on it and plays music

 * @description Load sound during preload(). Play a sound when canvas is clicked.

 * <br><br><em><span class="small"> To run this example locally, you will need the

 * <a href="http://p5js.org/reference/#/libraries/p5.sound">p5.sound library</a>

 * a sound file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.</span></em>

 */

let song;

var x = 50;

var y = 180;

var speed = 2;

​

function preload() {

  img = loadImage("fountainassets/bell.png");

​

  img2 = loadImage("fountainassets/drop.png");

​

  img3 = loadImage("fountainassets/wave.png");

}

function setup() {

  song = loadSound("fountainassets/fountainex.mp3");

  song2 = loadSound("fountainassets/drop.mp3");

  song3 = loadSound("fountainassets/wave.mp3");

  createCanvas(100, 500);

  background(0, 0, 0);

​

  createCanvas(800, 500);

​

  background(255, 0, 0);

}

function touchStarted(){ if (mouseX > 150 && mouseX < 250 && mouseY > 50 && mouseY < 250)

    if (song.isPlaying()) {

      // .isPlaying() returns a boolean

      song.stop();

      background(255, 0, 0);

    } else {

      song.play();

      background(x, 155, 0);

    }

  if (mouseX > 350 && mouseX < 450 && mouseY > 50 && mouseY < 250)

    if (song2.isPlaying()) {

      // .isPlaying() returns a boolean

      song2.stop();

      background(255, 0, 0);

    } else {

      song2.play();

      background(x, 155, 0);

    }

​

  if (mouseX > 550 && mouseX < 650 && mouseY > 50 && mouseY < 250)

    if (song3.isPlaying()) {

      // .isPlaying() returns a boolean

      song3.stop();

      background(255, 0, 0);

    } else {

      song3.play();

      background(x, 155, 0);

    }

              }

function mousePressed() {

  if (mouseX > 150 && mouseX < 250 && mouseY > 50 && mouseY < 250)

    if (song.isPlaying()) {

      // .isPlaying() returns a boolean

      song.stop();

      background(255, 0, 0);

    } else {

      song.play();

      background(x, 155, 0);

    }

  if (mouseX > 350 && mouseX < 450 && mouseY > 50 && mouseY < 250)

    if (song2.isPlaying()) {

      // .isPlaying() returns a boolean

      song2.stop();

      background(255, 0, 0);

    } else {

      song2.play();

      background(x, 155, 0);

    }

​

  if (mouseX > 550 && mouseX < 650 && mouseY > 50 && mouseY < 250)

    if (song3.isPlaying()) {

      // .isPlaying() returns a boolean

      song3.stop();

      background(255, 0, 0);

    } else {

      song3.play();

      background(x, 155, 0);

    }

}

function draw() {

  r = map(x, 0, 600, 0, 255);

  b = map(x, 0, 600, 255, 0);

​

  w = map(y, 0, 600, 255, 0);

  background(r, w, b);

​

  stroke(x - 170);

  strokeWeight(1);

  noFill();

  ellipse(x, y, 100, 100);

​

  if (x > width - 50 || x < 50) {

    speed = speed * -1;

  }

​

  x = x + speed;

​

  ellipse(200, 100, 100, 100);

  image(img, 150, 50, 100, 100);

​

  ellipse(400, 100, 100, 100);

  image(img2, 350, 50, 100, 100);

​

  ellipse(600, 100, 100, 100);

  image(img3, 550, 50, 100, 100);

}

​