Title: Type Your Xmas Song
Link: click here
Conception & Design: My partner Vivian and I came up with the idea of recreating a well-known song. We picked the song “All I want for Christmas is you”, which can be related with our audience and provides us a Christmas theme for our website. Inspired by the interactive website typatone.com, we decided to invite our users “type out” this sweet song. We collected audio elements in our daily life, such as piano tones, the sound of microwave, etc., to build the sacred Christmas atmosphere. Also Vivian designed our visual elements of Christmas. Coherently, we hope our users enjoy the journey of audio and visual Christmas Day.
Process: In the general process, we had some twists and turns about the final idea of this project. We first collected all the audio elements to decorate the Christmas vibes, at the same time we made clips of vocal singing. However, we found that vocal song is not a good choice to combine with typing since continuity of the whole vocal singing will be lost. We made quick decision and chose piano tones instead. Later on, I mainly focused on coding and Vivian focused on visual design. Connecting typing and playing sounds took me much time, I mainly struggled to make the function of playing song as dynamic as possible. But at the same time I learned about properties and functions such as how to input and submit the text, how to manage array, etc. Moreover, I recorded the final singing and used Audacity to play with the pinch and effect. Finally, we put our work together and completed this audio webpage.
Reflection:Generally, this project met goals, the only concern I have is whether the instructions are clear enough, and if we had more time, we can design the webpage using more elements like gifs. I think I really like my idea of “typing” and “listening”, it is a new way of thinking how a song is presented. And it breaks the convention that song is “sung” or “played” by people. Now we can “type” song, and maybe in the future we can play with song more freely.
Conclusion: Vivian and I had good collaboration and we didn’t rush. We had good communication, brain-storm, and work distribution. This project meets my expectation, and in future I think the website can be improved to a great degree and be applied in many areas.