Xu Xu – Project 10 – Sonic Sketch

sketch

//Claire Xu
//xux1@andrew.cmu.edu
//section B
//Project 10
var playerIMG;
var acousticBreeze;
var pianoMoment;
var goingHigher;
var retroSoul;

function preload(){
    var iphoneIMG = "https://i.imgur.com/KeDOgRs.jpg"
    playerIMG = loadImage(iphoneIMG);

    //load 4 tracks
    acousticBreeze = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-acousticbreeze.wav");
    pianoMoment = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-pianomoment.wav");
    goingHigher = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-goinghigher.wav");
    retroSoul = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-retrosoul.wav");
}

function setup(){
    createCanvas(450,450);
    background(255);
}

function soundSetup(){
    //volume for tracks
    acousticBreeze.setVolume(2);
    pianoMoment.setVolume(2);
    goingHigher.setVolume(2);
    retroSoul.setVolume(2);
}

function draw(){
    image(playerIMG, 0,0);
}

function mousePressed(){

    if (mouseX >= 150 & mouseX <= 350){
    //play acousticBreeze when it's pressed
        if (mouseY > 270 & mouseY < 290){
            //play acousticBreeze
            acousticBreeze.play();
            //pause others
            pianoMoment.pause();
            goingHigher.pause();
            retroSoul.pause();
        }
    //play pianoMoment when it's pressed
        if (mouseY > 290 & mouseY < 310){
            //play pianoMoment
            pianoMoment.play();
            //pause others
            acousticBreeze.pause();
            goingHigher.pause();
            retroSoul.pause();
        }
    //play goingHigher when it's pressed
        if (mouseY > 310 & mouseY < 330){
            //play goingHigher
            goingHigher.play();
            //pause others
            acousticBreeze.pause();
            pianoMoment.pause();
            retroSoul.pause();
        }
    //play retroSoul when it's pressed
        if (mouseY > 330 & mouseY < 350){
            //play retroSoul
            retroSoul.play();
            //pause others
            acousticBreeze.pause();
            pianoMoment.pause();
            goingHigher.pause();
        }
    }

    if (mouseX >= 155 & mouseX <= 165 & mouseY >= 385 & mouseY <= 395){
        //pause everything
        acousticBreeze.pause();
        pianoMoment.pause();
        goingHigher.pause();
        retroSoul.pause();
    }
}

For this project I wanted to do a “music app” design, and there are four songs to choose from the album, which can be paused and played by clicking the song titles or the pause button. I drew the interface from scratch in adobe illustrator and photoshop, and wrote the song names in the interface. This was a fun project, but implementing the soundtracks in the file was hard. (The soundtracks are actually only 1 minute long due to the file upload restriction)