Inspiration
I have been inspired by the Music-kit apps available online, made for children. The UI of this project has been inspired by the various notification and ringtone apps.
What it does
The Drumkit Project allows the user to play various instrumental sounds by using mouse clicks or by using the keyboard buttons specified on each of the icons. It allows the user to spend some fun time using this website and also listen to a collection of Marvel's movie themes that have been linked to this website. This app is also made for the purpose of using the audio on stage whenever needed, without the need of downloading the specific audio files.
How we built it
This project was built on Atom editor using Html5, Css3 and JavaScript(Vanilla Js). The skeleton of this project was made using Html5 and was later on designed using Css3. The functionalities to each of the icons was added using JavaScript where we created functions to invoke methods that take in user inputs as keypress or mouse click and store values in specific variables. Accordingly, we assigned each variable, i.e. each keypress or mouse click, a specific audio.
Challenges we ran into
While specifying each variable with a particular audio, often the audio would not get rendered on the site. Also, the click functions for specific keypresses were not being stored. So I had to recheck the code on the console and rectify the errors and challenges that we ran into.
Accomplishments that we're proud of
I was happy to overcome the problems faced while rendering the audio and also to resolve the problems faced associated to the mouse clicks. Also we could finish this project without facing any problem with the audio files or click functions in the completed version of the Drumkit.
What we learned
From this project, I learned how to use JavaScript to render audio files on a website and also how to invoke functions that would track all the user input values and store them in desired variables. This project also helped me learn the use of console in depth and use it to rectify errors and have a deeper look on what actually goes in the actual processing part of the code.
What's next for Drumkit Project
Up next on the Drumkit Project, I am planning to add new features like playing audio track as well as an animated background video of the instruments being played. Also, an update will be made where the users will be able to play many other instruments of their choice and have a list of selections available to them. We would also provide a challenge the user would have to play a specific soundtrack given to them by the developer, and win the challenge.
Log in or sign up for Devpost to join the conversation.