user profile image

A quick way to sketch out musical chord progressions.

uses my Scale Generator and Arpeggio Pattern Generator and the lovely Tone.js.

I've started collecting my musical composition stuff in this collection.

I also made a few videos as an intro to using Tone.js on CodePen and put them on YouTube.


  1. Wow.... Dude!

  2. omg I came here to write DUDE but @ImagineProgramming beat me to it 💕✨💯

  3. That is very cool.

  4. Jake.... holy moly

  5. This is amazing!!

  6. Wow! Beautiful.

  7. Have you considered outputting sheet music instead of chord symbols? If you pull in VexFlow it should be pretty simple! Oh, and it'll do tabs too!

  8. @MityaDSCH i used abcjs for this older pen, but ill totally check out vexflow!

  9. Incredible!!

  10. Absolutely amazing!

  11. Jake Albaugh is at it again. Very cool demo and I guess I also have to say DUDE!

  12. Mother of Music!

  13. How do I give this thing 10 hearts! Codepen or CodeArpeggiator? Shaazam!

  14. Ive been making music for 9 years now and programming for 3, this is amazing! Are there any resources to learning to make this type of stuff? Ive had ideas but dont know where to begin.

  15. @Hydrojaime Tone.js is awesome, but you need to dig into it to really make it work and there are some caveats that arent explicit in the documentation. I started by building basic oscillators using Tone, and Tone.Transport.scheduleRepeat to play them. It'll take time, but it is understandable if you can wrap your head around synths in DAWs like Ableton, Pro Tools or Logic. I'll probably end up writing a post on how to do this sort of thing eventually. My best advice right now is to just mess around with stuff and see if you can get it to work.

    Here is a very basic implementation of Tone.js: Basic Tone.js. Hopefully that helps you on your way! Good luck!

  16. Wow... this is more than impressive. 10 hearts!!

  17. This is absolutely brilliant!

  18. I came back here, because this is really my favorite thing ever now.

  19. This is now my browser's default home page. It's incredible.

  20. Added to the most awesome pens of all times bookmarks.

    const awesomeness = Infinity
  21. Impressive! Thank you!

  22. First time I've commented to say,

    this page is amazing! I'm saving it and will likely use it for inspiration...

  23. This is the most inspiring pen I've ever seen. I want to tinker with Tone.js SO bad now. Amazing work, as always, Jake!

  24. Really? This is insane. Great stuff

  25. I'm a musician and this is absolutely amazing!

  26. So this has to go down as one of the Pens of the year.

  27. Jake this is hands on head brilliant.

  28. Whoa! This is blowing my mind right now! Awesome job!

  29. This is beyond awesome man! Is there a reason you don't have the chord symbols changing by selection? Like for Aeolian having them i-iidim- III-iv-v-VI-VII, or something like that to reflect the music theory. It'd be especially cool if you could toggle a V vs v for harmonic minor! Holy crap man, this is just inspirational!

  30. @Philopotamus thanks for the love! i'd love to go that deep with it. i havent yet because I wanted to figure out how to do it programmatically without hard coding it in. my music theory knowledge is just enough to know that there is a difference but not enough to figure out the best way to apply it algorithmically.

  31. This is amazing, thanks!

    And for those of you with hardware synths, I tweaked this pen a bit to support output to MIDI devices (Chrome only):

    (Loads of knob wiggling fun with MicroKorg!)

  32. Wow! Incredible job!

    Sounds nice, looks nice, fun to play around with, well structured code, works on my phone!

  33. I can't believe that you did this with minimal code, Great Work, WOW!

  34. Best thing I've seen since the big bang

  35. Thorough and thoroughly amazing.

  36. This is amazing.

  37. ArmandoGN @ArmandoGN-1471039262 on

    All my respect, I have been astonished

  38. Fantastic.

  39. I don't even know where to begin. This is the best thing I have seen on CodePen. Ever. What magic is this even? Forked.

  40. GPOAT - da vinci status !!!!!!!!!!!!!!!

  41. This on iPad could be f**inkg crazy!

  42. Smashing

  43. very helpful

  44. This is just incredible. Congratulations, and thank you so much for making this public! <3

  45. As someone who is still learning the basics of coding I'm thinking to myself "When can I become like this?"

  46. @jona62 just keep going. you’ll get there.

  47. Amazing and inspiring work! Thank you for sharing the codepen!

  48. mind. completely blown.

  49. @Hydrojaime i recently started making videos about using Tone.js on CodePen if youre interested: YouTube

  50. Wow! this is so cool!

  51. Dopeness!!!

  52. This is amazing Jake!

  53. Literally the dopest piece of coding I've seen so far. Bravo and applause, sir!

  54. @jakealbaugh Is it possible to export the arpeggio to a midi-file?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.