Link:
http://imanas.shanghai.nyu.edu/~tlb394/audio/index.html
Sketching Stage:
The original idea for this project was the three of us each make a track that represents a genre and combines them with a radio which the user can switch channels on. But this idea wasn’t suitable for a group project, so we decided to create a scenario where two friends are chatting through the phone, one of them is not in Shanghai but would like to know how the dorms are like, the other friend tells her that she can see it for herself, and the webpage combines all the sounds of the essential elements in the dorms, when the user clicks on it, they can hear the sound.
Design:
The page is divided into two parts, one is the phone call and the other part the simulation of the dorm scene. For the phone part, I photoshopped a telephone gif, when the user clicks onto the telephone, the conversation between two friends will play. Taylah and I recorded the conversation, with me being the one away from the dorm and Taylah intruding the dorm scene. We intentionally add the editsound effect to create a distant feeling when it’s my sentence to make it sounds distant, Taylah teditsthe audio together in one piece. I coded to make the telephone gif automatically changes into a play button gif when the audio is done playing.
For the second part , I set the background as a gif of Van Gogh’s starry night. It represents a nostalgic feeling which is related to our theme. Then I photoshopped the elements, including the doors, the laundry machines, the fridge, the kitchen cabinets, the sofa, the floors and the cat. When the user clicks on the element, it will play the sound of that element, the five dorm doors represent different in-dorm scenarios.
I used toggle function in coding so that with clicking on the same element once more the sound effect would pause, click it again and it will continue playing. Almost all the elements have this toggle function except for the at in the middle, once it is clicked it’ll play the background music non-stop. I coded it on purpose to make sure there’s no sudden stop in background music. Also, I made the cursor change when it moves to the objects, so the user would realize that they are clickable. I made the cursor “grabbing hand” on almost every element (except for the cat again) to make it looks like it is touching the element, and the cursor on cthe at is a pointer.
Difficulties:
I came across some problems when doing thee css part, the elements wouldn’t line up as I want on the screen, then I knew the specific use of position function in css, learnt how “relative” and “absolute” work.
If I had more time, I would add more interactive features on the webpage, this webpage is currently just for enjoying the scenario by simply listen to the audio. But I’m not sure about further improvement, it’s not an excuse for not making more pages (ex. When the user clicks on the door, he sees the inside), instead, I want this experience based on sound, not the traditional way of perceiving information through vision. So I’d still want to figure out what improvements I can make to deepen our meanings.