Skip to content

πŸ₯ An interactive online drumpad that lets you play beats using your keyboard or touch controls. Perfect for music enthusiasts and aspiring drummers.

License

Notifications You must be signed in to change notification settings

danielmroczek/drumpad

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

πŸ₯ Online Drumpad

An interactive online drumpad that lets you play beats using your keyboard or touch controls. Perfect for music enthusiasts and aspiring drummers.

πŸ”— Live Demo

Try it now: Online Drumpad

πŸ“– Project Origin

Before I started playing guitar, I dreamed of playing the drums. Unfortunately, this instrument didn't meet with approval from other household members. However, I managed to convince my parents to buy me a bass guitar instead, which worked out well for me.

Many years have passed, I still don't have drums and probably never will. But the desire to learn at least basic drumming skills remained. What if I could practice finger-drumming on my phone? That's how the idea for this app was born.

I know there are many similar applications, but I wanted something simple that could run on any phone (and computer) without installation. The tool is ready, now it's time to practice!

🎯 Features

  • 🎡 12 high-quality drum samples
  • πŸ“± Touch-enabled for mobile devices
  • ⌨️ Keyboard mapping for quick access
  • πŸ–±οΈ Mouse and touch support
  • πŸ”Š Velocity sensitive controls (the closer the center, the louder)
  • 🎨 Clean, minimalist interface
  • πŸŒ“ Dark/Light theme support

πŸ› οΈ Tech Stack

  • Pure JavaScript (ES6+)
  • Howler.js for audio processing
  • HTML5 Audio API
  • CSS3 Grid Layout
  • Responsive design principles

πŸš€ Getting Started

  1. Clone the repository
  2. Open index.html in your browser
  3. Use your keyboard or click/tap the pads to play sounds

⌨️ Keyboard Controls

Key Sound
1, V Crash
2, F Cowbell
3, R Ride
Q Low Tom
W Mid Tom
E High Tom
C Closed HH
D Open HH
Z Kick
S Rim
X Snare
A Clap

This 3x4 grid layout adjusts to a 4x3 layout when the screen is wider than it is tall.

πŸ“ Note

This drumpad uses the LM1 drum sample pack. All samples are included in the repository.

πŸ“„ License

MIT License

About

πŸ₯ An interactive online drumpad that lets you play beats using your keyboard or touch controls. Perfect for music enthusiasts and aspiring drummers.

Topics

Resources

License

Stars

Watchers

Forks