Hacker News new | past | comments | ask | show | jobs | submit login
Musical Chord Progression Arpeggiator (codepen.io)
265 points by sergiotapia on Dec 28, 2016 | hide | past | web | favorite | 50 comments

Like it - I will be using this with some of the classes I teach.

I have a couple of requests (I know it says fork it at the top, but I've taken a look and would be way, way out of my depth!):

1 - modes of the other scales given (melodic and harmonic minor)

2 - a less daunting way of selecting arpeggios - possibly by selecting what would be the first note then removing that from the available options? I love the diagrams, but the massive table is somewhat daunting.

3 - the ability to export a MIDI file of a single run of the chord progression.

Nice work though, lots of interest and fun to be had in exploring the possibilities locked up inside the scales/chords.


I've begun using Cthulhu as a plugin, which works nicely as a MIDI input device :


There's an option to 'lock' certain notes when you try out harmonic progression options.

On the MIDI file export, you could probably use https://github.com/grimmdude/MidiWriterJS for that

The Chord Progression section feels a bit odd to me, like it's upside-down, with chord I at the top and chord VII at the bottom. For example, a transition from chord IV to chord V is represented on screen as moving down (towards the bottom of the screen), whereas I think most people would tend to think of it as moving up (i.e. towards the right on a piano keyboard).

That's funny, down feels more natural to me coming from a (amateur) guitarist's perspective.

I play guitar but I know how to read sheet music, so I still feel like "up" is higher in pitch. Granted, I also learned piano first as a kid.

Nice work!

One suggestion to add. Be able to choose chord progressions from HookPad's database of songs / chord progression probabilities would be really cool with this.


Didn't knew that HookPad thing, thanks!

Could someone explain what the basics are of this? I'm not familiar with a lot of music theory. The arpeggio is something like:

    for base_note in range(B,B+5*2,2):
      for arpeggio_note in range(base_note,2*base_note,2):
        yield arpeggio_note
and the "chords" are single notes in some progression? Something like (R, R+1, R+3, R+5, R+6, R+8, R+10), where R is the root note?

What do the different modes do?

The modes are the sequence of seven notes you're choosing from. If we're counting in half-steps (where 12 half-steps is an octave and gets you back to the same note), the different modes would look like...

                    1    2    3    4    5    6    7
  Lydian:          (R,   R+2, R+4, R+6, R+7, R+9, R+11)
  Ionian (Major):  (R,   R+2, R+4, R+5, R+7, R+9, R+11)
  Mixolydian:      (R,   R+2, R+4, R+5, R+7, R+9, R+10)
  Dorian:          (R,   R+2, R+3, R+5, R+7, R+9, R+10)
  Aeolian (Minor): (R,   R+2, R+3, R+5, R+7, R+8, R+10)
  Phrygian:        (R,   R+1, R+3, R+5, R+7, R+8, R+10)
  Locrian:         (R,   R+1, R+3, R+5, R+6, R+8, R+10)
  Melodic:         (R,   R+2, R+3, R+5, R+7, R+9, R+11)
  Harmonic:        (R,   R+2, R+3, R+5, R+7, R+8, R+11)    
Then, once you have your mode, you form chords by picking a starting note (from one to seven) and then stacking every other note from there. We're only building triads, so stop after stacking three notes. So, if we're in Ionian, the chords would be...

  I:   (R, R+4, R+7)
  ii:  (R+2, R+5, R+9)
  iii: (R+4, R+7, R+11)
  IV:  (R+5, R+9, R)
  V:   (R+7, R+11, R+2)
  vi:  (R+9, R, R+4)
  vii: (R+11, R+2, R+5)
Instead of playing the three notes simultaneously, the arpeggiator here is playing them one at a time in different orders and octaves.

Hope that helped!

This is really succinct, I like your explanation.

Arpeggio is just a fancy way of saying that you play certain notes in a certain order, usually sequentially.

A mode (like minor or lydian) determines which notes are played. Let's take the notes in C major as an example. If you start with the C and play it up to C', then you get C major. If you play the same notes but starting at D, and up to D', then you get the D Dorian scale. Start with E, you get the E Phrygian scale, start with F, you get the F Lydian scale, etc.. Those scales or modes are all either major or minor (as the difference between major and minor is determined by the interval between first and third note), modes 1,4,5 are major and 2,3,6,7 are minor.

If someone plays a piece in E Phrygian mode, how would you know that it is? By looking at a piano keyboard, you would see that she only plays white keys, which tells you that the tonic/root is C major. Since a piece written in E Phrygian will most likely have progressions or melodies that start/end with an E, you would know that it's not C major, but E Phrygian. If you pay close attention to scores written for mystery movies (or the Simpson's), you will notice that it sounds outlandish or alien. That's because they use the Lydian scale. They might really only use C major notes, but starting a melody at the fourth (F) makes it sound completely different.

