Show HN: Note Kitchen – Learn piano chords and scales | Hacker News Reader

Show HN: Note Kitchen – Learn piano chords and scales

note.kitchen

94 pointsOzzyB43 comments

Looks really nice and it's fun to play around with. Maybe a control for inversing the chords would be fun? That would mean support for chords like A7/c# and maybe also closer chord voicings.

I should also add that the app became much more fun when I accidentally read the "Help" menu and became aware of "play" and "root" - maybe that information should be a bit more visible?

I'm interested in what if any library you've used for the theory - did you just built one yourself? You could take a look at teoria(https://github.com/saebekassebil/teoria) which is a by now pretty seasoned music theory library in js, with a chord parser included.

EDIT: (PS: Also add9 add11 chords would be nice)

Thanks! Chord inversion is definitely on my todo list.

Your point about the help page is really good, I'm going to figure out a better way to introduce the feature to new users. I was primarily thinking of users coming in via my YouTube channel in which I made a tutorial video, but I hadn't really thought about organic traffic.

For the theory I just wrote it myself, you can check it out here: https://github.com/nebs/notekitchen

Feel free to submit a PR if you find any bugs or inefficiencies.

I'll check out Teoria, haven't heard of it before.

Very cool! Relatedly, I made something to help me come up with chord progressions. It's hooked up to Web Audio and Web MIDI, so it can either play the sounds in-browser or in my DAW. Please feel free to take a look and steal code ideas.

app: https://chord-progression-helper.glitch.me/

src: https://glitch.com/edit/#!/chord-progression-helper

Thanks I'll check that out.

In addition to what everyone else has said, something I'd find really useful would be going in the other direction. Just mark some keys and it tells you what chord you're playing.

Doesn't work. The same notes can be represented as several different chords depending on harmonic context.

Thanks for the feature request! I've had this feature request many time, it's on my list. But like UncleMeat said, it's a bit trickier because there isn't a 1-1 mapping. So I'll have to find some elegant UI pattern for this. I want to keep Note Kitchen very minimal and simple so I have to be careful about too many menus and buttons, etc.

it looks like I can click on the tiny keyboard, but nothing happens when I do, other than the color changing. I'm really not sure what I'm supposed to do with this, or how it will help me learn chords and scales.

I don't understand the praise it's getting.

If I'm shown a keyboard I expect to click it and make sound (thanks, MYST). This does nothing.

The only instructions "e.g. Cm7b5" means nothing to me. I can only assume its target market is the people that understand whatever this notation is, in which case they don't need to learn.

FAIL.

That's rather dismissive. I'd say if you don't understand the praise, you aren't the target audience, not that it's a terrible product.

I don't know/play piano. I know the basic music theory behind the notation. I think this tool is great.

This tool appears to be aimed at piano noobs with some music background.

You can just type "play A" and it will play the A chord.

How is the user supposed to know that "play" needs to be typed?!

RTFM?

What fucking manual?

http://note.kitchen/help.html

That was really easily overlooked. I didn't find it right away even after being told there was a link. Putting the help link by the piano would have been useful I suppose. But a web app that you need to read the help file in order to figure out how to do ANYTHING in the app seems like a big miss to me. Not trying to be dismissive; UX is really important if you want adoption. It might not matter at all for a hobby project; maybe that's not the author's goal. That's fine, but I think the feedback is still fair.

Thanks for the feedback! I agree that it's not very intuitive. I made a YouTube video explaining all the features: https://youtu.be/LFVomixflio

I wanted to keep the UI very minimal, so that once you learned the features the interface was very simple. But you bring up a good point that first-time users might get confused.

I'll put this on my todo list and try to figure out a way to provide help for first time visitors while not cluttering the UI for experienced users.

a common pattern is to make help content visible by default (you've got lots of room for it, even if it was just some of the help text you already have), and allow it to be easily dismissable, or dismiss it automatically after some time (subsequent page loads or similar).

Great! Some suggestions for improvement: - make the keyboard bigger on screen - put a play button on screen - allow the whole chord to be played at once aswell as arpeggiated - allow chord inversions (left/right key?)

Great suggestions thanks! I'm writing this down.

(I'm the author of Note Kitchen)

Thanks everyone for all the great feedback! I've written everything down. I totally agree that the UI isn't very intuitive for first time user. So I will find a way to make the first time UX a little more pleasant.

My philosophy for this app is to keep it very minimal. Although I may have gotten too far down this path lol.

In the mean time here's a YouTube video that explains all the features: https://youtu.be/LFVomixflio

Also if you want to check out the code: https://github.com/nebs/notekitchen

Feel free to submit PRs. Web development isn't my strong suit so if you notice anything weird in there let me know!

Thanks again for checking out Note Kitchen and provided all the great feedback and suggestions!

This is great, but it doesn't recognize key names in lowercase. The first thing I typed was the example, but I didn't capitalize the 'C' and nothing appeared for 'cm7b5'

I wouldn't expect it to work with lowercase...if the flat indicator is 'b', it'd be a little tricky to parse something like "c9/bb". (And by "tricky to parse", I mean for both humans and computers.)

Edit: And, while we're at it, some jazz charts use "M" to indicate major and "m" to indicate minor, so your example is ambiguous.

Shameless plug: I built something similar awhile back as an excuse to learn the basics of React http://chordial.us/.

Neat!

Just one piece of feedback - for your diminished chord, you spell C dim as C, Eb, F#. Technically this should be C, Eb, Gb. This is because the definition of a diminished is two minor thirds, and the way you have it spelled is a minor third followed by an augmented second. While these are enharmonically the same, from a theory perspective, the spelling is not correct!

Otherwise really neat!

This is really great feedback, thanks! The chord generator I wrote currently treats F# and Gb (and the other enharmonically similar notes) as interchangeable, when clearly it shouldn't. Now I have a good excuse to revisit this code on a future rainy day. Hopefully I left myself some good comments...

Does absolutely nothing on my computer except alternate between two color schemes.

You need to type the name of a chord, e.g. Cm, and it will show you the notes that make up the chord on the keyboard.

Agree. The developer did a poor job of actually "walking us" through how to actually learn it. Most of us aren't piano experts obviously.

This didn't really teach me piano chords and scales. It seems like you should already know a thing or two about them to use it.

Lovely UI...

I'm interested to know what DB you used for searching chords? I tried to create something similar in React with MIDI support a while back but couldn't get the library (unfortunately, its name I've forgotten) I was working with to play ball with some of the tastier chord combos :)

You don't need to search a DB for chords. It's a purely mechanical process to generate the notes from the symbol.

Minor bug: "C6add9" includes an extraneous dominant 7, when it should just be 13569.

Neat! Would be cool if you could also reverse the input, generate the chords from selecting the keys. Also, it would be nice to hear the chord being played (a library like MIDI-js would suffice).

Note - I got bit by MIDIjs including Coinhive cryptocurrency mining scripts.

At the time (a few months ago), they had no mention of this on their website, so it took me quite by surprise. I see they have since added a disclaimer and are selling a "pro" version without this.

This is really neat. Would love to see a version for guitar as well, but would be a little more difficult to display I imagine.

Not that hard. I wrote a thing... jeez... 20 odd years ago https://ctan.org/tex-archive/support/pstab?lang=en ... which let you typeset guitar tablature, chords, and so on.

I expect you really mean: find a way to play a given chord without breaking your fingers, but when playing classical guitar you'll move your hand while playing arpeggios, so you're not constrained to just positions you can strum. You can solve for that, it's just not that useful.

The code's a bit embarrassing, the only program of any size I wrote in postscript - at the time it seemed the best way to 'write once, run anywhere useful' given the 286's, mac classics, and Sparc 2's I had access to; it ran on on the office Laserwriter.

Best thing about writing it is, I got a letter from a guy who used it to publish a book of banjo music in new zealand, because it was the only thing he could find at the time that handled 5 stringed instruments.

It'd be nice if the piano is bigger and can actually make sounds of the chords.

Nice job! It'd be even better to play the chord with sound

Huh, it has the modes in there too. Nice little tool.

How do you input a mode?

Just type the name of it, like “C Dorian”

Doesn't seem to work on Chrome mobile.

Reply on news.ycombinator.com