12 ms·

Show HN: A 64-step drum sequencer I built using React and Redux

327 points by drumnickydrum 5y ago

drumnickydrum 5y ago
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!
jjordan 5y ago
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 5y ago
  [deleted]
- drumnickydrum 5y ago
  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 :)
masalachai 5y ago
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 5y ago
  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 5y ago
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 5y ago
  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 5y ago
great job! Totally enjoyed playing with the sequencer.
- drumnickydrum 5y ago
  Thank you :) Don't be bashful... share your beat!
EamonnMR 5y ago
Loving the slice feature. Able to make some nice rolls.
- drumnickydrum 5y ago
  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.
lbj 5y ago
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 5y ago
  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.)
  - lbj 5y ago
    Clever - You might be interested in Clojurescripts Reagent, which is a React wrapper that gives you a lot of memoization for free. Re-doing this in cljs would be a great learning exercise.
focusgroup0 5y ago
Congrats on the launch, this is fun :)
- drumnickydrum 5y ago
  Thank you :) I'm so glad people are enjoying it. Share a beat!
Quintus_ 5y ago
The sounds crackle a bit on chrome Version 89.0.4389.114 on Ubuntu. Works fine on my firefox though
- drumnickydrum 5y ago
  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.
rafaelturk 5y ago
Awesome work.. I'm having lots of fun with my kids!
- drumnickydrum 5y ago
  Thank you! I'm so glad it's accessible to everyone :)
phailhaus 5y ago
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 5y ago
  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.
mrspeaker 5y ago
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 5y ago
  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.
  - Optimal_Persona 5y ago
    Very cool! On my underpowered HP Win10 machine running Firefox, turning on the Analyzer messes with the timing. Almost like introducing a random swing percentage, so potentially a feature rather than a bug. :-) Keep it up, I am a former professional bassist turned data analyst, always working on my programming chops.
    - drumnickydrum 5y ago
      I stayed up super late one night playing around with weird css combinations to make the analyzer do amazing things and ended up scrapping most of them to improve performance. It was a bit of an afterthought and I could certainly figure out a way to optimize it. Do you still gig?
  - maroonblazer 5y ago
    I'd love to read that too. Be sure to post it back here when you publish and also link to it from your Github repo (in case it doesn't land on the front page of HN). I've been playing around with simply building a metronome using nothing but native JS and it's a chore. I'll have to check out Tone.js. Great work!
    - drumnickydrum 5y ago
lxe 5y ago
Expected a experimental mini-project but met with a high-quality full-featured app. Nice!
- drumnickydrum 5y ago
  I got tired of code camp assignments!
technological 5y ago
Is it down ?
- drumnickydrum 5y ago
  Not as far as I can tell. What are you seeing?
zaxomi 5y ago
Nice work! I find it funny that I'm in the middle of writing a song player in assembler on the old Commodore 64 :) Anyway, what I missed in your app was a method to use the keyboard to play the drums. Using the touchpad is too slow.
- drumnickydrum 5y ago
  Thx to another comment's suggestion I've just added numpad support to play it like an mpc. Let me know if that helps ! It was designed mobile first where I find the input to be very fast, but yes, on desk/lap the buttons are way slow.
  - zaxomi 5y ago
    Sorry, my modern laptop does not have a numpad, not even a pseudo-numpad with the fn-key.
    - drumnickydrum 5y ago
      No problem, I've just added input via QWE-ASD-ZXC :) It's a pwa, so make sure you close every tab and refresh a few times so the changes take effect.
      - zaxomi 5y ago
        Nice! Tested it and it works great!
mtraven 5y ago
Really nice work, especially for someone pretty new to development!
- drumnickydrum 5y ago
  Thank you! I'm excited to see what's next, though I feel pulled in many directions. With native apps I can make real performance and UI gains, with web apps I can continue exploring the wild world of javascript (which I've grown to love.)
metalman 5y ago
Thats fun. got a blob error trying to save my beat as a ringtone on my cheap android phone(moto e)
- drumnickydrum 5y ago
  Dang. The download feature needs a lotttt more attention. I just felt wrong putting out the app without any ability to download what you've created. But without a doubt it needs more cross-platform support.
  - envp 5y ago
    Thanks so much for it though. I can say it works well for me. Made an account and sharing it with my group of friends to make some terrible beats over :)
    - drumnickydrum 5y ago
      You’re welcome :)
