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.
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.
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.
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.
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.
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.
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).
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.
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?)
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.
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.
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!
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...
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 :)
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.
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.
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)