Drop It! is an interactive soundboard app created with vanilla Javascript, jQuery, and styled using HTML5/CSS3.
- An about modal appears when page first loads.
- Users are able to play audio samples using the letters on their keyboard.
- Firework animations are synced with audio samples.
- Users are able to switch between sound and color sets with the space bar.
Drop It! was designed and built within a week. A proposal and wireframes were prepared in order to provide a timeline for the development stage.
- The Howler.js audio library is used to play audio samples when a letter or spacebar is pressed.
- The Canvas HTML element is used to draw fireworks using scripting.
- The Anime.js animation library is used to animate the Canvas firework drawings.
- The Animate.css cross-browser animations are used to animate the text upon page load and key presses.
- Each soundset will have different animations to help better distinguish the difference.
- Implement a rails backend to save tunes.
- Link to specific tunes in order to share with friends.