News for hackers. Stuff that matters.
Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @04:04PM (#27122820)
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!

EDIT: Link sharing was not working right but has been resolved. Share your beats! (You will have to re-save to generate a new url)

EDIT: Part I of the article is live: https://drumnickydrum.medium.com/from-funk-to-functions-da86...

Re:Show HN: A 64-step drum sequencer I built using React and... by driggs on Tuesday May 11, 2021 @11:37PM (#27126317)
As a professional software engineer of ~20 years who's dabbled in music for as long as you've dabbled in software, I'm humbled and impressed. Just wanted to say "great job!", and wish you a long, fulfilling career combining your passions and talents.
Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Wednesday May 12, 2021 @12:00AM (#27126440)
Wow thank you so much. I hope it’s as you wish!
Re:Show HN: A 64-step drum sequencer I built using React and... by ub99 on Tuesday May 11, 2021 @07:25PM (#27124893)
Wonderful work! For a software engineer new to the space, your attention to detail and clarity of the implementation truly stand out. Are you planning to open source and/or continue adding features to this app?
Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @07:30PM (#27124932)
The source is open :) https://github.com/drumnickydrum/sequencer64

I can't say what exactly is next for the app. My top priority right now is to get hired as an engineer, and I built this to hone my skills.

My career as a musician came to a standstill last March and I feel I'm now ready to enter the software arena.

Re:Show HN: A 64-step drum sequencer I built using React and... by Pfhreak on Tuesday May 11, 2021 @08:11PM (#27125182)
FYI, in case this wasn't your intent (I only mention this because you said you were fairly new up top), while you've provided the source you haven't given anyone a license to edit/duplicate/branch it.

Open Source usually implies a license, e.g. (reductively) the MIT ("do whatever you want as long as you credit me"), GPL ("If you use this code, you also have to share your code"), etc.

Check out https://choosealicense.com/ for more info.

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @08:18PM (#27125237)
Thanks! Yes I am still pretty green so I need the info.
Re:Show HN: A 64-step drum sequencer I built using React and... by sammorrowdrums on Tuesday May 11, 2021 @10:38PM (#27125999)
I actually made the same transition about 8 years ago. Coursera filmed this interview about my story (obviously cut down to mostly quotes praising them):

https://youtu.be/Z1lqnyEp38o

Anyway, awkward videos aside, if you want a contact in senior tech roles who was also a professional drummer, feel free to get in touch.

Username is same across most social media, and hn at username .com is my email.

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @10:49PM (#27126059)
Thx, msg’d you on ig.
Re:Show HN: A 64-step drum sequencer I built using React and... by mkw2k on Tuesday May 11, 2021 @09:07PM (#27125536)
I was in basically this exact same spot a few years ago, and built something similar, and showing it off was a big part of my interview process where I got the job that changed my life/career. Wishing you the best. Let me know if there's any way I could help
Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @09:26PM (#27125651)
There is! I’m coming from fifteen years in an unrelated (and wildly different) field. I am actively seeking advice related to landing a job where I would be a good fit. Please email me if you’d like to chat [email protected]
Re:Show HN: A 64-step drum sequencer I built using React and... by mousepilot on Wednesday May 12, 2021 @09:15AM (#27129960)
lol I built a drum machine too, its a nightmare of bash, perl, c, bc and invokations of sox. in my case, I can't show it off because the code is so bad it would do more harm than good.

I wrapped the entire mess up into an easily called script, and I love it despite the horrors of its internals.

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Wednesday May 12, 2021 @10:10AM (#27130523)
This made me lol. If it makes music it is a force for good
Re:Show HN: A 64-step drum sequencer I built using React and... by ub99 on Tuesday May 11, 2021 @07:39PM (#27124986)
I am a professional SWE and am exploring several music-oriented startup ideas at the moment. I definitely do not promise anything, but would love to stay in touch in case I get funded in the (distant) future. I will message you on GitHub.
Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @07:41PM (#27125002)
I would be thrilled to stay connected. Do reach out.
Re:Show HN: A 64-step drum sequencer I built using React and... by hrydgard on Tuesday May 11, 2021 @04:55PM (#27123399)
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)

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @05:47PM (#27123973)
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.
Re:Show HN: A 64-step drum sequencer I built using React and... by strenholme on Tuesday May 11, 2021 @05:58PM (#27124089)
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)

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @06:00PM (#27124105)
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?
Re:Show HN: A 64-step drum sequencer I built using React and... by strenholme on Tuesday May 11, 2021 @06:11PM (#27124235)
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%2Fwww.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://iplayif.com/?story=http%3A%2F%2Fwww.ifarchive.org%2Fi...

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @06:30PM (#27124422)
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.)
Re:Show HN: A 64-step drum sequencer I built using React and... by strenholme on Tuesday May 11, 2021 @06:50PM (#27124605)
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"/>

Re:Show HN: A 64-step drum sequencer I built using React and... by mncharity on Tuesday May 11, 2021 @08:26PM (#27125284)
> the full sequence data is too long

Sigh. Ever read an early proposal and think "wow, that's such a bad idea - good thing no one will pick up that"? Very not safe - a young naive me thought that reading early CGI, with its short urls passed on command-line, rather than longer urls on stdin. But people lycosed, and found a page, and were guided by it, and it spread, and... became assumed. Oh well.

Here in the future, with IE gone, IIRC browsers permit 80k, bottlenecked on Safari. Base-64 drops thats towards 60k. Of compressed data. Bzip can do a lot, even with JSON. Especially if you help it out.

There's some robustness cost, with unhappy security gateways and such, but for apps where featureful trumps reliable, we're no longer quite so crippled. Yay.

Re:Show HN: A 64-step drum sequencer I built using React and... by slig on Tuesday May 11, 2021 @09:52PM (#27125793)
You should feel really proud! It works flawlessly and way better than other similar projects.

edit: since you came up with this project with less than 1 year of learning how to code, I'm very curious about your music.

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @09:56PM (#27125808)
@drumnickydrum on instagram to peak at my music career
Re:Show HN: A 64-step drum sequencer I built using React and... by lc9er on Tuesday May 11, 2021 @09:41PM (#27125729)
This was fun. I annoyed my family making a blast beat with the slice tool.
Re:Show HN: A 64-step drum sequencer I built using React and... by nick__m on Tuesday May 11, 2021 @04:47PM (#27123312)
Work great on firefox for android and it look fun.

Keep up the good work !

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @05:01PM (#27123466)
Thanks :) Make some beats!
Re:Show HN: A 64-step drum sequencer I built using React and... by ratsimihah on Wednesday May 12, 2021 @03:55AM (#27127836)
Yasss! I love how this illustrates the fact that anyone can get into coding.

I've tried helping career-stuck people learning to code and build apps, but I've found it difficult teaching them everything from the ground up.

As a mostly self taught developer, I do believe it's just matter of dedication and sheer will though, and thank you for proving that right.

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Wednesday May 12, 2021 @08:33AM (#27129508)
Thank you... yes, Persistence! There are many challenges along the way where I came soooo close to giving up.

There is no magic going on. If something works or doesn’t work, it’s in the code.

I think successful musicians already know this struggle so luckily I kept struggling through the hard parts.

Re:Show HN: A 64-step drum sequencer I built using React and... by ratsimihah on Wednesday May 12, 2021 @11:34AM (#27131514)
> I think successful musicians already know this struggle so luckily I kept struggling through the hard parts.

Love the analogy, it does feel like that with music indeed!

Re:Show HN: A 64-step drum sequencer I built using React and... by kleiba on Tuesday May 11, 2021 @05:19PM (#27123662)
Very cool. How about a shuffle/swing mode?
Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @05:22PM (#27123689)
A knob to vary swing... coming up! thx :)
Re:Show HN: A 64-step drum sequencer I built using React and... by jerrysievert on Tuesday May 11, 2021 @04:43PM (#27123268)
you should probably know that it loads to a completely black screen using safari.
Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Wednesday May 12, 2021 @09:09AM (#27129899)
I believe this is fixed but can't test on my end. Anyone using old version of Safari that doesn't support MediaRecorder (or disabled MediaRecorder), please load the app and let me know if it goes blank.
Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @05:00PM (#27123460)
Bizarre... what is your device/os?
Re:Show HN: A 64-step drum sequencer I built using React and... by tessierashpool on Tuesday May 11, 2021 @05:06PM (#27123521)
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.
Re:Show HN: A 64-step drum sequencer I built using React and... by jerrysievert on Tuesday May 11, 2021 @05:02PM (#27123480)
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

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @05:07PM (#27123531)
Wow. Thx for finding this. I'll get on it. Which version of macOS?
Re:Show HN: A 64-step drum sequencer I built using React and... by jerrysievert on Tuesday May 11, 2021 @05:11PM (#27123590)
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.

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Tuesday May 11, 2021 @05:23PM (#27123706)
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.
Re:Show HN: A 64-step drum sequencer I built using React and... by blisterpeanuts on Tuesday May 11, 2021 @06:07PM (#27124199)
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)

Re:Show HN: A 64-step drum sequencer I built using React and... by yitchelle on Wednesday May 12, 2021 @06:42AM (#27128750)
Respect on the amazing response time for this issue.
Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Wednesday May 12, 2021 @10:11AM (#27130542)
Thx, it’s my baby, I want it to work ::sweating:: (I think that bug is fixed)
Re:Show HN: A 64-step drum sequencer I built using React and... by brentm on Tuesday May 11, 2021 @09:31PM (#27125680)
Super cool, nice work.
Re:Show HN: A 64-step drum sequencer I built using React and... by molotovbliss on Tuesday May 11, 2021 @11:57PM (#27126427)
sequencer64.com/sequencer/609b4f396c34382a584c6b31

Some dnb fun (174bpm), nifty to see how useful a fresh look can be uniquely effective with the tools of the days.

Re:Show HN: A 64-step drum sequencer I built using React and... by drumnickydrum on Wednesday May 12, 2021 @12:01AM (#27126447)
Oops, my share links seem to be broken. I’ll have a look at this tomorrow.