ng-drum AngularJS Drum Machine |

Add a new channel!


What is this?

It's a web based Drum Machine built using the AngularJS JavaScript framework.

I don't understand... how do I use it?

Hit the play button on the top left.
See the boxes moving across the grid?
When they cover a dark blue square, it plays that sound for that row (written on the left side).
You can edit the rhythm by clicking the squares and adding more drums by pressing 'Add'
'Tempo' changes the speed. 'Beats' is the length.
If you want to share you creation, hit the blue share button. That will change the current web address and give you it so you can send it to others.

Something isn't working...

It's possible your browser is too old. If you know you're using a modern browser, try emailing me:

Key Bindings

space: Play/Pause
s: Stop+Rewind
1: tempo
2: tempo
3: beats
4: beats
p: Play current selection
i: Insert/remove current note
/h: Back one
/l: Forward one
/k: Up channel
/j: Down channel

Upcoming features

  • Get sound to work on iOS!
  • Multiple Drum Kits
  • Adjustable velocity (loudness)
  • Custom track titles
  • Data URL shortening
  • Ability to delete all notes in a channel or the whole grid.