A dynamic, browser-based drum machine built with vanilla JavaScript, HTML, and CSS, powered by the Web Audio API, Canvas API, and integrated with Firebase for cloud-based beat sharing.
- 🎙 Record & Playback: Create custom drum sequences using your keyboard.
- 💾 Save, Load, & Delete Beats: Store your beats in the cloud using Firebase Firestore.
- 🔗 Share via URL: Generate shareable links to your beats using Firebase document IDs.
- ⚡ Dynamic BPM Control: Adjust tempo in real-time.
- 👀 Live Visualizer: Interactive sound wave display built with the Canvas API.
- 🛠 Multiple Drum Sounds: Responsive keys (W, A, S, D, J, K, L) mapped to different drum elements.
| Technology | Purpose |
|---|---|
| HTML/CSS | UI structure and styling |
| JavaScript (Vanilla) | Core interaction logic |
| Web Audio API | Handling sound playback and recording |
| Canvas API | Creating the visual waveform effects |
| Firebase | Backend for storing beats and enabling shareable links |
| Cloud Concepts | Used to design persistent, URL-based data access |
This project began as part of the Angela Yu Web Development Bootcamp on Udemy, where the basic interactive drum kit was built. Since then, I’ve upgraded the app by integrating:
- 🔄 Cloud storage and retrieval using Firebase Firestore
- 🌐 Shareable URLs using Firebase document references
- 🎨 An animated beat visualizer with the Canvas API
These enhancements apply concepts I learned through the IBM SkillsBuild Cloud Computing Fundamentals course.
git clone https://github.com/yourusername/drumkit-app.git
cd drumkit-app
# Just open index.html in your browserTo enable cloud features:
- Set up a Firebase project.
- Add your Firebase config to the script in
index.html. - Enable Firestore and set proper read/write rules for development.
- 🎛 UI for custom mapping of keys to sounds
- 🎚 Volume & pitch control per track
- 🔁 Looping and layering multiple tracks
- 🌍 User authentication for private/public beat sharing
- Angela Yu's Web Development Bootcamp
- IBM SkillsBuild - Cloud Computing Fundamentals
- MDN Web Docs for in-depth API documentation
Feel free to reach out if you want to collab or offer suggestions!
Harsh – Computer Science Undergrad 📧 [email protected] 🔗 LinkedIn