5 ms·

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 sequ

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-da86834675e5 https://drumnickydrum.medium.com/from-funk-to-functions-da86...

jerrysievert 5y ago
you should probably know that it loads to a completely black screen using safari.
- drumnickydrum 5y ago
  Bizarre... what is your device/os?
  - jerrysievert 5y ago
    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 5y ago
      Wow. Thx for finding this. I'll get on it. Which version of macOS?
      - jerrysievert 5y ago
        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 5y ago
        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 5y ago
        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)
        yitchelle 5y ago
        Respect on the amazing response time for this issue.
        drumnickydrum 5y ago
        Thx, it’s my baby, I want it to work ::sweating:: (I think that bug is fixed)
  - tessierashpool 5y ago
    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.
- drumnickydrum 5y ago
  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.
nick__m 5y ago
Work great on firefox for android and it look fun. Keep up the good work !
- drumnickydrum 5y ago
  Thanks :) Make some beats!
hrydgard 5y ago
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)
- deleted 5y ago
  [deleted]
- drumnickydrum 5y ago
  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.
kleiba 5y ago
Very cool. How about a shuffle/swing mode?
- drumnickydrum 5y ago
  A knob to vary swing... coming up! thx :)
strenholme 5y ago
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 5y ago
  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 5y ago
    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%2Fif-archive%2Fgames%2Fzcode%2Fphotopia.z5 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%2Fif-archive%2Fgames%2Fzcode%2Fphotopia.z5#Rk9STQAAA0JJRlpTSUZoZAAAAA0AATEyMDQxNrF0AQUIAENNZW0AAAKDAAAdAB3/UAAAUAAA/wEBAAMJAgADAQIA/wAfet0A/wA8QAAABAA0AgAAAgAKQAAABAD/AP8A/wD/AP8A/wAmAQAIiQD/AP8A/wD/AP8A/wAjZCkA/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wDtAgAACQAAUAAAAQAADgACAQAA2wECAAACABoZAAQYAAAYAAADAAIYABgBAAYEABYBAAAZAAAYAAABABQBAAABAAABAAABAAABABAEAAH//wAIDwAd/////wAcAgAAAUwDAAABAAv/4P/lAAH/4P/lALoEAAAWAAAWLsEAAhgAAAQAQAQAv///AD3//wA8AQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwD/AH94BHNhdmUAAGdhbWUAbQ8BTAMEAgABBAcANngAd0AAP3gEc2F2ZQAAZ2FtZQBteAlzYXZlIGdhbWUAUv/gAAP/5QD/AP8AV3cIxO7/AwBTdGtzAAAAlAAAAAAAAAAAAFOiAP8AAAAAU60fAAMAAAAWAEkAAAAAAAAAAAAAAAApEwAAAAAAAAAAAAIAAAHb4gQLAAAAAAAAIgAAAAAAz3QfAD8AAAAWAEsABAAAAAAAAAAAAAApHQAEAAAAAAAAAAIAAAHcKAcLDwAAAAQAAAAAAAAABAAAAAAA0loQAAAAAADSbxEAAAAAAAA= http://iplayif.com/?story=http%3A%2F%2Fwww.ifarchive.org%2Fi...
simooooo 5y ago
Where is the play button?
ub99 5y ago
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?
- drumnickydrum 5y ago
  The source is open :) https://github.com/drumnickydrum/sequencer64 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.
  - ub99 5y ago
    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.
    - drumnickydrum 5y ago
      I would be thrilled to stay connected. Do reach out.
  - Pfhreak 5y ago
    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/ https://choosealicense.com/ for more info.
    - drumnickydrum 5y ago
      Thanks! Yes I am still pretty green so I need the info.
brentm 5y ago
Super cool, nice work.
lc9er 5y ago
This was fun. I annoyed my family making a blast beat with the slice tool.
slig 5y ago
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.
- drumnickydrum 5y ago
  @drumnickydrum on instagram to peak at my music career
driggs 5y ago
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.
- drumnickydrum 5y ago
  Wow thank you so much. I hope it’s as you wish!
molotovbliss 5y ago
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.
- drumnickydrum 5y ago
  Oops, my share links seem to be broken. I’ll have a look at this tomorrow.
