link: http://imanas.shanghai.nyu.edu/~qc532/week6/audio/
Partner: Murray
Instructor: Moon
Date: Apr 1st, 2019
Project idea:
Our main idea for this project is a mood board on the webpage. By clicking on different buttons, people can interact with different sound effects and songs for different moods. People can also combine different sound effects and songs to create some more interesting interactions. For example, if you chose the “angry” sound effect with the “angry” song, there would be screaming in the background that would work well with the “angry” song. But if you choose a “sadness” sound effect with the “angry song”, the entire atmosphere of the song would change or not feel right. There is also a visualizer which interact with the songs by changing colors and shapes.
Process:
In terms of the teamwork, Murray is responsible for the audio editing and I did the coding part.
For the sound design, we made a list to put all of our audio assets. Murray listened to a lot of music on youtube and I also found some on the freesound for different moods. Since many of the human sound effects have short duration compared to the songs, we decided to duplicated the audio and Murray played with them by adding different sound effects.
In terms of my part, firstly is the layout design. To match the color with the mood we looked through several researches online and found this graph which is the most widely used theory on the match between color and mood. We deleted the “trust” and “anticipation” section in our final design since we found that the songs considering these two moods are difficult to find and also these two moods are kind of difficult to be related with audio.
On the webpage, the sound effect buttons control the facial expression and the song buttons control the color of the face and the visualizer. Different combinations can create many different audio and visual effects, which add the level of interaction.
(short video of the visualizer, better to explore on the web page)
Then it goes to the coding part which is a big challenge for me. At first I thought it would be easy to load and play the songs and sound effects but actually it took me lots of time to figure out how to stop other audios when one audio is playing. Besides, since we aim to combine the sound effect and the songs so I should allow them to play at the same time, which make the scenarios more complicated.
Another struggle I had is about the visualizer. It took me even longer to first figure out how the audio analyser works, how to get the src of the audio that is currently played on the webpage and how to put this part together with the buttons (many troubles occurred at this stage and I went back and forth).
For other details, I added hover effect on the button to indicate it is pressed. And I also add a button to stop all the sound for people who just want to just listen to the songs.
Reflection:
Many technical issues can be solved if I have more time. For example, it’s better if they can change the song by just clicking on the button. And it would be better if I can better accommodate the volume of different audios on that page.
In general, I completed most of the initial ideas and even add the color changing effect which I didn’t think of at the first stage. The final delivery does meet my expectations. Big thanks for the help of Moon and Murray 🙂
Credit
Visual Asset Credit: Freepik.com
Audio credit:
Anger
Song:
“Riot Squad” – Bad Brains
https://www.youtube.com/watch?v=OC0NCHq4v3I
Human Sound Effects:
“Scream SOUND EFFECT Angry Man Scream MAD SCREAM SOUND”
https://www.youtube.com/watch?v=j5WRhoXge6A
Joy
Songs:
[MapleStory BGM] Aquarium
https://www.youtube.com/watch?v=qtw0sIBLjrw&t=22s
Human Sound Effects:
Children Yay! Sound Effect
https://www.youtube.com/watch?v=attUrDwfdr8
sound effect YAHOO
https://www.youtube.com/watch?v=berBWR-KaTw
Cartoon Laugh
https://freesound.org/people/JohnsonBrandEditing/sounds/173933/
Fear
Songs:
Jaws Theme Song
https://www.youtube.com/watch?v=A9QTSyLwd4w
Fearful Other / Instrumental Orchestral Music
https://www.youtube.com/watch?v=1Z_deVJoIrM
Human Sound Effects:
Horror Sound Effect – Woman Terrified Scream
https://www.youtube.com/watch?v=Zk3xpzqO8hA
3 – Terrified Woman Screams
https://www.youtube.com/watch?v=MHUzvtc6NQw
suonho_ScaryScapes » suonho_ScaryScape_01.wav
https://freesound.org/people/suonho/sounds/9695/
Heart » Heatbeat Normal Faster Normal.wav
https://freesound.org/people/Benboncan/sounds/108841/
https://freesound.org/people/Erdie/sounds/22039/
https://freesound.org/people/dobroide/sounds/21417/
Surprise
Songs:
Epic Suspense Trailer Music – Royalty Free Background Music Instrumental
https://www.youtube.com/watch?v=nz8LSg80T0E
Most Beautiful Music Ever: “Everdream” by Epic Soul Factory
https://www.youtube.com/watch?v=RCMXO9sBIcU
Human Sound Effect:
Long Female Gasp Sound Effect
https://www.youtube.com/watch?v=twYcZkVqOpY
https://freesound.org/people/dersuperanton/sounds/437645/
Sadness
Songs:
stuff we did – Disney Pixar’s Up // slowed // piano
https://www.youtube.com/watch?v=czIlI-Vdi0c
Human Sound Effect:
Crying Small Child
https://www.youtube.com/watch?v=f8Yp_iz2Lcs
Girl / Woman Sad Crying Sobbing Sound Effect
https://www.youtube.com/watch?v=T_p73tJ6G-0
Man Crying and Whimpering Sound Effect
https://www.youtube.com/watch?v=-UA6Y4AiSKc
Disgust
Songs:
Tired and Disgusted [Yamka Music original]
https://www.youtube.com/watch?v=F36X9p34-c4
Human Sound Effect:
remix of 169336__audiorichter__ooh-female-various__ooh-female-various take #5.flac