TR-808 | Happy 888 followers

Go to Source

See the Code
See it Full Page
See Details

Inspired by:
![TR-808](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/Roland_TR-808_drum_machine.jpg)
Thank you for my 888 follower count.
I promised to make a dedicated pen for every 100 followers. I started this idea a long time ago and never finished it. I continued a few weeks ago and had a first prototype. Due to the crappy JS timing issues I had to do a few hacks but was able to get some fun demo going.

I then decided to write this from scratch with React.js since my first implementation had some limitations. A few tweets […] and [somebody](https://twitter.com/_pathogen/status/686648292394942464) suggested [Tone.js](https://github.com/Tonejs/Tone.js/) to me. I took a look at it and was overwhelmed by the API this Library offers. I played around with it a little and here's the thing. LOOK AT AND USE THIS LIBRARY IT IS F*****G AMAZING.

I think this is the easiest to understand library I have used so far and while I only touched about 2% of it I am deeply impressed by the result. Hooking up the sampler basically took an hour. Most of the work went into the UI and connecting the UI with the matrix for the sequencer. Long story short… it was a fun project and it is not done yet. I might write an article about it, I might not.

Most of the controls work. There are only 4 buttons without functionality. They are all related to the rhythm which is quite complicated to implement. I actually have to study that part of the TR-808 first.

Easter is coming so I hid an easter-egg in this pen, can you find it?

[A few of us here](https://twitter.com/rachsmithtweets/status/685572615159812096) were awarded best codeWrangler, some new category from [cssdesignawards](http://www.cssdesignawards.com/articles/the-2015-designer-of-the-year-s-recipients-are/276/) and I think I can speak for all when I say:

> YOU made this possible.. YOU… because without this community .. I think nobody would be going as crazy as they do here on CodePen.

Thank you also Alex, Tim, Chris, Marie, Dee, Tim, Jake for making this place better every day and especially for the special effort needed to make sure my pens don't break the page.

Thank you also to Michael Fischer (no idea who this guy is XD ) who created these hires samples with various settings and offers them free [online](http://smd-records.com/tr808/?page_id=14).

Wow.. I think that was it. I'm at 885 followers now and have a good feeling about releasing 3 followers early, what do you think?

Tested in…

* Chrome
* Firefox
* Opera
* Safari

…on OS X. I have a MBP so I'm not sure how it performs on other machines. feedback welcome.

100% crafted in CodePen because:
![it's perfect](https://m.popkey.co/a16137/Y9qx3.gif)

The code is well commented so if you are interested take a peek.

This Pen uses: Jade, SCSS, Babel, and Babel