deleted 5y ago
[deleted]
ratsimihah 5y ago
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.
- drumnickydrum 5y ago
  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.
  - ratsimihah 5y ago
    > 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!

jerrysievert 5y ago

you should probably know that it loads to a completely black screen using safari.

drumnickydrum 5y ago
Bizarre... what is your device/os?
- jerrysievert 5y ago
  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 5y ago
    Wow. Thx for finding this. I'll get on it. Which version of macOS?
    - jerrysievert 5y ago
      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 5y ago
        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 5y ago
        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)
        yitchelle 5y ago
        Respect on the amazing response time for this issue.
        drumnickydrum 5y ago
        Thx, it’s my baby, I want it to work ::sweating:: (I think that bug is fixed)
- tessierashpool 5y ago
  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.
drumnickydrum 5y ago
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.

nick__m 5y ago

Work great on firefox for android and it look fun. Keep up the good work !

drumnickydrum 5y ago
Thanks :) Make some beats!

hrydgard 5y ago

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)

deleted 5y ago
[deleted]
drumnickydrum 5y ago
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.

kleiba 5y ago

Very cool. How about a shuffle/swing mode?

drumnickydrum 5y ago
A knob to vary swing... coming up! thx :)

strenholme 5y ago

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 5y ago
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 5y ago
  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%2Fif-archive%2Fgames%2Fzcode%2Fphotopia.z5 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%2Fif-archive%2Fgames%2Fzcode%2Fphotopia.z5#Rk9STQAAA0JJRlpTSUZoZAAAAA0AATEyMDQxNrF0AQUIAENNZW0AAAKDAAAdAB3/UAAAUAAA/wEBAAMJAgADAQIA/wAfet0A/wA8QAAABAA0AgAAAgAKQAAABAD/AP8A/wD/AP8A/wAmAQAIiQD/AP8A/wD/AP8A/wAjZCkA/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wDtAgAACQAAUAAAAQAADgACAQAA2wECAAACABoZAAQYAAAYAAADAAIYABgBAAYEABYBAAAZAAAYAAABABQBAAABAAABAAABAAABABAEAAH//wAIDwAd/////wAcAgAAAUwDAAABAAv/4P/lAAH/4P/lALoEAAAWAAAWLsEAAhgAAAQAQAQAv///AD3//wA8AQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAAAQAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwAADwD/AH94BHNhdmUAAGdhbWUAbQ8BTAMEAgABBAcANngAd0AAP3gEc2F2ZQAAZ2FtZQBteAlzYXZlIGdhbWUAUv/gAAP/5QD/AP8AV3cIxO7/AwBTdGtzAAAAlAAAAAAAAAAAAFOiAP8AAAAAU60fAAMAAAAWAEkAAAAAAAAAAAAAAAApEwAAAAAAAAAAAAIAAAHb4gQLAAAAAAAAIgAAAAAAz3QfAD8AAAAWAEsABAAAAAAAAAAAAAApHQAEAAAAAAAAAAIAAAHcKAcLDwAAAAQAAAAAAAAABAAAAAAA0loQAAAAAADSbxEAAAAAAAA= http://iplayif.com/?story=http%3A%2F%2Fwww.ifarchive.org%2Fi...

simooooo 5y ago

Where is the play button?

ub99 5y ago

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?

drumnickydrum 5y ago
The source is open :) https://github.com/drumnickydrum/sequencer64 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.
- ub99 5y ago
  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.
  - drumnickydrum 5y ago
    I would be thrilled to stay connected. Do reach out.
- Pfhreak 5y ago
  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/ https://choosealicense.com/ for more info.
  - drumnickydrum 5y ago
    Thanks! Yes I am still pretty green so I need the info.

brentm 5y ago

Super cool, nice work.

lc9er 5y ago

This was fun. I annoyed my family making a blast beat with the slice tool.

slig 5y ago

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.

drumnickydrum 5y ago
@drumnickydrum on instagram to peak at my music career

driggs 5y ago

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.

drumnickydrum 5y ago
Wow thank you so much. I hope it’s as you wish!

molotovbliss 5y ago

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.

drumnickydrum 5y ago
Oops, my share links seem to be broken. I’ll have a look at this tomorrow.

deleted 5y ago

[deleted]

ratsimihah 5y ago

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.

drumnickydrum 5y ago
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.
- ratsimihah 5y ago
  > 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!