6 ms·

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

106 points by sebg 10y ago

jharohit 10y ago
best rename it to "Show HN: ..."
anewhnaccount 10y ago
Layout is wack in my Chromium.
camtarn 10y ago
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 :)
S_A_P 10y ago
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 :)
- vincentriemer 10y ago
  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.
  - lubesGordi 10y ago
    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/ http://trashaudio.com/2010/01/roland-tr-808-sample-pack/ I'd expect something like this to have some heft.
jarmitage 10y ago
The pop-up slider visualisers are interesting, anyone seen those before? Do they have a name?
- vincentriemer 10y ago
  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.
  - jpreiland 10y ago
    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.
nix0n 10y ago
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.
- errozero 10y ago
  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/ http://errozero.co.uk/acid-machine/
dpflan 10y ago
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/ http://www.switchedonpop.com/41-breaking-down-the-house/ Keep making music!
ffog 10y ago
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
deleted 10y ago
[deleted]
tgamba 10y ago
This is excellent work. Web Audio has so much potential. Are the drum sounds sampled or synthesized?
- vincentriemer 10y ago
  They're all synthesized: https://github.com/vincentriemer/io-808/tree/master/src/synth/drumModules https://github.com/vincentriemer/io-808/tree/master/src/synt...
  - tgamba 10y ago
    sweet!
grimgrin 10y ago
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 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.
s_m 10y ago
This is really cool. Nice one!

106 points by sebg 10y ago

jharohit 10y ago

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

anewhnaccount 10y ago

Layout is wack in my Chromium.

camtarn 10y ago

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 :)

S_A_P 10y ago

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 :)

vincentriemer 10y ago
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.
- lubesGordi 10y ago
  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/ http://trashaudio.com/2010/01/roland-tr-808-sample-pack/ I'd expect something like this to have some heft.

jarmitage 10y ago

The pop-up slider visualisers are interesting, anyone seen those before? Do they have a name?

vincentriemer 10y ago
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.
- jpreiland 10y ago
  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.

nix0n 10y ago

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.

errozero 10y ago
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/ http://errozero.co.uk/acid-machine/

dpflan 10y ago

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/ http://www.switchedonpop.com/41-breaking-down-the-house/ Keep making music!

ffog 10y ago

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

deleted 10y ago

[deleted]

tgamba 10y ago

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

vincentriemer 10y ago
They're all synthesized: https://github.com/vincentriemer/io-808/tree/master/src/synth/drumModules https://github.com/vincentriemer/io-808/tree/master/src/synt...
- tgamba 10y ago
  sweet!

grimgrin 10y ago

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

s_m 10y ago

This is really cool. Nice one!