Drum Machine with Sequencer

This started out as the FCC drum machine project and then slowly expanded into something I could play with, experiment with, and learn from. As I was researching other drum machines online, one thing I quickly noticed is that most of them are not very keyboard accessible. So I have really strived to make sure that you can access all functionality via the keyboard. I have not had a chance to go through this with a screen reader yet, so don’t expect great accessibility there if you try.

I also wanted to make sure this was responsive enough to work on mobile devices. I don’t have an iPhone so I had a friend try it real quick on his and he said it worked in Safari, Chrome, and Firefox. It works on all of the browsers I have loaded on my Android phone except Firefox, which displays the menu but nothing else (maybe someday I’ll have time to figure that out).

And finally, I wanted it to be easy to use so that even my wife (who has basically no musical talent at all) could create a simple beat. I’m not going to guarantee that this is 100% bug free, so please feel free to let me know of any problems you encounter.

Future goals:

  • Incorporate MIDI support
  • Export to a sound file so it can be listened to outside of the drum machine
  • Ability to create additional measures and then arrange them into a pattern
  • Add time changes (3/4, 7/8, etc…)
  • More sound banks
  • Make it look cooler (styling is not my strong suit)

BB Drum Machine

@bbsmooth Wow! What a great project you have created!! Super cool. It works well. Where in the link to the code? How long did it take you to create it? What was the most challenging part of this project?

Thanks. I’ve been working on it in my spare time for the past month or so. The most challenging part for sure was maintaining good responsiveness. It seemed like each time I wanted to tweak the UI just a little something would break and I’d have to spend a few hours figuring out how to fix it. I also spent a lot of time with the menu at the top. I created it from scratch with an emphasis on being completely accessible/responsive. I did look for an existing one but I wasn’t happy with what was out there.

I haven’t linked to my code yet because I am still in the process of cleaning it up. I worked on this in spurts and tried to get as much done as possible in small amounts of time. Thus, I was more concerned with the results rather than the content. Now I need to go back and organize this mess a little before I let people see it.

@bbsmooth The only improvement I can think of adding to your project are:

  1. A dark theme.
  2. I think the menu items should be the same width.
  3. The sound bank shrinks too a be narrower than the player div. I think they should be the same width.
  4. Add a link so people can contact you or view other projects you have created.

About the responsiveness, I find it much easier to start at mobile size and expand the design outwards. It is a tough to get a nice design on a small screen so that is where I start. Think column.
I too looked for a menu for a project at one time and could not find a decent one so I made my own. It is a good learning experience to build it from scratch.
Your project came out really nice. Keep up the good work.

This is exactly what I did. Depending on the font size you are viewing the page with, you may never see the single column design, even with your browser as narrow as it can go. But if you increase the text size then you will see it transform into a single column look. I based the break points on ‘em’ instead of ‘px’, so the change between different layouts depends on both the view port width and font size.

I agree with your dark theme suggestion. I’m not much of an artist so styling is not something I’m particularly good at. But my wife is and she came up with a few dark theme ideas for me, I just haven’t had time to implement them yet.

I based the menu look and feel off of the Firefox menu. Their menu items are only as big as needed, so that’s why I went with that style. It also allows me to conserve horizontal space so I don’t have to toggle to the hamburger menu quite as soon.

Thanks for your feedback. I really appreciate it.