ludwigschubert 5y ago
Duuuude the mixer effects (reverb, filter, distortion, etc) are super responsive and wonderfully inspiring to play with — I haven’t even changed the pattern and had minutes of fun just playing with multiple effects at once, using two fingers to rhythmically move two sliders at the same time… this is just hilariously well done considering it’s all in-browser. I hope you can keep working in the music space; this level of polish is sorely needed. Fantastic job, drumnickydrum; and thank you for sharing!
- drumnickydrum 5y ago
  Thank you, I'm so honored by your remarks! I put a lot of sweat into this.
nyanpasu64 5y ago
Running Firefox on Windows 10 x64, on a somewhat under-specced machine that tends to run low on RAM. I'm getting highly inconsistent note timings, with intermittent full 1-second pauses with no new notes being triggered. (FWIW, I also saw something similar in https://news.ycombinator.com/item?id=26870666 https://news.ycombinator.com/item?id=26870666 , and am getting choppy audio in Zoom that disappears as soon as I enable profiling...) Is it my browser's fault for having the JS event loop stall, or the page's fault for driving audio off the page's event loop? Or both? (IDK how to fix Firefox, other than increasing the content processes above 3, which will reduce cross-tab lag but possibly increase RAM, or to reduce my extensions or find the one at fault.) On a related note, how critical is it to follow the "audio on a real-time thread" dogma (http://www.rossbencina.com/code/real-time-audio-programming-101-time-waits-for-nothing http://www.rossbencina.com/code/real-time-audio-programming-...)? I've heard that not using Electron, writing real-time code, avoiding mutexes and allocations, mlock to avoid swapping, tuning OSes and picking processors and audio interfaces based on its low-latency properties, etc. is important for live performances, but not necessary for MIDI instrument input for (casual home users? studio work?).
- drumnickydrum 5y ago
  How many other open tabs and applications? Without a doubt I don't expect excessive overhead from the browser and would encourage users experiencing serious performance issues to wipe out everything else going on. This is still an experiment in just how much we can do in the browser. It would be a fun challenge for me to programmatically figure out if the user is experiencing issues and disabled features to improve performance...
- jeroenhd 5y ago
  I can reproduce the audio stutter by having Firefox do anything performance intensive (starting recording a performance profile does the trick nicely) and I seem to be getting severe frame drops because of garbage collection. I think the flows of React and Redux are just not built for timing-sensitive applications like these. A lot of allocations and deallocations are taking place without any user input. Looking at the source code, the many selectors and other hooks probably has something to do with that. Redux is also very explicit about treating objects as immutable, causing a lot of duplication as a result. For a simple web application this shouldn't be too much of a problem but again, this application is very sensitive to timing issues where 50ms of GC can cause a noticeable performance degradation. It's not that the code is bad, it seems quite well memo-ised to get decent performance; I think it's a result of using the wrong too for the job, nothing more. Quite impressive that a framework as heavy as React can be made this responsive in my opinion. If you run into any memory troubles, check about:performance and about:memory, you may be able to find what's causing the memory leaks.
zupreme 5y ago
I love this. The layout. The color scheme. The workflow. This is far better an approach than most beatmaker apps, and even many desktop equivalents. Excellent work. Expand the sound library, include a good host of examples, wrap this up as an app, publish, and profit my friend. Kudos, and congratulations on your success in advance!
- drumnickydrum 5y ago
  Thank you for the kind words. It means a lot. Many have mentioned I should sell this even though it wasn’t the intention. I’m not sure it will go that way but I’m stoked it lives up to the standard.
georgeoliver 5y ago
Really fun! I couldn't figure out if there's a way to set a start and stop on the grid (so you could develop a beat in just 8 steps for example). Also can you set velocity/pitch for individual notes, not just all notes of a sample?
- drumnickydrum 5y ago
  Re: grid length: not yet. Re: pitch/velocity. Yes! Just toggle “apply all”. You set the value then tap or slide over cells to edit individually. This section was a pain to figure out and there’s def room for improvement.
  - georgeoliver 5y ago
    Thanks for the response, yeah the UI is a little tricky there. But it works OK when you figure it out. I really like painting the notes in on the grid, feels kind of different! sequencer64.com/sequencer/609b496c86fd88ad6d31e43c The share UI might need a UI tweak as well -- if you save locally without login first, then login, you see your track but can't AFAICT generate a share URL.
    - drumnickydrum 5y ago
      You’re right. Saved sequences need a link field that appears as a button for each once synced.
jayesh__ 5y ago
don't know much about music, but as a react developer i find this really good. The details here are really good. Great work.
- drumnickydrum 5y ago
  The reusability of components and memoization hook made this much more of a breeze than had I not used React. It was a fun experiment.
jeremy_wiebe 5y ago
Looks really neat. I can’t seem to get any audio on iPhone on iOS 14. Am I missing a mute/unmute feature. Also, the animation speed switching between the “menu” ans the play/pause controls feels really slow. Not sure if these are just on my phone. :-)
- drumnickydrum 5y ago
  If you have your side button on mute you won't get any sound. If you don't mind, take a screen recording of the animation you're referring to and email it to me drumnickydrum@gmail.com
  - jeremy_wiebe 5y ago
    Nice. I have my phone muted pretty much all the time and forgot about it.