A major chord (example C major) is made up of three notes: first is the chord's tonic (C), second is a major third higher than the tonic (E), third is a quint higher than the tonic (G).

A minor chord is similar to a major, but the second note is only a minor third higher than the tonic. Using C minor as an example, the second note is Eb.

The chords that OP progresses over are the modes/scales I described above. If you set the tonic/root to C major, then the 5th mode would be G mixolydian (which happens to be a major mode), or the 6th would be good old A minor. Still, the only notes that are played are those that occur in the C major scale - the chords just use different starting points.

I wrote a little thing that demonstrates chords and scales/modes on a piano keyboard. Maybe it will help to clarify.


Wow, awesome, thanks!

Any chance on making the source available under a free/libre license?

Too much to address in a comment, best to look up a music theory primer but I'll attempt to summarize.

Chord = multiple notes played together. There are different ways to arrange the notes within the chord but a common example would be a major chord with consists of the root note, and then a note that is a 3rd above that, and then a 5th above that. For example a C major chord would be C-E-G.

An arpeggio is a rapid succession of notes within a chord. Instead of playing the notes in a chord all at once you cycle through them in some pattern. Typically ascending but as you can see from the tool there are lots of options.

Modes are similar to the scale but I've never learned them well enough to explain it. Altering the mode gives the "scale" a different quality sound. Think about the white and black keys on the piano and how they are not evenly spaced. If you start on C and play all the way to the next C one note at a time it sounds like one scale but if you do the same thing shifting one note higher it is going to sound completely different (not just shifted higher in pitch) it actually has a different quality.

I like it! but I really wish this would allow you to borrow chords from other keys or modes. Even a song as simple as "The House of the Rising Sun" (which The Animals famously arpeggiated) borrows chords - it's in A minor but uses a D major chord, which you can think of as borrowed from the parallel major.

Is that case not covered by switching the scale modes?

No, not unless you can fortuitously find a mode that has exactly the chords you need. But for some progressions there is no such mode. I believe "House of the Rising Sun" has such a progression, but I haven't exhaustively checked.

the A melodic minor scale contains a D major chord. haven't checked if it has every chord in the song though.

many songs do have the issue you describe though, even a simple modulation to lift the last chorus, for example.

A melodic minor lacks C major, and instead has C augmented.

Playing around with this, toggling the BPM and looped arp, I can almost get it feeling like


A very cool page, thanks. I agree that the chords should be the other way up, for my mental model of pitches. But I guess it's like how we visualise time: everyone is slightly different.

Same here, this makes sense because of a similar organ timbre and a very repetitive nature of minimalistic genre.

This is a lot of fun!

Is there a way to share an arpeggio with someone else?

Nice! Would it be possible to add sheet music export to this? Or maybe output midi file? I've had "generative tool for sight reading practice sheets" on my todo list for a while now, and it seems all that's missing here is the output!


Would use it in my work right now if it could export a MIDI file.

You could integrate https://github.com/grimmdude/MidiWriterJS for MIDI export

I love it, and wish I could keep myself from making a lame Philip Glass emulator joke. Does this count?

This is a cool tool!

It would be cool to be able to do other things besides purely diatonic triad progressions:

- 7th chords

- Tonicization/borrowing

- Inversions

- Slash chords

- Alterations

One suggestion. I don't see a way to reset the current chord to the first chord of the sequence when paused. It looks like you need to wait until the sequence wraps around again.

This is so great - my 12yo son, a gaming fan, loved it. It inspired him to say, "That's so cool! Can we play Obduction now?" Kids today...

Any way to export into midi pattern usable by today's DAW ? (Ableton etc...) ; bonus for live record ?

Anyway really inspiring :)

the locrian mode is a bit haunting. these are exactly the textures one might here in a Chopin or Schumann or beyond.

Locrian is super rare, because the tonic itself is unstable. But an arpeggiator like this actually does a decent job of making it sound ok!

