Our Audio Project highlights several popular provinces in China and their respective lifestyles through the incorporation of audio clips personally obtained and of audio clips borrowed online. For this audio project, we asked for the help of schoolmates from the several provinces that we want to focus on and recorded them saying “Hi. I am a(n) _______(province name) person” in their dialect.
This idea sparked when we were walking around campus looking for possible audio-focused project ideas. We originally wanted to use audio recordings from Shanghai and make a website that allowed our user to click on different parts of the Shanghai map to see what sounds were attributed to these places; however, while walking around campus, we heard a multitude of dialects being spoken, and Lorna and I felt that this was a much more important and relevant topic to put under a spotlight on our campus.
With the intention of highlighting the different dialects spoken at our school, we decided to start recording students speaking their dialect. But, because we were only asking the students to make a short introduction of themselves in their dialect, many of them responded to us by saying that this was too boring and doesn’t truly allow the user of our website to gain much knowledge of the province they are from. The several students that we asked to help us with the audio recording told us that they didn’t think they would be able to provide us with a good introduction of their province, thus, we decided that it would be better for us to have a clicking element on our website for the user to read about the province in addition to the audio clips relating to it.
After obtaining the audio clips, the next appropriate step was the creation of the code. To create the webpage, we first inserted the background images, which is the blank map of china. Then, after inserting the image, we added the name of the provinces that we wanted to highlight. Around the names and borders of the provinces, we inserted buttons that would display a short description along with pictures that are associated with the province. This allows the user to have visual components that correlate with the audio clips. This part was not very challenging compared to the creation of the voice map using JavaScript math, as it involved components that both Lorna and I have used in previous projects.
The use of JavaScript math was the most difficult by far. We expected this to be difficult, but Lorna and I wanted to challenge ourselves in using a function that neither of us had used before. The idea of using it struck us when Ian demonstrated it in class, and we find it surprisingly fitting for our idea. The reason for using this function was to allow the user of our webpage to maneuver around the map and listen to the audio clips in a more natural way, without having to click a button for every single sound. This is also the best way for our users to feel more immersed and maneuver like its a real map, trying to eliminate as much of a confusing process as possible. We wanted the sound intensity to be highest when the user directly hovers over the province’s borders, and to have a disappearing like transition when they are scrolling from one province to another. Then, when they hover over the next province, that province’s associated sounds will play at a higher intensity. And the reason for this all related back to our goal of having our user have a smooth exploration process with our website.
In conclusion, I would say that this is a project that I am very proud of. It may not be as visually appealing as some of the other projects that I have worked on in the past, but this project was definitely more complicated in terms of working with entirely new elements of code and also just the working of the audio equipments. This was a difficult project, in that it was hard to incorporate the audio into the website in the way that we wanted. During our interactive comic project, we also used audio clips, but they were in the background of each page, with an exception on two pages. It was much more difficult to have the audio clips be cued by a mouse-over or on-click technique because layering the sounds clips made certain parts not play, but we couldn’t exactly figure out why initially.