* The label "Rising octave" on the octave-up button doesn't make sense. Maybe you meant "Higher octave", assuming the "Lower" in the "Lower octave" button is the adjective form of "lower". If "Lower" is acting as a verb, however, then "Raise octave" would be consistent, but I don't think it sounds very natural. "Octave up" and "Octave down" might be more natural based on my recollection of music software and hardware I've used.
* As another poster noted, the (FM?) synthesizer is clipping badly when it plays chords. It's noticeable on basic 3-note triads, but it's much worse on chords with many extension tones, like a C13.
If I can give another suggestion: I think it would be much more useful for beginners to see the common alias of the chord in the main table (maybe below the name that already exists?).
(This is wrong, see the reply below:) For example, a beginner may see "G7" in the wild and not know it's a G minor 7 (and not a G major 7). They'd have to click the chords and search the alias list. If "G7" was written below "G minor 7", it would make things much easier.
Also, I think it would look better if the names in the main table were a bit more consistent. For exmaple, you have "G major ninth" but "Gmaj13". I think it would be better to have them as "Gmaj9"/"Gmaj13" or "G major ninth"/"G major thirteenth".
Nit: G7 denotes a G dominant 7 (i.e. natural 3rd, flat 7th), not a G minor 7. G minor 7 (flat 3rd, flat 7th) is abbreviated Gm7 or G-7. (In my experience, the "Gm7" form is common in "official" printed guitar & piano songbooks, while G-7 is common in jazz lead sheets and fakebooks.)
My favourite way of "chunking" chords (i.e how to think of them to remember them) is to "decompose" them to think about them in a different way.
For example: Think of Bbmaj7 as just Dm with Bb as the bass. Bb + Dm. It turns out that this pattern always works for the maj7 chords.
Another example: Cmaj7 "is" Em with C as the bass. Think of Cm7 as Eb with C as the bass. C7 is Edim with C as the bass.
These decompositions are just a different way to see the same chords, maybe it helps some people to form associations/connections about these shapes in some way. Of course, once played enough, a chord is simply remembered as it is, its own thing.
For me personally it would be useful to be able to lookup chords by their middle and upper notes. Let say I improvise a lick and want to find some harmonization. F# and A should evoke not only F#m but also Dmaj and Bm7, and maybe something more spicy like D#dim7.
Another useful feature I would appreciate is to see possible functions of chords. Dmaj can be a I of D major as well as a II of C lydian. So as I lock the key, let say C Lydian, the tool might highlight other notes which are in key. That’s helpful for improvising further or when looking for a chords progression.
I’m pretty sure there are DAW plugins doing that but a simple web tool can be used in so many situations when DAW is not there.
Cool! My suggestion would be to make it more mobile friendly. I suspect any regular user will be near their piano, and using a computer or laptop there can be tricky! So I bet phones would be very common for people without a tablet.
The UI is just very small on a phone. While I understand why that may need to be the case for the actual keys, everything else should be significantly larger.
Awesome. I'm trying to pick it back up and go further, and I realized that sheet music bores me and I want to try just finding chords of songs and banging them out.
Relatedly, I ended up making a very kludgey tool (in bash, ASCII graphics) that would let me enter a few chords and would cycle through them with on the same screen-piano-keyboard (e.g. to better see the "transitions.")
I'm kind of surprised I've never seen anything like that out there done more formally?
Nice! The layout of the keyboard doesn't look right though: the size and position of black keys are wrong.
I realize you need wide black keys to be able to write their names on it, but still: most black keys aren't equidistant to each white key.
The only black key that's in the middle of its white keys is G#. F# is much more to the left and Bb much more to the right; same for C# (left) and Eb (right).
Not a huge problem of course, but as it is it really doesn't look like a piano.
Thanks! Nice catach. It's just out of the oven so I didn't have chance to test on all major browsers. Will improve on browser compatibility in the future.
It's a 2MB, gc-free, memory-safe, and easy-to-use npm audio lib written in Rust for browsers. Performant audio in browsers is not that easy, you need to consider the thread for example to avoid clicks during GUI interaction. I know it may not fit all you need out of the box but I am happy to improve it based on your feedback.
Sometimes when I hit the play button for a chord, the notes don't all start at the same time. I can't figure out a pattern for when this works and when it doesn't.
This is a great reference tool. Something like this must have existed already, but I couldn't find it for the life of me.
Something as simple as wanting to play simple guitar pieces based on chords, but struggling to figure out simple bar chord patterns for each of the less common chord families, and being unable to construct them on my own since I don't know enough of the theory to do it from the ground up. Thanks!
Taking a guess at what you're noticing but might not have a framework/vocabulary for...
It sounds like FM synthesis[0] to me (so either an embedded FM software synthesizer or simply replaying samples of FM synthesis), so the timbre is quite unlike a "real" piano or PCM samples of a real piano. Timbre is a kind of "color" of "quality" of a sound - in my head it's similar to how different materials feel different to the touch. A violin and a trumpet can play the same "note" but their sounds have very different timbres. An apple and a ball might both appear red but have different surface textures.
The "piano" in the app sounds like the piano patches (presets) on FM-based synthesizers from the 1980s[1], where the designers tried to approximate the timbre of a piano using the limited (but fun!) possibilities of FM, while the transients and harmonics produced by a real acoustic piano are more complex.
The pitches and temperament sound OK to me, so I think what you are are hearing is the timbre. That is, the app is playing the "right" notes, but it's as if you're hearing a "different instrument", albeit one that is an early digital approximation of a piano sound.
Mixing sharps and flats?
I chose c as root and db (d flat) is in the image...but so is f# (f sharp).
I have no problems explaining ie fb (f flat) or e# (e sharp) etc, in certain circumstances, but I'm a great believer in: don't mix the two (sharps and flats).
I think it is more a pitch thing. Playing the scale up from C, the F sounds off. Not sure why. My first guess was it was a sample just playing at different speeds and that was causing some issues.
You have a better ear than you think! I tried it again (and actually tried all the notes this time...) and the F is definitely flat. It's particularly noticeable in the 5th octave (i.e. if you play C5 D5 E5 F5), but all the F's appear to have the issue. I verified (by ear) against Pianoteq set to equal temperament.
The other notes sound OK. The A and B might be a tiny bit flat too but my ear isn't good enough, and if they're flat they're nowhere near as far off as the F. OP, how are you specifying notes/pitches to the synthesizer?
I implemented the synthesizer from scratch. Honestly I'm not super familair with digital synthesizer theory and for the implementation, mostly I referred to this article https://keithwhor.com/music/
I guess it't not a good choice to implement that part on my own, since there are many good libraries out there, like tone.js. I will probably deprecate my own synthesizer implementation and use tone.js.
Your F, defined on line 26 [0], is 3Hz off according to this reference table[1]. 346.23 should be 349.23. Just a typo?
All credit to @issa's ear. And yes, while you'd be unlikely to have encountered this bug if you were just telling a good existing synth to play an F, it's cool that you implemented the synth from scratch! Whether it's a good choice depends on the project goals.
Ah! Nice catch!! I didn't even notice that. My expectation for this project is focusing mainly on the music theory part and visualization. So I guess using a good existing synth will make my life eaiser.
ha. Full disclosure, I spent a decade as a professional musician and another decade as an audio engineer at a recording studio. I've just always had terrible pitch. Grew up completely tone deaf, but managed to train myself to hear notes eventually over the years. These days I'm very out of practice, but I could tell SOMETHING sounded funny. In case this didn't come through, the site is amazing!
Cool tool! Would it be difficult to use the Unicode symbols for sharps and flats? Using a lowercase letter “B” in particular just looks clunky. Sort of like how databases store your name in all caps for no apparent reason.
Please don't push history states for the sake of it. It's natural to want to explore variations of a chord, and one shouldn't expect it to impact their ability to go back to the previous page.
This is great! It would be really useful to be able to select and deselect notes on the top piano to construct new chords based on these ones (and it could detect when you've constructed one it knows).
Showing the sheet music of the chord in the top info box would also be very helpful.
A list of similar chords links in the chord info box would be neat.
An "automatically play chord" option would make it super easy to find a chord you want by sound.
Possibly out of scope, but it would great to be able to put in a sequence of chords and see things about the transitions, e.g. notes in common.
I'd like it if the chords played on selection instead of having a separate play button. Having to move my mouse + the extra click feels like a big disruption to the flow.
Can't believe how useful this is. I've been working my way back in to learning piano during the pandemic and have been learning songs I like mostly through guitar chords websites and playing the right hand by ear as my sight-reading is atrocious. This will really help my progress with this method for the more complex chords.
One of my first personal projects when learning how to program was generating sheet music for scales. Maybe I'll try to adapt some of the logic here to do that, someday.
I love the spirit of this. Simple reference tools for mobile devices or tablets, maybe with the ability to print things, could be leveraged more in the world.
Hah cool! That is how I more or less discovered 'structured programming'. I had already made three tries at that and failed miserably. Then 'functions' came along and suddenly I was able to write code in the 1000's of lines and not get lost. (Before then it was all GOSUB 3300 etc.)
The BBC Micro (the machine I was working on at the time) had a version of Basic that allowed for procedures (something that doesn't return a value) and functions to be defined with a name attached. It's incredible if you think about it from a present day perspective that in that sense the original BASIC was even worse than assembler, which at least allowed you to attach a label to an address.
Love it- was just digging out my old laminated chord chart to re-learn them. This is way more convenient! Would love to see this expand to scales and modes too!
pros: great interface, love it
cons: clipping as others have mentioned, but mostly, i was really hoping to hear a nice piano sound and not a synth. could you play samples from something nice like keyscape or a good kontakt library?
This is a great tool. I've seen things like this, but never with such a good UI.
It would be very cool if there was a chord-search tool that was easy to use. Something that would let you select notes on the screen, or play them via MIDI, and then the tool would give you suggestions for which chord it is.
Ok, done! Let's hope I didn't break anything because I'm in the middle of a huge refactoring job :) I really hope you will be successful with this, I love browser based music tools.
Nice! Couple of minor (haha) issues:
* The label "Rising octave" on the octave-up button doesn't make sense. Maybe you meant "Higher octave", assuming the "Lower" in the "Lower octave" button is the adjective form of "lower". If "Lower" is acting as a verb, however, then "Raise octave" would be consistent, but I don't think it sounds very natural. "Octave up" and "Octave down" might be more natural based on my recollection of music software and hardware I've used.
* As another poster noted, the (FM?) synthesizer is clipping badly when it plays chords. It's noticeable on basic 3-note triads, but it's much worse on chords with many extension tones, like a C13.
Thanks for sharing.
Thanks for the advice! I totally agree with it. "Octave up" and "Octave down" also sound more natural to me.
And nice catch! Yes, the synthesizer does have some issue in browsers other than Chrome. I'm working on that.
Thanks again! I really appreciate it!
Really good stuff!
If I can give another suggestion: I think it would be much more useful for beginners to see the common alias of the chord in the main table (maybe below the name that already exists?).
(This is wrong, see the reply below:) For example, a beginner may see "G7" in the wild and not know it's a G minor 7 (and not a G major 7). They'd have to click the chords and search the alias list. If "G7" was written below "G minor 7", it would make things much easier.
Also, I think it would look better if the names in the main table were a bit more consistent. For exmaple, you have "G major ninth" but "Gmaj13". I think it would be better to have them as "Gmaj9"/"Gmaj13" or "G major ninth"/"G major thirteenth".
Nit: G7 denotes a G dominant 7 (i.e. natural 3rd, flat 7th), not a G minor 7. G minor 7 (flat 3rd, flat 7th) is abbreviated Gm7 or G-7. (In my experience, the "Gm7" form is common in "official" printed guitar & piano songbooks, while G-7 is common in jazz lead sheets and fakebooks.)
Right, total brain fart on my part! (And I actually had never seen the "G-7" notation)
Still, I think it would be much more useful to consistently have the chord abbreviations in the main table.
I still stumble over the "-7" version sometimes. I grew up on "Gm7" :)
Example from Google image search: https://www.musikalessons.com/blog/wp-content/uploads/2017/0... . At least this one uses maj7 for major 7, rather than M7 or △7 :)
Maybe you could solve the clipping by putting a hard limiter in the signal path after the synth.
Yup on safari mobile it is just a bunch of clicks.
Sure thing! BTW I am using Chrome on Windows 10.
My favourite way of "chunking" chords (i.e how to think of them to remember them) is to "decompose" them to think about them in a different way.
For example: Think of Bbmaj7 as just Dm with Bb as the bass. Bb + Dm. It turns out that this pattern always works for the maj7 chords.
Another example: Cmaj7 "is" Em with C as the bass. Think of Cm7 as Eb with C as the bass. C7 is Edim with C as the bass.
These decompositions are just a different way to see the same chords, maybe it helps some people to form associations/connections about these shapes in some way. Of course, once played enough, a chord is simply remembered as it is, its own thing.
These are often called "upper structure triads." Great way to think of harmony.
It REALLY helps as chords get more and more complex. I write Gø next to an A7(b9#5) for example which is much more sight-readable.
For me personally it would be useful to be able to lookup chords by their middle and upper notes. Let say I improvise a lick and want to find some harmonization. F# and A should evoke not only F#m but also Dmaj and Bm7, and maybe something more spicy like D#dim7.
Another useful feature I would appreciate is to see possible functions of chords. Dmaj can be a I of D major as well as a II of C lydian. So as I lock the key, let say C Lydian, the tool might highlight other notes which are in key. That’s helpful for improvising further or when looking for a chords progression.
I’m pretty sure there are DAW plugins doing that but a simple web tool can be used in so many situations when DAW is not there.
Cool! My suggestion would be to make it more mobile friendly. I suspect any regular user will be near their piano, and using a computer or laptop there can be tricky! So I bet phones would be very common for people without a tablet.
The UI is just very small on a phone. While I understand why that may need to be the case for the actual keys, everything else should be significantly larger.
Awesome. I'm trying to pick it back up and go further, and I realized that sheet music bores me and I want to try just finding chords of songs and banging them out.
Relatedly, I ended up making a very kludgey tool (in bash, ASCII graphics) that would let me enter a few chords and would cycle through them with on the same screen-piano-keyboard (e.g. to better see the "transitions.")
I'm kind of surprised I've never seen anything like that out there done more formally?
Interesting! The idea to visualize the "transitions" sounds very useful.
Nice! The layout of the keyboard doesn't look right though: the size and position of black keys are wrong.
I realize you need wide black keys to be able to write their names on it, but still: most black keys aren't equidistant to each white key.
The only black key that's in the middle of its white keys is G#. F# is much more to the left and Bb much more to the right; same for C# (left) and Eb (right).
Not a huge problem of course, but as it is it really doesn't look like a piano.
How to derive mathematically correct piano key widths:
https://www.mathpages.com/home/kmath043.htm
good stuff! Thanks!
On ios safari hitting play just causes a clicking noise.
Thanks! Nice catach. It's just out of the oven so I didn't have chance to test on all major browsers. Will improve on browser compatibility in the future.
Awesome. Thanks!
Playback doesn't work on desktop Safari either.
<unhappy emoji>
Just fyi: if you want to have performant sound synthesis or use sample playback in browsers, you can consider this new web audio lib I made:
https://glicol.js.org/
It's a 2MB, gc-free, memory-safe, and easy-to-use npm audio lib written in Rust for browsers. Performant audio in browsers is not that easy, you need to consider the thread for example to avoid clicks during GUI interaction. I know it may not fit all you need out of the box but I am happy to improve it based on your feedback.
Thanks! I will give it a try.
Sometimes when I hit the play button for a chord, the notes don't all start at the same time. I can't figure out a pattern for when this works and when it doesn't.
This is a great reference tool. Something like this must have existed already, but I couldn't find it for the life of me.
Something as simple as wanting to play simple guitar pieces based on chords, but struggling to figure out simple bar chord patterns for each of the less common chord families, and being unable to construct them on my own since I don't know enough of the theory to do it from the ground up. Thanks!
Searching [guitar chords] brings up some like this, e.g. https://www.all-guitar-chords.com/ which is quite similar but shows fingerings too.
For piano, https://www.pianochord.org/ has been around a while I think, but doesn't seem to play the chord so you can hear it.
Totally agree. I sometime also feel struggling to construct chords in my mind. Then I realize the importance of having such tool.
I wish I had a better ear and could tell you what sounds funny to me about the piano at the top. Can anyone explain why it sounds off to me?
Taking a guess at what you're noticing but might not have a framework/vocabulary for...
It sounds like FM synthesis[0] to me (so either an embedded FM software synthesizer or simply replaying samples of FM synthesis), so the timbre is quite unlike a "real" piano or PCM samples of a real piano. Timbre is a kind of "color" of "quality" of a sound - in my head it's similar to how different materials feel different to the touch. A violin and a trumpet can play the same "note" but their sounds have very different timbres. An apple and a ball might both appear red but have different surface textures.
The "piano" in the app sounds like the piano patches (presets) on FM-based synthesizers from the 1980s[1], where the designers tried to approximate the timbre of a piano using the limited (but fun!) possibilities of FM, while the transients and harmonics produced by a real acoustic piano are more complex.
The pitches and temperament sound OK to me, so I think what you are are hearing is the timbre. That is, the app is playing the "right" notes, but it's as if you're hearing a "different instrument", albeit one that is an early digital approximation of a piano sound.
[0] https://en.wikipedia.org/wiki/Frequency_modulation_synthesis
[1] e.g. the Yamaha DX7; here's one of its "piano" sounds for comparison: https://www.youtube.com/watch?v=F3rrjQtQe5A&t=214s
Mixing sharps and flats? I chose c as root and db (d flat) is in the image...but so is f# (f sharp).
I have no problems explaining ie fb (f flat) or e# (e sharp) etc, in certain circumstances, but I'm a great believer in: don't mix the two (sharps and flats).
I think it is more a pitch thing. Playing the scale up from C, the F sounds off. Not sure why. My first guess was it was a sample just playing at different speeds and that was causing some issues.
You have a better ear than you think! I tried it again (and actually tried all the notes this time...) and the F is definitely flat. It's particularly noticeable in the 5th octave (i.e. if you play C5 D5 E5 F5), but all the F's appear to have the issue. I verified (by ear) against Pianoteq set to equal temperament.
The other notes sound OK. The A and B might be a tiny bit flat too but my ear isn't good enough, and if they're flat they're nowhere near as far off as the F. OP, how are you specifying notes/pitches to the synthesizer?
I implemented the synthesizer from scratch. Honestly I'm not super familair with digital synthesizer theory and for the implementation, mostly I referred to this article https://keithwhor.com/music/
The code of my implementation is at https://github.com/JNKKKK/pianochord.io/blob/master/src/libs...
I guess it't not a good choice to implement that part on my own, since there are many good libraries out there, like tone.js. I will probably deprecate my own synthesizer implementation and use tone.js.
Your F, defined on line 26 [0], is 3Hz off according to this reference table[1]. 346.23 should be 349.23. Just a typo?
All credit to @issa's ear. And yes, while you'd be unlikely to have encountered this bug if you were just telling a good existing synth to play an F, it's cool that you implemented the synth from scratch! Whether it's a good choice depends on the project goals.
[0] https://github.com/JNKKKK/pianochord.io/blob/master/src/libs...
[1] https://pages.mtu.edu/~suits/notefreqs.html
Ah! Nice catch!! I didn't even notice that. My expectation for this project is focusing mainly on the music theory part and visualization. So I guess using a good existing synth will make my life eaiser.
Thanks again!
ha. Full disclosure, I spent a decade as a professional musician and another decade as an audio engineer at a recording studio. I've just always had terrible pitch. Grew up completely tone deaf, but managed to train myself to hear notes eventually over the years. These days I'm very out of practice, but I could tell SOMETHING sounded funny. In case this didn't come through, the site is amazing!
Nice. Would love to see inversions as well. I struggle a lot with rootless inversions :|
Thanks! Yes, inversions will be there in the near future.
Great! I was going to suggest this also.
Cool tool! Would it be difficult to use the Unicode symbols for sharps and flats? Using a lowercase letter “B” in particular just looks clunky. Sort of like how databases store your name in all caps for no apparent reason.
Please don't push history states for the sake of it. It's natural to want to explore variations of a chord, and one shouldn't expect it to impact their ability to go back to the previous page.
This is great! It would be really useful to be able to select and deselect notes on the top piano to construct new chords based on these ones (and it could detect when you've constructed one it knows).
Showing the sheet music of the chord in the top info box would also be very helpful.
A list of similar chords links in the chord info box would be neat.
An "automatically play chord" option would make it super easy to find a chord you want by sound.
Possibly out of scope, but it would great to be able to put in a sequence of chords and see things about the transitions, e.g. notes in common.
I'd like it if the chords played on selection instead of having a separate play button. Having to move my mouse + the extra click feels like a big disruption to the flow.
This makes me so happy. I’ve been looking for a tool like this for so long. Thanks for making and sharing!
Bug report: Trying to play sounds on iOS just results in clicking noises.
Thanks for the support!!! Really happy to hear that! Yeah I will improve browser compatibility in the future.
Can't believe how useful this is. I've been working my way back in to learning piano during the pandemic and have been learning songs I like mostly through guitar chords websites and playing the right hand by ear as my sight-reading is atrocious. This will really help my progress with this method for the more complex chords.
One of my first personal projects when learning how to program was generating sheet music for scales. Maybe I'll try to adapt some of the logic here to do that, someday.
I love the spirit of this. Simple reference tools for mobile devices or tablets, maybe with the ability to print things, could be leveraged more in the world.
Share any tools if you know of them!
Hah cool! That is how I more or less discovered 'structured programming'. I had already made three tries at that and failed miserably. Then 'functions' came along and suddenly I was able to write code in the 1000's of lines and not get lost. (Before then it was all GOSUB 3300 etc.)
The BBC Micro (the machine I was working on at the time) had a version of Basic that allowed for procedures (something that doesn't return a value) and functions to be defined with a name attached. It's incredible if you think about it from a present day perspective that in that sense the original BASIC was even worse than assembler, which at least allowed you to attach a label to an address.
Love it- was just digging out my old laminated chord chart to re-learn them. This is way more convenient! Would love to see this expand to scales and modes too!
Thanks! Yeah, my next step would be adding scales and modes to it.
Every time such apps are shown on HN, I notice a lot of attention by the community. It seems a lot of hackers also play music!
There a way to attach notation with these? I got a lot of sight reading skill to catch up on and that’d help a ton.
Good idea. I will try to add that in the future.
very nice.
pay attention to the chord that has 4 tones. it seems that you simply add up the amplitude so we always get some distortion.
Nice catch. Thanks for the advice! Really appreciate it.
OK for beginners, but there are lots of nice voicings missing, also those where the root note is not played at all.
It looks like it is just out of the oven, and it's a pretty good starting point to flesh it out, the hard work has been done.
Aliases seem to be incomplete in a certain sense. E.g., Gm#5 uses the same notes as Eb major.
pros: great interface, love it cons: clipping as others have mentioned, but mostly, i was really hoping to hear a nice piano sound and not a synth. could you play samples from something nice like keyscape or a good kontakt library?
This is a great tool. I've seen things like this, but never with such a good UI.
It would be very cool if there was a chord-search tool that was easy to use. Something that would let you select notes on the screen, or play them via MIDI, and then the tool would give you suggestions for which chord it is.
Very nice! Request permission to link to it from pianojacq.com in the manual.
Sure! I'm happy to hear that.
Ok, done! Let's hope I didn't break anything because I'm in the middle of a huge refactoring job :) I really hope you will be successful with this, I love browser based music tools.
Thanks! I like the idea of pianojacq.com. Good luck on your refactoring job!
This is very cool but geting lots of clicking/artifacts on firefox
Thanks! It's just out of the oven so I didn't have chance to test on all major browsers. Will improve on browser compatibility in the future.
For me it sounds fine on Firefox on Android and Firefox on Linux.
How are you rendering the pianos images? Can you show the code for it?
The code is open sourced on Github. https://github.com/JNKKKK/pianochord.io