Jump to content
Killersites Community
Sign in to follow this  

Drum machine web app - How?

Recommended Posts

Can anyone explain how the interactive drum machine was made (beginners terms!) in the following website:


Scroll about half way down until you reach: 'Digitakt online interactive demo' and then start pressing the pads to come up with beats. You can also record changes in knob movements just like the real

hardware version.

When I finish the web design course, I would love to incorporate this type of thing into websites. I have looked at the source code and found the title but then nothing - it moves onto the

next section of the site. 

I remember reading on Elektron's facebook page that it is all Javascript. If so how difficult would this be to achieve? And how do you do it?



Share this post

Link to post
Share on other sites

Don't know much about drum machines. But have you checked out github.com?

Maybe not as complex as the one you saw but there are more than a few examples.

Just search "drum machine" on Github.com.

Share this post

Link to post
Share on other sites

I found one youtube drum machine coding video, it's called "Coding for Beginners Lesson 1: Drum Machine - Javascript, HTML, CSS Programming - Succeed In Coding". It seems like a very simple drum machine.

There's also "Mary  livecodes a drum machine".

As well as "Build a drum machine #1 - Playing Sounds - Ember.js". 

Might be worth watching all of them.



Share this post

Link to post
Share on other sites

Searching suggestion for the web.

You might want to try typing "drum machine javascript", "drum machine php", "drum machine web browser", "drum machine html" etc. You'll probably get a better result that way.

Seems like you picked a good project.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this