IO-808: A Web-Based TR-808 Drum Machine Using React, Redux, and Web Audio API | Hacker News Reader

IO-808: A Web-Based TR-808 Drum Machine Using React, Redux, and Web Audio API

io808.com

106 pointssebg18 comments

Former 808 owner here, the UI is pretty good, and well done. The sound is, well not an 808. I know this is more of a look what can be done sorta project, and maybe 100% fidelity wasnt your goal, but I would almost prefer the rebirth approach to emulating an 808 by using samples at various settings to match the knob values. In some ways I think you made a decent CR-8000 emulation with the sounds(the cowbell and hat remind me of that)

Anyway, dont want to take away from what was obviously a lot of work. I just want it to sound more like an 808 :)

Thanks for the feedback. My goal for this project was to make a recreation (maybe homage is a better word) completely in the browser. Also I was of the opinion that if I made this sample based the page size would skyrocket and I don't really see people wanting to download an entire 808 sample library just to fool around in a website.

I would wait a few seconds to load the 20MB or so for the samples. Maybe this would work: http://trashaudio.com/2010/01/roland-tr-808-sample-pack/ I'd expect something like this to have some heft.

The 808 is such a fundamental instrument to genres of music like house music, hip hop, electronic music, even pop. I recently listened to an episode of "Switched on Pop" which analyzes pop music, and the episode reviewed the influence and rise of house music sounds in pop music. A music historian discussed this and the rise of house music - of note: how disco was very expensive to produce (requiring professional string players and other such musicians, studio sessions, etc). Instruments like the 808 allowed producers to create "cheap" disco --> house music.

It's a good listen: http://www.switchedonpop.com/41-breaking-down-the-house/

Keep making music!

Very interesting comparing this to Rebirth RB-338, which was my intro to "the 808" - I never realized how much work Propellerheads had put in to streamline and simplify the programming interface.

Also, I really love the little linear scales that come up when you drag over a rotary control: very sweet way to show the user that they should drag up/down to control the value. The added functionality (that I only found on experimenting) of changing the scale size on horizontal drag is brilliant, although IMO when you drag horizontally the scale should preserve the value you're currently on, rather than changing it.

Small nitpicks: the multi-position switches (instrument select, pre-scale, variation, etc) feel like they should be draggable - but they only respond to clicks.

Really nice work :)

Is there a general point of view on when it's Good to user-select: none?

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

It seems appropriate on this. It's not going to be selecting text if you use the dials correctly, but with a miss-click & drag, I was able to.

Could you get the closed hat to stop the open hat? The interface is quite nice. Also I suggest making the instrument labels clickable on the rotary as well as each channel, to select the instrument, instead of only being able to use the knob. We are in a browser after all, with luxuries like save and load. Love this, cheers

For anyone who sees this and is inspired to get ReBirth RB-338 going, know that modern versions of Windows no longer have support for 16-bit software... but it works great in Wine.

I'm working on a web-audio app at the moment that allows you to import ReBirth files. Emulates 2 303's and the two drum machines. - Will be released as version 2 of this: http://errozero.co.uk/acid-machine/

This is excellent work. Web Audio has so much potential. Are the drum sounds sampled or synthesized?

They're all synthesized: https://github.com/vincentriemer/io-808/tree/master/src/synt...

sweet!

The pop-up slider visualisers are interesting, anyone seen those before?

Do they have a name?

Creator here: I don't know if they have a name but I based the design of that interaction off of Propellerhead's Thor iOS app which is the only other example of that overlay that I could find.

That's not in Thor on (desktop) Reason is it? I don't remember seeing it, but it's a really cool feature imo. I always have trouble fine tuning knobs, and I haven't figured out how to map them to my midi controller (the preset that it said would work didn't work. I can, at most, get one slider to map to a random knob). The pop up slider seems much easier to use with a mouse, even if the motions are relatively the same.

This is really cool. Nice one!

Layout is wack in my Chromium.

best rename it to "Show HN: ..."

Reply on news.ycombinator.com