senseiadam 5y ago
Great work
spoonjim 5y ago
Is the only way to add a sound to first click the sound and then add it to squares? I would have preferred to click the square in the part of the 3x3 grid to add the sound directly.
- drumnickydrum 5y ago
  Tap - Record on the bottom menu :)
habosa 5y ago
This is so much fun! The mixer effects sound great and I love the workflow, I've never seen this sort of nested-grid drum machine setup (instead of horizontal parallel tracks) but I find it really fun and intuitive.
- drumnickydrum 5y ago
  I’m glad! That Ui design was my primary inspiration.
spacec0wb0y 5y ago
As a musician and developer of 20+ years this is great work! It worked perfectly for me in ios safari... one of the most hostile environments for web audio! The slice feature is awesome. Works really well as a PWA The bpm input could do with a stepper button for the lazy attention to detail throughout is fantastic... well done!
- drumnickydrum 5y ago
  Thank you! I can’t help but sweat certain details otherwise I every time I look at the app I cringe. (I still cringe but a little less)
Pensacola 5y ago
Fantastic toy! No hitches at all on FF on OSX
- drumnickydrum 5y ago
  Stoked! I agonized over cross-browser and device incompatibilities.
alkonaut 5y ago
I'm sure this is awesome so a a bit sad I'm blocked because it's not https. It's usuall trivial to set up https these days so that's my one and only feature request :)
- drumnickydrum 5y ago
  It is https? And hosted on netlify where all accidental http redirects to https. If this doesn’t happen automatically edit the url. Sorry... Very weird.
  - alkonaut 5y ago
    Thanks, editing it manually works. The HN article link is the http url, that was the problem. If the http request is blocked, it never reaches the server to get redirected to the https version.

327 points by drumnickydrum 5y ago

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!

jjordan 5y ago

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

masalachai 5y ago

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 5y ago
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 5y ago

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 5y ago
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 5y ago

great job! Totally enjoyed playing with the sequencer.

drumnickydrum 5y ago
Thank you :) Don't be bashful... share your beat!

EamonnMR 5y ago

Loving the slice feature. Able to make some nice rolls.

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

lbj 5y ago

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 5y ago
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.)
- lbj 5y ago
  Clever - You might be interested in Clojurescripts Reagent, which is a React wrapper that gives you a lot of memoization for free. Re-doing this in cljs would be a great learning exercise.

focusgroup0 5y ago

Congrats on the launch, this is fun :)

drumnickydrum 5y ago
Thank you :) I'm so glad people are enjoying it. Share a beat!

Quintus_ 5y ago

The sounds crackle a bit on chrome Version 89.0.4389.114 on Ubuntu. Works fine on my firefox though

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

rafaelturk 5y ago

Awesome work.. I'm having lots of fun with my kids!

drumnickydrum 5y ago
Thank you! I'm so glad it's accessible to everyone :)

phailhaus 5y ago

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

mrspeaker 5y ago

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 5y ago
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.
- Optimal_Persona 5y ago
  Very cool! On my underpowered HP Win10 machine running Firefox, turning on the Analyzer messes with the timing. Almost like introducing a random swing percentage, so potentially a feature rather than a bug. :-) Keep it up, I am a former professional bassist turned data analyst, always working on my programming chops.
  - drumnickydrum 5y ago
    I stayed up super late one night playing around with weird css combinations to make the analyzer do amazing things and ended up scrapping most of them to improve performance. It was a bit of an afterthought and I could certainly figure out a way to optimize it. Do you still gig?
- maroonblazer 5y ago
  I'd love to read that too. Be sure to post it back here when you publish and also link to it from your Github repo (in case it doesn't land on the front page of HN). I've been playing around with simply building a metronome using nothing but native JS and it's a chore. I'll have to check out Tone.js. Great work!
  - drumnickydrum 5y ago

