Link: http://imanas.shanghai.nyu.edu/~yz4970/week7/audio-project/audio.html
For our audio project, Jannie and I decided to create a minimalistic online gallery of personal items gathered from NYU Shanghai students and staff. We split the workload in half and both equally contributed to the audio, visuals, and code.
We wanted to express the importance and characteristics of these personal items through sound. We didn’t want to visually reveal these items on our display page, so we chose to only display the shadows of these objects until the user interacts with them. We made this choice to emphasize that the user should focus on the audio over the visuals of our website. Jannie had the idea to interview people about items that they couldn’t live without, so our project mainly focuses on individual storytelling. We expanded on this idea by asking our interviewees to speak in their native language, so that their story would become more personal. We wanted to have a diverse language profile in our project, so we recorded interviews in English, Chinese, Japanese, and German. For the languages that we did not speak ourselves, we asked our interviewees to provide a transcript that we could transfer into our subtitles.
The audio for our project was obtained in quiet environments using the Tascam and shotgun microphone to record. Some of the interviews were recorded on the 8th floor inside soundproofed rooms, but we weren’t able to use those rooms for all of the interviews because of their limited availability. We recorded the sound of the object first, as we wanted to these sounds to paint a auditory portrait of the object before the interview provided an explanation. Afterwards, we conducted short interviews in the native languages of our friends to add backstories to otherwise common objects. We wanted to emphasize that although the objects themselves are ordinary, their personal significance is what enhances their identity. Audacity was used to edit the audios and clean them up for our final project. When I was editing my part of the audio, I tried to create the effect that the sounds of the object was fading in and out of the interview by layering the audios. I thought that this would unite the object and persona and express that the two are needed together to create meaning. There was slight background noise in some of the audios that I recorded, so I tried to remove as much of it as I could without damaging or distorting the audio. Our top priority was to keep the audio clean and clear so that the message of our website could be easily communicated to listeners.
For our layout, Jannie photographed a room with seven chairs lined up to act as the background for the webpage. Throughout the course of our project, we photographed the personal items of our friends and then I edited them onto the empty chairs using Photoshop. To accomplish this, I used the magnetic lasso tool and eraser tool to mask the objects. I created two versions of each image, one in shadow and one original copy. The shadow object would be the first to appear on the website, but once the user interacts with the item and plays the audio, the original object would be illuminated. In our code, we designated each object as a button so that when the button was clicked, audio would begin playing and the object would become visible. I wrote the code to switch the two images using .getElementById and built off the existing code that Jannie wrote for the foundation of our website. Something that we struggled with while coding was the CSS formatting of the subtitles. Although we had specified in the CSS stylesheet that the subtitle text should be aligned in the center, when we presented our project the subtitles expanded past the boundaries of our image. Maybe this could have been fixed through some edits made to the <div>s.
Overall, I am happy with how our project came out and would only make some minor adjustments to perfect it. It was a challenge to make the audio come to life while using minimal visual elements , but I think that Jannie and I succeeded in meeting the expectations that we set for ourselves.