I can't help but hear the iii as i, making the progression seem more like "viº || i v ii III | i IV VII" to my ears, i.e. Dorian.

Which is a very nice progression by the way :)

EDIT: Now that I think of it, it might actually be "ivº || vi iii vii I | vi II V" Lydian, which sounds very natural due to "vi-iii-vii-I" being essentially "I-I-vii-I" (vi and iii can be heard as inversions of I) and "vi-II-V-ivº" being actually "I-II-V" (classic jazz progression, II being the V of V) which then goes back to vi (i.e. to I) via "V-ivº || vi(I)" (5-4-1 being the classic blues progression). This movement by V is a much more common way of progressing through a song. I played it in my guitar extending to diatonic 7th chords and it sounds much better than the Dorian interpretation where the ii-III movement sounds awful for some reason.

This ivº-I movement sounds a bit like a plagal cadence[0] which keeps the movement going, which I think works very well with Lydian's uplifting sound to give that never-ending tension-building feel. Resolving to vi instead of I is similar to how a deceptive cadence[1] works which adds to the "suspended" feel.

Somehow my ears still latch onto Locrian's iii as the tonic (i.e. Dorian's i). "viº || i v ii III | i IV VII" could be seen as "viº || i v IV i | i IV VII". "i v IV i" makes a lot of sense (again, blues), but I can't quite understand "i IV VII viº". Maybe I'm right in both cases and the first bar is Dorian and the second modulates to the relative Lydian? Or viceversa?

It's very ambiguous. Modes are kind of confusing (at least for me) but their ambiguity is part of what makes them awesome. One of my teachers insisted there's no canonical way of analyzing sufficiently-complex progressions. In any case I am unable to hear it as Locrian.

(Sorry if I said something stupid. I've never been formally trained in music theory. Can an actual musician step in? :P The more music theory I learn, the more ambiguities I see in music analysis...)

[0] https://en.wikipedia.org/wiki/Cadence_(music)#Plagal_cadence

[1] https://en.wikipedia.org/wiki/Cadence_(music)#Interrupted_.2...

You really went to town on that!

After studying a basic amount of music theory, I have come to the conclusion that there is no such thing as canonical analysis. Analysis, in most theories, is a way of rationalizing what's become common practice in a given style.

One thing I learned when trying to research the origins of our music system is that our chord progressions appear to be underpinned by rules for multi-voice counterpoint. But in pop music, voicing isn't particularly important, it's just background for the bass and melody lines. So pure chord progressions tend to harken back to harmonic motion that's familiar from the more formal genres. A book I often recommend called A Geometry of Music [1] goes way down the rabbit hole, if you want to obsess over this to the extent that I did.

So, modal chord progressions (especially Locrian) really only tend make sense to the extent that they analogize major and minor chord progressions, from a functional tonality perspective. I don't think this is precise, but the way I think of it is that you sell the listener on alterations of major or minor scales, and they buy it after a few repetitions, and other signals of what the cadences are :)

[1] https://www.amazon.com/Geometry-Music-Counterpoint-Extended-...

For anyone interested, I asked what's going on in Reddit's /r/MusicTheory.


Too late to edit but, further down the rabbit hole: improvising over my Lydian recording with Lydian melody didn't work at all. My ear wanted to hear the mode a major 3rd up (Aeolian) or a minor 3rd down which is, perhaps unsurprisingly, Dorian.

Damn you, music!

Pick 5 step looped arpeggio at 120 BMM and then select random arpeggio styles. Voila you're Vivaldi!

Clever, I like it! I'm playing around with it to find some cool patterns to play on the guitar.

I'd like to see the sheet music for these instead of a bunch of piano keys.


This is a great way to make daily $instrument exercises. Mine's a bass clef.

Any of the progressions types sounds pleasing, is it just the nature of arpeggios?

It's the nature of the chords you're able to play - you're given the 1-7 chords of a specific mode (the most common ones are the major and minor modes, the notes of those modes make the major and minor scales of a key - but there are several more in this thing which is pretty cool). So basically the only chords you can combine are ones that are in the same key, and they'll pretty much all sound good, just with a different kind of feeling.

It would be nice if you could set it to play in "chord" mode as well.

Fantastic and fun! Licensing?

The Google machine says MIT for all public pens: https://blog.codepen.io/legal/licensing/

Playing this + some techno beats on Spotify = feels good man

Pretty awesome, well done!!

Very cool!

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact