An attempt at a fully recreated web-based TR-808 drum machine.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github add stale issue bot config Dec 17, 2017
splashscreens update node-sass, add ios splashscreens, add pwa manifest Jun 26, 2018
src update fathom url Aug 8, 2018
svg add note icons to timeSignatureSection Aug 1, 2016
tutorial update fathom url Aug 8, 2018
.babelrc update to latest react, webpack, babel, ect. Jun 26, 2018
.gitignore Another build update Jun 26, 2016
.nvmrc add nvmrc Jun 26, 2018
.travis.yml remove node js version specification from travis config Jun 26, 2018
808js.sketch initial commit Jun 10, 2016
CNAME Add CNAME for custom domain Jul 12, 2016
LICENSE.md Create LICENSE.md Aug 8, 2016
README.md Fix small typos in README.md Nov 3, 2017
base-favicon.png update favicon Aug 7, 2016
base-splash.png update node-sass, add ios splashscreens, add pwa manifest Jun 26, 2018
buildTutorial.js update to latest react, webpack, babel, ect. Jun 26, 2018
deploy-ghpages.sh make continuous deployment only occur on master branch changes (prepa… Aug 14, 2016
jsconfig.json Add basicVariationSwitch, drumSwitch, and IFVariationSwitch components Jun 20, 2016
package.json update node-sass, add ios splashscreens, add pwa manifest Jun 26, 2018
tutorialDev.js add `Scheduling Patterns` section to tutorial Aug 7, 2016
webpack.config.dev.js update node-sass, add ios splashscreens, add pwa manifest Jun 26, 2018
webpack.config.prod.js update node-sass, add ios splashscreens, add pwa manifest Jun 26, 2018
yarn.lock update node-sass, add ios splashscreens, add pwa manifest Jun 26, 2018

README.md

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 efficiently computing 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.