nirvananimbusa / io-808

An attempt at a fully recreated web-based TR-808 drum machine.

iO-808

An attempt at a fully recreated web-based tr-808 drum machine using React, Redux, and the Web Audio API.

As an amateur/bedroom music producer I've always been fascinated with the impact and history of the TR-808. While trying to learn the new Web Audio API I attempted to try and recreate a few of the sounds by referencing the Sound on Sound Synth Secrets series and the block diagrams of the 808 itself. It became addicting and once I had most of the sounds done, I figured recreating the interface/functionality was the next logical step. I hope you enjoy it as much as I did making it!

Tools/Libraries Overview

Like most web/javascript developers, I sit on the shoulders of giants. Here's a brief list of the notable dependencies used in this project:

Web Audio API

All of the sound generated by this drum machine are synthesized using the Web Audio API (look mom, no samples!). A side effect of this is while I got the sounds fairly close to the original hardware, there's still a lot of room for improvement (yes I'm looking at you Cymbal and Rimshot).

The only WAA-related external library used is WAAClock which is used for scheduling the drum hits.

react

This library really has fueled my love of programming user interfaces and is what powers the UI of this app.

redux

Used for state management and used in conjuction with redux-localstorage for state persistance and react-redux for connecting my React components to the Redux store.

seamless-immutable

Used as the primary data structure for the redux store. The state store in this application is quite large (seriously, there are over 12,000 steps to keep track of) so in order to ensure maximum performance for mutating the state, this library was crucial (and a whole lot smaller than ImmutableJS).

reselect

Used for efficient computed values from the Redux store. A lot of the UI state depends on the state of over components so this library was a lifesaver in helping with the reasoning and performance of those dependencies.

radium

Used for styling of all React components. All of the styles in the webapp are done through inline styles and in the few places I needed something like a :hover selector, Radium provided it. Also doesn't hurt that it autoprefixes all of the inline styles.

Features Not Yet Implemented

In order to meet my personal deadline of 8/08 for my initial release I had to skip a few of the features of the original 808.

• PLAY mode
• COMPOSE mode
• PRE-SCALE (every pattern is currently hardcoded to 3)
• Adding triggers via the TAP button

I'll be continuously working on these features as well as improving the synthesis of each sound to greater match the sounds of the original hardware.