[HN Gopher] Show HN: A 64-step drum sequencer I built using Reac...
___________________________________________________________________
Show HN: A 64-step drum sequencer I built using React and Redux
Author : drumnickydrum
Score : 79 points
Date : 2021-05-11 00:10 UTC (22 hours ago)
(HTM) web link (sequencer64.com)
(TXT) w3m dump (sequencer64.com)
| jjordan wrote:
| That's really awesome! The fact that it has 9 instruments to
| select from in that layout really begs for some keyboard numpad
| support IMO :)
| [deleted]
| drumnickydrum wrote:
| Thanks for the great suggestion... I've just added it! It's a
| pwa so close all tabs and refresh a couple times to make sure
| the changes take effect :)
| mrspeaker wrote:
| Would be great to read a write-up on how you approached it. Also,
| it seems pretty tight - how are you doing the timing loop? Also
| also, Great job!
| drumnickydrum wrote:
| I'm working on a medium article as we speak. It's more about
| the journey from drumming to software, but does get a bit in
| depth with some of the challenges of S64.
|
| Thankfully the timing is handled by the Tone.js framework. It
| allows you to sync events with a callback function which passes
| in a 'time' argument that keeps everything in line.
| rafaelturk wrote:
| Awesome work.. I'm having lots of fun with my kids!
| drumnickydrum wrote:
| Thank you! I'm so glad it's accessible to everyone :)
| masalachai wrote:
| This looks great! Pleasantly surprised by how native it feels.
| The instrument dots on the grid tiles is a nice UX touch.
|
| How do you find the transition into software development so far?
| drumnickydrum wrote:
| Like falling in love with a new discipline much like when I
| first started playing drums. Complete (but healthy) obsession.
| And marrying the two together with the app kept me going for 10
| weeks straight without getting bored with it. Excited to keep
| growing.
| rajansaini wrote:
| That's really sick, UI is really pretty! As an idea for a follow-
| up project, I wonder how difficult it would be to make it non-
| deterministic; i.e. play a different variation each measure.
| drumnickydrum wrote:
| I agree it would be fun to add a little chaos. I have some
| feature ideas on the todo list, one of which is a 'snake'
| traveler that disrupts the cells with an effect/glitch.
| sr3d wrote:
| great job! Totally enjoyed playing with the sequencer.
| drumnickydrum wrote:
| Thank you :) Don't be bashful... share your beat!
| focusgroup0 wrote:
| Congrats on the launch, this is fun :)
| drumnickydrum wrote:
| Thank you :) I'm so glad people are enjoying it. Share a beat!
| lbj wrote:
| I love it. Could quickly become as big a timesink as the sand-
| games. Very well made, you got the best out of React :)
| drumnickydrum wrote:
| Thanks :) And not just for reusability of components... React's
| memoization features helped me prevent so much unnecessary re-
| rendering (the grid alone has about 1000 divs.)
| drumnickydrum wrote:
| Author here. I'm a professional musician of 15 years
| transitioning into software development.
|
| With this app I aimed to create an intuitive and usable drum
| sequencer that would run in the browser . I've always wanted to
| be able to program beats longer than 16 notes and see each
| instrument playing at the same time.
|
| It's built using React, Redux, and a fabulous web audio library
| called Tone.js.
|
| This is the capstone to my learning to code which started in sept
| 2020. I was thrilled to be able to build something that combined
| my history in drumming and music production.
|
| Happy to answer any questions!
| simooooo wrote:
| Where is the play button?
| jerrysievert wrote:
| you should probably know that it loads to a completely black
| screen using safari.
| drumnickydrum wrote:
| Bizarre... what is your device/os?
| jerrysievert wrote:
| macbook pro, macOS. Error: Media Recorder
| API is not available in debug.ts
|
| and nothing ends up rendering, all divs are empty.
|
| (editing to add, since I can't reply to the child for some
| reason):
|
| Mojave, safari 14.1
| drumnickydrum wrote:
| Wow. Thx for finding this. I'll get on it. Which version
| of macOS?
| jerrysievert wrote:
| ah, it finally let me respond to this comment, sometimes
| hn is sooo weird :)
|
| safari 14.1 in Mojave. I spend too much time with weird
| audio stuff to move past Mojave on this laptop
| unfortunately.
|
| edit:
|
| aha -> looks like you have to turn on the experimental
| features to get it to work. might be good to have a note
| for someone who doesn't have that turned on to avoid the
| black screen.
| drumnickydrum wrote:
| Been looking into it. Looks like it's an old safari issue
| related to Media Recorder (for downloading your
| sequence.) I'll play around to make sure the ux is right
| regarding this bug.
| blisterpeanuts wrote:
| It works fine for me:
|
| Safari Version 14.0.2 (16610.3.7.1.9)
|
| MacOS Big Sur 11.1
|
| 2021 iMac (8-Core Intel Core i7 3.8 GHz)
| tessierashpool wrote:
| I'm seeing it work fine on Safari on iPad 14.4.2 and Big
| Sur on an MBP, but I get a blank black screen on another
| Mac running Mojave.
| nick__m wrote:
| Work great on firefox for android and it look fun.
|
| Keep up the good work !
| drumnickydrum wrote:
| Thanks :) Make some beats!
| strenholme wrote:
| I think it's well designed, and I really like the analog drum
| samples (though I think the clap sounds better at G2 instead of
| C2). I would had made it 4 rows of 16 steps instead of 8 rows
| of 8 steps, but that's because I've been using Roland grids for
| so long, that's what I'm used to working with.
|
| I also wish I could save a pattern as a long link. (MIDI slave
| sync support would also be nice, but I'm not sure browser sound
| libraries support that)
| drumnickydrum wrote:
| Thx! Menu dive a bit and you can re-pitch the clap. There is
| some, though not robust, MIDI support I will eventually be
| looking into. What do you mean exactly about saving a pattern
| as a long link?
| strenholme wrote:
| It's possible to make a really long link which stores data
| in it. For example, here's a link with an interactive
| fiction adventure: http://iplayif.com/?story=http%3A%2F%2Fw
| ww.ifarchive.org%2Fi...
|
| After typing in "no", reading the screen, then hitting the
| space bar, one will see a ">". At this point, type in
| "save".
|
| The link for the game now is much longer, because it
| includes the entire state of the game in it, i.e.: http://i
| playif.com/?story=http%3A%2F%2Fwww.ifarchive.org%2Fi...
| drumnickydrum wrote:
| Wow that site is super fun :) As far as the sequencer,
| head over to the save menu. If you 'share' your sequence
| it actually generates a link you can save. (It's not
| storing the data in the link as the full sequence data is
| too long at once for a url string.)
| strenholme wrote:
| Another option is to use base-64 or XML (or even JSON) to
| store the data in a longish text string that's still
| short enough to share online. For example, he's a really
| nice ambient "bloom" reverb I use with Valhalla
| Supermassive (after downloading this free plugin, one can
| copy the following code then select "paste from
| clipboard" in Supermassive to load this reverb):
|
| <ValhallaSupermassive pluginVersion="1.0.0"
| presetName="Big Swell" Mix="1.0" DelaySync="0.25"
| DelayNote="0.2857142984867096"
| Delay_Ms="0.8399999737739563" DelayWarp="0.5" Clear="1.0"
| Feedback="0.75" Density="1.0" Width="1.0" LowCut="0.0"
| HighCut="1.0" ModRate="0.2738341093063354"
| ModDepth="0.4000000059604645" Mode="0.1666666716337204"
| Reserved1="0.0" Reserved2="0.0" Reserved3="0.0"
| Reserved4="0.0"/>
| hrydgard wrote:
| Really nice samples! Sounds great.
|
| Consider having the space bar toggle playback - would make it
| so much smoother to use! (used to that from all kinds of music
| software)
| drumnickydrum wrote:
| Thx for the suggestion. I've just added it. It's a pwa so
| close all tabs and refresh a couple times to make sure the
| changes take effect.
| [deleted]
| kleiba wrote:
| Very cool. How about a shuffle/swing mode?
| drumnickydrum wrote:
| A knob to vary swing... coming up! thx :)
| Quintus_ wrote:
| The sounds crackle a bit on chrome Version 89.0.4389.114 on
| Ubuntu. Works fine on my firefox though
| drumnickydrum wrote:
| Oddly I'm finding there are much more audio performance issues
| in production even though all warnings pointed to worse in
| development.
|
| It was an extreme challenge to make this thing work cross-
| browser/os/device. I may look into some performance diagnostics
| if playback isn't great for enough users. Thx for the report.
| phailhaus wrote:
| Great tool! I was a bit confused at first what was going on,
| especially when I clicked on an instrument. I think part of the
| disconnect is that the instruments are squares in a grid, but you
| see oval shapes in the sequencer itself. It may make more sense
| to show them as rounded rectangles in the sequencer so it's more
| obvious that each instrument maps to a colored shape in the
| sequence.
|
| The interface is also begging to be used in both directions: it
| feels like I should be able to click on a square in the sequencer
| and see the instruments light up on the right, so that I can
| change multiple instruments at a time for a given square!
| drumnickydrum wrote:
| I hadn't thought about that direction of interaction. Very
| interesting. I agree, now that I think about it, that there are
| definitely a lot more interactions that can come off of the
| grid cells. Great suggestion.
| EamonnMR wrote:
| Loving the slice feature. Able to make some nice rolls.
| drumnickydrum wrote:
| It's funny how the ability to swipe around has me putting odd
| rolls in places I wouldn't think to as a drummer. Glad you like
| it.
___________________________________________________________________
(page generated 2021-05-11 23:00 UTC)