vincentriemer/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 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.

io-808's Issues

Add LocalStorage support

Make the kick knock harder

The BD barely even slaps. ;) I assume there are some additional concerns here but if you could somehow channel a slightly more authentic kick/sub sound this thing would be out of this world. Great work, awesome project.

Add support for MANUAL PLAY mode

Add Accent functionality

Easier theme

I find the gray theme very hard to see, particularly in which lights are lit in the 1-16 beat slots. Would it be possible to have another theme, either with more colors, or at least with more led-like lights?

MIDI clock out

Hi!

not an issue, rather a request.

Can you somehow show BPM (I know the original didn't) and then send out MIDI clock out messages using https://webaudio.github.io/web-midi-api/ ?

We could use it as the syncronizing machine for a grander setup.

Add warning for Firefox users

Due to a buggy implementation of AudioParams the sound generation in Firefox creates really loud pops and clicks. There should be a warning displayed if a user visits the application in Firefox.

composing rhythms without running

I have noticed that the only way to add or edit rhythms is to run the machine. Is there a way around this?

No sound on Chromebook

Fix blurry text labels on non-retina displays

Add note icons and pre-scale lines to bottom section

Add saving/loading support

• Save Support
• Load Support

Pattern copy

I haven't seen any functionality to copy a pattern. For example, when creating a 2nd part of a pattern I would like to be able to take the 1st part of the pattern as a basis and then add in slight variations (same goes for creating new patterns).

Is there a way to do this that I've missed? Or is this a feature you'd be interested in adding? If so, I'm happy to give it a go :)

Mobile Support

So for the initial release I focused on just plainly recreating the original hardware's layout. In order to get all the controls to look appropriately laid out I had to hardcode the dimensions to 1400x800. Because this makes PC's the only viable platform to use iO-808 on I also decided to skip touch support for all of my custom UI controls.

The biggest hurdle with this will be designing a responsive layout that is usable at all screen sizes, I could really use help with brainstorming ideas for this. I'd like to get a comprehensive Framer prototype working before any implementation starts (though touch support can start being implement immediately)

• Touch Support
• Mobile Framer Prototype
• Make components properly responsive
• Implement final responsive layout

Sound

Still no sound on safari or chrome ?

Save doesn't work

When I try to save my music and then load it again, it does not work and it just comes out with a simple kick pattern. all of my levels and snappiness and all that good stuff is still saved but it just doesn't have the notes.

io-808 no sound

I should like very much that simulation of the TR808, but for some reason, I'm not getting any sound out of it. Any cue ?

No Sound

Hi No Sound On Imac Running Os X Sierra !

Great 808 Layout By The Way Spot On !

06/12/16

Add help/instructions

Set user-select: none and cursor: default to non-interact-able text labels

Help i am new

I have no sound, on edge, chrome and firefox

what can i do

the pre-scale knob

Hello! I've been using the iO-808 and I can't modify the pre-scale knob. Is it available?

Please make a record button

Auto Fill In comes in too late

Hi,

When using the Auto Fill In dial, the fill-in comes in one measure after it should - when set to 4, it comes in on the 5th measure, when set to 2 it comes in on the 3rd etc.

On an unrelated note, is there any chance of being able to export to mp3?

Thanks

Documentation Improvement

Awesome app, but the documentation doesn't really cover how to go about deploying and running this locally... Any guides on how to accomplish that?

Does not work on iOS (Safari)

I can put in touch input, but no knobs works since I cannot input drag input.

I can press play, but no notes are heard.

emulator not working on mac

The theme seems to be in black and white and no sound comes out.

BLM Theme

This completely black and gray theme is absolutely impossible to work with. I cannot see anything clearly. Please change it back.

More convenient interface

In adition to choosing instruments trought the wheel, click the boxes next to them and also below the level tone and decay knobs where there names are displayed that would make it alot more convenient.
(sorry for posting this on pull requests i dident understand how github worked)

Can't get JSON files to load

Trying to load a saved JSON file. When I do, nothing happens. Am I missing a step?

Can't Play The Music

Can't play my loops man, the legend "Mode Currently Unsupported" it appears to me, what can i do?

Add links to relevant pages

• Github repo
• Personal website
• Github issues