http://imanas.shanghai.nyu.edu/~shl620/soundboard/
Description:
Alina and I struggled a bit in the beginning when we were looking for a project to latch onto. Originally we were going to do something with the sounds of the city (e.g. construction, cars, etc.) but we weren’t sure what. I took inspiration from Carlo who had presented his own soundboard in another class. While Alina and I were testing out the audio equipment we found that we could replicate ASMR with the quality of the microphones. At first, we thought of doing an ASMR soundboard, but when Alina recorded some piano sounds we decided to go for a piano soundboard instead. I didn’t want to blatantly copy Carlo (although soundboards are a pretty common thing) so I made sure to distinguish our soundboard from his. If you look at our website, the background is constantly shifting (very similar to Kahoot). Each button has a different color palette associated with it, so the last button you click is the color palette the background will take on. We also wanted to give the user the ability to reset the soundboard without refreshing the page so we gave the spacebar the ability to reset both the sounds and the background color palette. We topped this off with a “groovy” font which gave the one simple instruction of how to reset the soundboard.
Visuals/Style:
I like the shifting background quite a bit. Initially, we were going to have the button clicks change the background in some way (e.g. more buttons –> quicker/more energetic background shifting). Instead, we settled on having it change the color palette as if your mood was changing based on what sounds you picked. Each sound has its own color palette! The buttons themselves are unmarked white rings which glow much brighter while the sounds are playing. We chose to leave the buttons without text or any indicators of what the sound might be in order to let the user explore it themselves. Also, it would’ve been more work. Regardless, some soundboards don’t have any text or pictures to tell their users what button corresponds to which sound. We removed the blue halo thing that often surrounds a button when pressed as it looked rather unappealing.
Code:
Although I searched up the shifting background code, it was very difficult to find a way to change the color range. After a bit of searching, I realized I could use variables to change the colors instead of using getElementById or any of that jazz.
I also added code to change the button image to a glowing one when the button was pressed, and then to revert back to the old image once the sound had reached the end or was reset (due to the spacebar). We thought this would be helpful to let the user know which buttons were currently in use.
I implemented a bit of code to allow the user to repeatedly click on the same button and have the sound restart (previously nothing would happen) by setting the current time to 0 and then playing the sound again.
We found a way to shut off every piece of audio when the spacebar was clicked. For some reason, we would need to click it twice in order to fully refresh everything. I added a setTimeout function to wait a bit and then redo the spacebar function to make it as if I had clicked the spacebar twice.
Teamwork:
I feel like Alina and I worked very well together despite (or as a result of) our ability to split work. Alina did all of the sound recording, editing and created the button images. I did most of the coding. I think we both focused on areas that we were more comfortable in as Alina had already mixed/edited sounds before I had even rented out any recording equipment. As a result, I think we were able to reach a better balance between visuals/style and actual functionality/code. Compared to my last project, it is much more pleasing to look at, however, it might not be as complex. I personally think that we were able to finish the project quite quickly.
Reflections:
I feel like this project is more complete than my last, despite finishing the soundboard much later. It has both a nice visual aspect and a complex coding side to it. Next time I would have liked to finish the project a bit earlier, but I think given that our group was ready to ask others for help quite easily I am happy that we were able to soldier through and figure out a majority of the things on our own (although we did receive some good pointers and tips from Leon, Ann and Dave).