Jump to content
Stef's Coding Community
Sign in to follow this  
JoeAllen

Drum machine web app - How?

Recommended Posts

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

https://www.elektron.se/products/digitakt/

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?

thanks

joe

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...