Show HN: A piano chord reference tool
pianochord.io
pianochord.io
* 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.
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!
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".
Still, I think it would be much more useful to consistently have the chord abbreviations in the main table.
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 :)
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.
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.
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.
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?
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.
<unhappy emoji>
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.
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!
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.
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).
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
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?
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.
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...
Thanks again!
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.
Bug report: Trying to play sounds on iOS just results in clicking noises.
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!
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.
pay attention to the chord that has 4 tones. it seems that you simply add up the amplitude so we always get some distortion.
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.