lxe 5y ago

Expected a experimental mini-project but met with a high-quality full-featured app. Nice!

drumnickydrum 5y ago
I got tired of code camp assignments!

technological 5y ago

Is it down ?

drumnickydrum 5y ago
Not as far as I can tell. What are you seeing?

zaxomi 5y ago

Nice work! I find it funny that I'm in the middle of writing a song player in assembler on the old Commodore 64 :) Anyway, what I missed in your app was a method to use the keyboard to play the drums. Using the touchpad is too slow.

drumnickydrum 5y ago
Thx to another comment's suggestion I've just added numpad support to play it like an mpc. Let me know if that helps ! It was designed mobile first where I find the input to be very fast, but yes, on desk/lap the buttons are way slow.
- zaxomi 5y ago
  Sorry, my modern laptop does not have a numpad, not even a pseudo-numpad with the fn-key.
  - drumnickydrum 5y ago
    No problem, I've just added input via QWE-ASD-ZXC :) It's a pwa, so make sure you close every tab and refresh a few times so the changes take effect.
    - zaxomi 5y ago
      Nice! Tested it and it works great!

mtraven 5y ago

Really nice work, especially for someone pretty new to development!

drumnickydrum 5y ago
Thank you! I'm excited to see what's next, though I feel pulled in many directions. With native apps I can make real performance and UI gains, with web apps I can continue exploring the wild world of javascript (which I've grown to love.)

metalman 5y ago

Thats fun. got a blob error trying to save my beat as a ringtone on my cheap android phone(moto e)

drumnickydrum 5y ago
Dang. The download feature needs a lotttt more attention. I just felt wrong putting out the app without any ability to download what you've created. But without a doubt it needs more cross-platform support.
- envp 5y ago
  Thanks so much for it though. I can say it works well for me. Made an account and sharing it with my group of friends to make some terrible beats over :)
  - drumnickydrum 5y ago
    You’re welcome :)

ludwigschubert 5y ago

Duuuude the mixer effects (reverb, filter, distortion, etc) are super responsive and wonderfully inspiring to play with — I haven’t even changed the pattern and had minutes of fun just playing with multiple effects at once, using two fingers to rhythmically move two sliders at the same time… this is just hilariously well done considering it’s all in-browser. I hope you can keep working in the music space; this level of polish is sorely needed. Fantastic job, drumnickydrum; and thank you for sharing!

drumnickydrum 5y ago
Thank you, I'm so honored by your remarks! I put a lot of sweat into this.

nyanpasu64 5y ago

