Emma NM-Project-10(Interactive Sound)

To hear the animal’s sound, click on the image. The four sounds are a dog barking, duck quacking, cat meowing, and cow mooing. To turn the sound off, click the image again.

sound

/* 
Emma Nicklas-Morris
Section B
enicklas
Project-10
Interactive Sound
*/


var cowSound;
var duckSound;
var catSound;
var dogSound;

var dogImg;
var cowImg;
var duckImg;
var catImg;
var adj = 10;


function preload() {
    // load my 4 animal sounds and images
    cowSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/cow.wav");
    duckSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/duck.wav");
    catSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/cat.wav");
    dogSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/dog.wav");

    catImg = loadImage("https://i.imgur.com/nliPYUx.jpg");
    duckImg = loadImage("https://i.imgur.com/mwzKbS9.jpg");
    cowImg = loadImage("https://i.imgur.com/u6LpEOD.jpg");
    dogImg = loadImage("https://i.imgur.com/0tT7kPQ.jpg");

}


function setup() {
    createCanvas(500, 400);
    useSound();

}


function soundSetup() {
    cowSound.setVolume(.5);
    catSound.setVolume(2);

}


function draw() {

    background("lightblue");

    // display the 4 animal images
    image(catImg, width/2 - adj, 0, catImg.width/2, catImg.height/2);
    image(duckImg, 0, 0, duckImg.width/5, duckImg.height/5);
    image(dogImg, -3 * adj, height/2, dogImg.width/2, dogImg.height/2);
    image(cowImg, width/2 + adj + 6, height/2, cowImg.width/1.5 , cowImg.height/1.5);

}



function mousePressed() {
    // when you click on duck picture, play quack sound
    // to turn off, click again.
    if ((mouseX < duckImg.width/5) & (mouseY < duckImg.height/5)) {
        if (duckSound.isLooping()) {
            duckSound.stop();
        }
        else {
            duckSound.loop();
        }

    }

    // when you click on cat picture, play meow sound
    // to turn off, click again.
    else if ((mouseX > duckImg.width/5) & (mouseY < height/2)) {
        if (catSound.isLooping()) {
            catSound.stop();
        }
        else {
            catSound.loop();
        }

    }

    // when you click on dog picture, play barking sound
    // to turn off, click again.
    else if ((mouseX < width/2 + adj + 6) & (mouseY > duckImg.height/5)) {
        if (dogSound.isLooping()) {
            dogSound.stop();
        }
        else {
            dogSound.loop();
        }

    }

    // when you click on cow picture, play mooing sound
    // to turn off, click again.
    else if ((mouseX > width/2 + adj + 6) & (mouseY > height/2)) {
        if (cowSound.isLooping()) {
            cowSound.stop();
        }
        else {
            cowSound.loop();
        }

    }
}

I struggled a lot to get my sounds to work, most of it was something I didn’t quite understand with how p5.js needs to have the sound library called in the html. I also learned that sounds take up a lot of browsing cache, so to help keep your page refreshing properly, you need to clear your cache often when using sounds. My idea is geared towards a pre-school/kindergarten activity. It would allow them to learn what animals make what sounds.