http://imanas.shanghai.nyu.edu/~msf432/commlab/week7/audioproject/index.html (project is best to be viewed at full screen)
Project Description
Our project challenges the traditional concept of music. We gathered familiar sounds from around the Academic Building and linked each sound to a key on our virtual piano. The purpose of presenting our sounds through a piano both serves as an effective way of allowing our users to make music of their own and a way of challenging the role of instruments in music. There is no particular relation of one sound to one key, but rather a random assortment of sounds that proves music can be made out of anything. The GIFs surrounding our piano represent a handful of the sounds we gathered and adds to the chaos of our page.
Process
Our first mission was to gather our sounds, and with that, finding and creating noise that has a distinct beginning and end. We repeated our recordings several times to make sure we gathered the sounds we wanted. While my partner worked on editing the sounds, I conducted research on how to code a piano on Javascript and CSS. I initially took code from “CodePen” to understand how to get the formatting correct for the keys (ideal length and width, border, etc.), and then I went on to coding the piano by myself. The hardest part of this was definitely figuring out how to link our sounds to the keys on our keyboard. After many attempts, it became clear that I had to construct my Javascript in a series of “if” and “else if” statements, connecting the key codes to our audio recordings. Once one key was figured out, the rest of the process was essentially just replicating the process and creating different ids for every key.
Post-Mortem
For the most part, the product fits pretty well with what I initially envisioned. I really wanted cartoon images of the sounds we gathered to appear and disappear when the respective key was clicked, but I could’t figure out how to go about doing that. I was able to make it so that images appear when a key is clicked, but because my code is organized based on one id and class for each key, adding an image meant swapping out a key or the image covering/being covered by the piano. I couldn’t find a way to move my images to a set part of the screen, and my attempts at doing so always resulted in a key being misplaced. Ideally, the images would’ve flown in as a key was clicked and disappear as a different key was clicked. It was disappointing to have to come to terms with my inability to figure this out, but I still left the linked images as notes in my Javascript to continue to work on at another time. I think figuring this part out may involve me reworking my HTML so I made the decision to stop while I was still ahead and add GIFs instead.