Open-Source Hookpad

First of all, I love Hookpad and it has given me insights and inspiration about music I’d never have otherwise. But it is a bit limited, and I couldn’t always create what I wanted with it. So, for the past few days, I’ve been working on an open-source version of Hookpad! Now, I don’t mean to take away Hooktheory’s customers or anything like that, but instead I just want to offer an alternative to Hookpad that everyone can contribute to, modify to suit their needs, and also to freely embed in other webpages.

It’s still missing a LOT of key features, and the design is not final, of course. Nothing is set in stone!

I’ve put it up for testing here:

Test Page:

One of the new cool features, I think, is that notes that span multiple key changes will bend visually to show how it is affected by each scale. And of course, I tried to add new chords and scales not present in Hookpad (but it is, of course, still missing many).

So, what do you guys think? Is there any interest in this?


Please add support for both accidental signs. I should not expect to see all sharps on the key bar, and all flats on the chord symbols. You may want to encode all notes as the number of fifths deviating from C so as to allow any number of accidentals. (This also means the octave of a note needs to be stored elsewhere.)

Diminished seventh chord is [ C, Ds, Fs, A ].

This is the best topic on this forum.


Looking at the code, as HertzDevil noted, there’s no flats. Couldn’t you just have Cs = Df? Flats and sharps are the same note, just with different names.

This is not really an issue as simple as creating an alias for theory.Cs and so on; for the purpose of musical analysis C♯ and D♭ must be different notes until they are rendered into MIDI note values (where the number of semitones becomes relevant).

I will make a pull request later.

Oh, yeah! My intention was to support scales with an arbitrary number of notes (pentatonic scales, for example), so naming notes automatically was kind of difficult. I then just labeled pitches without taking the key into consideration. The functions theory.getNameForPitch and theory.getRomanNumeralForPitch control the naming; you can see that I left “todos” there! I did everything under the assumption that pitches are fixed, and that naming is just a convenient visualization of the data arising from the key/scale. But I look forward to what you can come up with!

Code might be a little confusing overall, as I rushed it a bit in the end to have it posted here.

Also, I’d like some ideas on how to categorize chords. I was thinking about having 3- and 4-note chords in the dropdown menu (like it is now), and embelishments as checkboxes to the side. So you could, in theory, create seventh chords with suspended seconds + suspended fourths + added ninths + added thirteenths + etc, without having to handle all the combinatory explosion in the dropdown menu. But do seventh chords actually fit with the embelishments?

Just for info, the test page doesn’t work for me (Safari on OSX El Capitan)

Here is what I have got so far: (it was taken yesterday so the save/load box is not there)

Using arbitrary scales as modes will be very difficult; non-heptatonic scales work only on the melody track, and must pick one heptatonic scale for triadic chords to even make sense (e.g. Dorian for major pentatonic, altered scale for symmetric diminished). In general chord analysis never works well for scales containing anything other than 7 degrees.

I have forked the project on Github. I plan to add slash chords after the accidentals are done.

1 Like

Hey, that’s cool! You really seem to know your way around my messy code…! How did you split chords into sharps and flats? They’re equivalent, right? So how does the visualization decide?

Of course, saving/loading is preliminary, since I haven’t decided what’s the best way to store chords/scales yet, and you might also be changing chord structure to allow for those new features, too.

Hoo boy I just got on my PC to try this, and damn it’s hard to use.

Will you be implementing shortcuts? Currently, as far as I can tell, space places the last-selected chord.

Here’s some possible key combos and functions.
View Window
Up/Down: Move view window up/down.
Left/Right: Move view window left/right.
+/-: Zoom in/out.

Note and Chord Input
1-9: Melody notes
Shift + 1-9: Chords
Ctrl + Up/Down: Move melody note up/down 1 octave if selected. Move chord up/down a degree if selected.
Ctrl + Left/Right: Move ONLY selected melody note left/right 1/8 of a measure.
Ctrl + Left Click: Select multiple notes one at a time
Shift + Left Click: Select all notes in between and including 2 end points
Ctrl + A: Selects all melody notes.
Ctrl + Shift + A: Selects all chords.

Note/Chord Lengths
Q: 32nd note
W: 16th
E: 8th
R: Quarter
T: Half
Y: Whole
Shift + [Any combination of QWERTY]: Puts 2 lengths together to form a longer note.

That’s all I have for now.

Yeah! There sure will be shortcuts. This is just a proof-of-concept. I’ll be adding more features as time goes by. I’ll be sure to include those that you mentioned!

And a feature request: Percussion track. I want to transcribe percussion, but there’s nothing like Hookpad for percussion.

@bigyihsuan, here is a decent open-source tool for transcribing percussion.

1 Like

Last reply is 449 days old but I don’t give a damn. This has potential to be better than Hookpad if enough people contribute. Granted, this is a barely-alive and hidden forum of a somewhat-active web tool for music theory, so I’m looking for a pretty small subset here.

There’s so many things I want in Hookpad that haven’t been implemented yet, but could be put in here. There just needs to be the will to do so.

Hey there!

Well, this project has been kinda dead for a while… Mostly because of one thing: letting users edit stuff through some WYSIWYG/visual representation is really cumbersome to program for!

So, I started a new type of music analysis tool – more programmer-friendly – which I think has an even higher potential, and is really easier to increment with new features! Here it is:

Tell me what you think!

Seems like a neat tool. You should put in your synth code from the OP and put a play button in there to test out the sound.