Running Firefox on Windows 10 x64, on a somewhat under-specced machine that tends to run low on RAM. I'm getting highly inconsistent note timings, with intermittent full 1-second pauses with no new notes being triggered. (FWIW, I also saw something similar in https://news.ycombinator.com/item?id=26870666 https://news.ycombinator.com/item?id=26870666 , and am getting choppy audio in Zoom that disappears as soon as I enable profiling...) Is it my browser's fault for having the JS event loop stall, or the page's fault for driving audio off the page's event loop? Or both? (IDK how to fix Firefox, other than increasing the content processes above 3, which will reduce cross-tab lag but possibly increase RAM, or to reduce my extensions or find the one at fault.) On a related note, how critical is it to follow the "audio on a real-time thread" dogma (http://www.rossbencina.com/code/real-time-audio-programming-101-time-waits-for-nothing http://www.rossbencina.com/code/real-time-audio-programming-...)? I've heard that not using Electron, writing real-time code, avoiding mutexes and allocations, mlock to avoid swapping, tuning OSes and picking processors and audio interfaces based on its low-latency properties, etc. is important for live performances, but not necessary for MIDI instrument input for (casual home users? studio work?).

drumnickydrum 5y ago
How many other open tabs and applications? Without a doubt I don't expect excessive overhead from the browser and would encourage users experiencing serious performance issues to wipe out everything else going on. This is still an experiment in just how much we can do in the browser. It would be a fun challenge for me to programmatically figure out if the user is experiencing issues and disabled features to improve performance...
jeroenhd 5y ago
I can reproduce the audio stutter by having Firefox do anything performance intensive (starting recording a performance profile does the trick nicely) and I seem to be getting severe frame drops because of garbage collection. I think the flows of React and Redux are just not built for timing-sensitive applications like these. A lot of allocations and deallocations are taking place without any user input. Looking at the source code, the many selectors and other hooks probably has something to do with that. Redux is also very explicit about treating objects as immutable, causing a lot of duplication as a result. For a simple web application this shouldn't be too much of a problem but again, this application is very sensitive to timing issues where 50ms of GC can cause a noticeable performance degradation. It's not that the code is bad, it seems quite well memo-ised to get decent performance; I think it's a result of using the wrong too for the job, nothing more. Quite impressive that a framework as heavy as React can be made this responsive in my opinion. If you run into any memory troubles, check about:performance and about:memory, you may be able to find what's causing the memory leaks.

zupreme 5y ago

I love this. The layout. The color scheme. The workflow. This is far better an approach than most beatmaker apps, and even many desktop equivalents. Excellent work. Expand the sound library, include a good host of examples, wrap this up as an app, publish, and profit my friend. Kudos, and congratulations on your success in advance!

drumnickydrum 5y ago
Thank you for the kind words. It means a lot. Many have mentioned I should sell this even though it wasn’t the intention. I’m not sure it will go that way but I’m stoked it lives up to the standard.

georgeoliver 5y ago

Really fun! I couldn't figure out if there's a way to set a start and stop on the grid (so you could develop a beat in just 8 steps for example). Also can you set velocity/pitch for individual notes, not just all notes of a sample?

drumnickydrum 5y ago
Re: grid length: not yet. Re: pitch/velocity. Yes! Just toggle “apply all”. You set the value then tap or slide over cells to edit individually. This section was a pain to figure out and there’s def room for improvement.
- georgeoliver 5y ago
  Thanks for the response, yeah the UI is a little tricky there. But it works OK when you figure it out. I really like painting the notes in on the grid, feels kind of different! sequencer64.com/sequencer/609b496c86fd88ad6d31e43c The share UI might need a UI tweak as well -- if you save locally without login first, then login, you see your track but can't AFAICT generate a share URL.
  - drumnickydrum 5y ago
    You’re right. Saved sequences need a link field that appears as a button for each once synced.

jayesh__ 5y ago

don't know much about music, but as a react developer i find this really good. The details here are really good. Great work.

drumnickydrum 5y ago
The reusability of components and memoization hook made this much more of a breeze than had I not used React. It was a fun experiment.

jeremy_wiebe 5y ago

Looks really neat. I can’t seem to get any audio on iPhone on iOS 14. Am I missing a mute/unmute feature. Also, the animation speed switching between the “menu” ans the play/pause controls feels really slow. Not sure if these are just on my phone. :-)

drumnickydrum 5y ago
If you have your side button on mute you won't get any sound. If you don't mind, take a screen recording of the animation you're referring to and email it to me drumnickydrum@gmail.com
- jeremy_wiebe 5y ago
  Nice. I have my phone muted pretty much all the time and forgot about it.

senseiadam 5y ago

Great work

spoonjim 5y ago

Is the only way to add a sound to first click the sound and then add it to squares? I would have preferred to click the square in the part of the 3x3 grid to add the sound directly.

drumnickydrum 5y ago
Tap - Record on the bottom menu :)

habosa 5y ago

This is so much fun! The mixer effects sound great and I love the workflow, I've never seen this sort of nested-grid drum machine setup (instead of horizontal parallel tracks) but I find it really fun and intuitive.

drumnickydrum 5y ago
I’m glad! That Ui design was my primary inspiration.

spacec0wb0y 5y ago

As a musician and developer of 20+ years this is great work! It worked perfectly for me in ios safari... one of the most hostile environments for web audio! The slice feature is awesome. Works really well as a PWA The bpm input could do with a stepper button for the lazy attention to detail throughout is fantastic... well done!

drumnickydrum 5y ago
Thank you! I can’t help but sweat certain details otherwise I every time I look at the app I cringe. (I still cringe but a little less)

Pensacola 5y ago

Fantastic toy! No hitches at all on FF on OSX

drumnickydrum 5y ago
Stoked! I agonized over cross-browser and device incompatibilities.

alkonaut 5y ago

I'm sure this is awesome so a a bit sad I'm blocked because it's not https. It's usuall trivial to set up https these days so that's my one and only feature request :)

drumnickydrum 5y ago
It is https? And hosted on netlify where all accidental http redirects to https. If this doesn’t happen automatically edit the url. Sorry... Very weird.
- alkonaut 5y ago
  Thanks, editing it manually works. The HN article link is the http url, that was the problem. If the http request is blocked, it never reaches the server to get redirected to the https version.