REAL-TIME INTERACTIVE WEB APP – JS, API

What for? 

– Intermediate Programming Course Final Project

Role Played?

– UX Designer & Programmer

Who Designed for?

– All users

Why This App?

– People are in different kinds of moods everyday, probably happy, sad or annoyed. When in one type of mood, people like to listen to the songs related to their feelings so that the emotion can be released. Additionally, I provided multiple galleries according to the users’ choice so that users can know what other same-feeling people did. I think that would be a fun way to help users relax.

Introduction

Mood App is an interactive web application. By using this app, users can enjoy different Flicker galleries and songs according to their mood.

In this project, I used the sound.js and preload.js javascript library as well as the Flicker API to load the picture data.

This design aims to let the users interact with this web app to give users an exclusive feeling based on their mood and choices.

Mockup

 

Main Code Sample
//get pic from flickerAPI in json format
    var flickerAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=614d833105ad459f9a969182d884200d&tags=happy&format=json&jsoncallback=?";
    $.getJSON(flickerAPI, function(data) {
        $.each(data.photos.photo, function(i, item) {
            //use photo data to make photo url
            var photoURL = 'https://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'
                //get photo ID
            var photoID = item.id;
            //give each image attributes then append to matched div
            $('<img/>').attr('id', photoID).attr('src', photoURL).attr('width', '240px').attr('height', '240px').appendTo('#showhappyimages');
            //limite the volume of pic to be loaded
            if (i === 10) {
                return false;
            }
        });
    });

//function to show pic in slides
    setInterval(function() {
        //hide the first pic so that when the function loop, it won't show the first pic every time
        $("#showhappyimages > img:gt(0)").hide();
        $('#showhappyimages > img:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#showhappyimages');
    }, 3000);

<!--------------------Preload Sound and play song function-------------------------------->
var happysong = "happy";
//Before playing a sound, it must be registered. loadSound() will be called once the page is loaded so that all the songs will be preloaded before it's played
function loadSound() {
    createjs.Sound.registerSound("songs/happy.mp3", happysong);
}
function playSound() {
    //play the song and return the object
    song = createjs.Sound.play(happysong);
    // when playing a song, change to gif pic to give users a feedback
    $("#record").attr('src', 'images/record.gif');
}
<!----------------------Hover function for the Song Playlist---------------------------->

/*.hover() method binds handlers for both mouseenter and mouseleave events. In that case, when mouse moves to the li, change background and text color to give users a feedback and play the song; similarly, when mouse moves out of the li, make it become original style and stop the song*/
$("li.happy").hover(function() {
        $(this).css({
            "background-color": "white",
            "color": "black",
            "opacity": "0.5"
        });
        createjs.Sound.play(happysong);
    },
    function() {
        $(this).css({
            "background-color": "transparent",
            "color": "white",
            "opacity": "initial"
        });
        createjs.Sound.stop(happysong);
    });
<!----------------------------End song playlist-------------------------------->

/*pause function*/
$('#pausesong').click(function() {
    pause();
});

function pause() {
    "use strict";
    //when pause = true, song will be stopped immidiately
    song.paused = !song.paused;
    console.log("i'm pausing");
    //if song.paused = ture -> change image to play
    //if song.paused = false -> change image to pause
    if (song.paused) {
        $("#pausesong").attr('src', 'images/play.png');
        $("#record").attr('src', 'images/record.png');
    } else {
        $("#pausesong").attr('src', 'images/pause.png');
        $("#record").attr('src', 'images/record.gif');
    }
}

/*stop*/
//stop song in the 'LISTEN TO YOURSELF' section
function singlestop() {
    console.log("stop this!");
    //stop the current-playing song
    createjs.Sound.stop($(this));
    //when stopping the song, change to a stable image so that users know the record player stops
    $("#record").attr('src', 'images/record.png');
}


 

Experience the Mood App Here!!!