11 ms·
Show HN: A piano chord reference tool
- S_A_P 4y agoLove 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!
- jnkkkk 4y agoThanks! Yeah, my next step would be adding scales and modes to it.
- Apfel 4y agoCan'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.
- chaosprint 4y agovery 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.
- jnkkkk 4y agoNice catch. Thanks for the advice! Really appreciate it.
- jrm4 4y agoAwesome. 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?
- jnkkkk 4y agoInteresting! The idea to visualize the "transitions" sounds very useful.
- issa 4y agoI 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?
- InCityDreams 4y agoMixing 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).
- moosedev 4y agoTaking 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 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 https://www.youtube.com/watch?v=F3rrjQtQe5A&t=214s
- issa 4y agoI 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.
- kampsduac 4y agoOne 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!
- jacquesm 4y agoHah 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.
- randyrand 4y agoHow are you rendering the pianos images? Can you show the code for it?
- jnkkkk 4y agoThe code is open sourced on Github. https://github.com/JNKKKK/pianochord.io https://github.com/JNKKKK/pianochord.io
- marvin 4y agoThis 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!
- jnkkkk 4y agoTotally agree. I sometime also feel struggling to construct chords in my mind. Then I realize the importance of having such tool.
- mkl 4y agoSearching [guitar chords] brings up some like this, e.g. https://www.all-guitar-chords.com/ https://www.all-guitar-chords.com/ which is quite similar but shows fingerings too. For piano, https://www.pianochord.org/ https://www.pianochord.org/ has been around a while I think, but doesn't seem to play the chord so you can hear it.
- Stenzel 4y agoOK for beginners, but there are lots of nice voicings missing, also those where the root note is not played at all.
- jacquesm 4y agoIt 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.
- jacquesm 4y agoVery nice! Request permission to link to it from pianojacq.com in the manual.
- jnkkkk 4y agoSure! I'm happy to hear that.
- leetrout 4y agoOn ios safari hitting play just causes a clicking noise.
- NonNefarious 4y agoPlayback doesn't work on desktop Safari either. <unhappy emoji>
- jnkkkk 4y agoThanks! 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.
- leetrout 4y agoAwesome. Thanks!
- someweirdperson 4y agoAliases seem to be incomplete in a certain sense. E.g., Gm#5 uses the same notes as Eb major.
- boredemployee 4y agoNice. Would love to see inversions as well. I struggle a lot with rootless inversions :|
- poisonarena 4y agoThis is very cool but geting lots of clicking/artifacts on firefox
- moosedev 4y agoNice! 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.
- jnkkkk 4y agoThanks 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!
- moosedev 4y agoSure thing! BTW I am using Chrome on Windows 10.
- moefh 4y agoReally 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".
- moosedev 4y agoNit: 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.)
- josephcsible 4y agoSometimes 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.
- behnamoh 4y agoEvery 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!
- mkl 4y agoThis 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.
- kzrdude 4y agoMy 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.
- tritones 4y agoIt 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.
- ComplexSystems 4y agoThese are often called "upper structure triads." Great way to think of harmony.
- bambax 4y agoNice! 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.
- thewebcount 4y agoCool 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.
- noahtallen 4y agoCool! 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.
- elevaet 4y agoThis 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.
- vegasje 4y agoPlease 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.
- locusofself 4y agopros: 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?
- chaosprint 4y agoJust 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/ 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.
- jnkkkk 4y agoThanks! I will give it a try.
- DecoPerson 4y agoThis 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.
- jnkkkk 4y agoThanks for the support!!! Really happy to hear that! Yeah I will improve browser compatibility in the future.
- srg0 4y agoFor 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.
- sdwr 4y agoI'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.
- Madmallard 4y agoThere 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.
- jnkkkk 4y agoGood idea. I will try to add that in the future.