10 ms·
Interactive piano reference to major and minor scales
- deleted 5y ago[deleted]
- hilbert42 5y agoWow, what a wonderful site, I wish I'd had this when I was trying to learn those cursed Czerny scales. The site is remarkably comprehensive - circle of fifths and everything needed to both practice and understand the theory. Moreover, the site has a quirky design that's both cleaver and cute. Top marks.
- robbrown451 5y agoThis is amazing. Beautiful design (both in light and dark mode) and very educational regarding music theory. And a lot to it (if you click beyond the linked page).
- martyvis 5y agoIndeed. This page allows one to experimentally create music that actually sounds musical! https://muted.io/chords-in-keys/ https://muted.io/chords-in-keys/
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- adamnemecek 5y agoI’ve been working on an IDE for music composition https://ngrid.io https://ngrid.io. Launching soon.
- bambax 5y agoSounds very interesting! Tell us more.
- tartoran 5y agoThis sounds very interesting and i dig the working on multiple works process. Hope you have a show HN soon.
- csk111165 5y agoThat is amazing, will it allow some programming language to put the chords in the song, I was just bit curious about it. Thanks
- themodelplumber 5y agoAwesome, I love the design and what a helpful resource. Also the first scale I randomly picked matched perfectly with the song I had playing on my phone. Lol
- yesenadam 5y agoFirst thing I clicked on was C minor... which showed me "C minor scale". Problem is.. Is that a thing? I've not heard of "the C minor scale". I don't think it's a thing. (Jazz pianist here) In classical piano as a kid I was taught 2 minor scales - melodic (different going up to coming down) and harmonic. Your "minor scale" corresponds to the melodic minor descending, aka Aeolian mode. (i.e. white piano notes from A up to A) [googles it] On the "minor scale" wiki page they mention those three scales - "In music theory, the term minor scale refers to three scale patterns". There is no one "minor scale", that I'm aware of. Well, maybe you were taught that way, I don't know. Dorian mode (i.e. white piano notes from D up to D) is another commonly used minor scale; there are others. https://en.wikipedia.org/wiki/Minor_scale https://en.wikipedia.org/wiki/Minor_scale
- arnarbi 5y agoThe text at the top specifies it's the natural minor (Aeolian)
- aczerepinski 5y agoI think with no modifiers or disclaimers, minor means “natural minor” or aeolian. A few years ago I made a similar site with many more scales and modes than this one: http://www.dbmaj7.com/resources/piano http://www.dbmaj7.com/resources/piano
- cruelty2 5y ago
- noslenwerdna 5y agoThey are using the natural minor.
- yesenadam 5y agoI don't remember ever hearing that term before, but you say it like there's no doubt I'll know what it means. I'm curious - in what tradition did you learn to call it that? (Probably I'm very out of touch)
- prvc 5y agoI think this makes a simple topic needlessly complex. Only the mnemonic "Father Charles Goes Down And Ends Battle" might be worth memorizing, and the rest follows easily. Even that can be replaced by "just go up by fifths starting with F".
- zozbot234 5y agoWell, you need a few tricks to fully internalize the diatonic scales from that mnemonic. Such as the fact that the circle of fifths also determines the type of sharps or flats found in the matching key signature, and that the last-added "sharp" in the key signature pertains to the leading tone in major (G major has an F#, and so on) or the second scale degree in minor. Conversely, the last-added flat in a key signature pertains to the fourth scale degree in the major mode, and the next-last (if any) to the tonic.
- robbrown451 5y agoStrange comment. The site is interactive and allows you to explore a whole lot of music theory. A mnemonic, uhhh... doesn't.
- zozbot234 5y agoThe point is that, if you know the mnemonic (and the surrounding tricks), you can do the exact same exploring by noodling at the keyboard (or the fretboard, for that matter) and be sure to get it right. From there, it's easy to explore other parts of music theory, or to develop one's musical audiation skills.
- robbrown451 5y agoIf that works for you, ok. I have my keyboard connected to my computer, so I am actually at my keyboard as I use the site. Its still nice that I can click around quickly and hear different chords and scales and such, without having to be held back by my limited piano skills. Could it be improved if it supported web midi and encouraged you to actually use your keyboard? Maybe. (I actually do web apps that do that) But I'm curious why you can't see its value for what it is, which guides learning rather than just basically saying "figure it out on your own."
- axydlbaaxr 5y agoReally great resource! I've been using chordhouse for years, but this is soooo much better! Good work!
- klodolph 5y agoThe black keys are in the wrong place! The black keys within a group are supposed to be spaced farther apart, and there should be less space between groups. For example, C# and D#, in the diagram, are too close to each other. C# should be farther left, and D# should be farther right.
- yesenadam 5y agoHmm I don't agree. That spacing looks right to me, but, now you mention it, the E,F,B and C notes look quite a bit too wide, I think that's the problem.
- JellyBeanThief 5y agohttps://www.shutterstock.com/image-vector/realistic-piano-keys-musical-instrument-keyboard-1727346568 https://www.shutterstock.com/image-vector/realistic-piano-ke... shows a more correct image.
- klodolph 5y agoThe spacing of the black keys is so far from the actual spacing on a real keyboard that I question how it could possibly look right to you. I would love to know if you actually have a real physical keyboard on hand, like I do, or if you are just going based on memory.
- robbrown451 5y agoYou should check out google images for piano key clip art. Almost all of them get it wrong. They assume a black key is centered between two white keys, but that is only true for g#. The width of all keys, white or black, should be equal to one another at the back of the keyboard. The width of the white keys should be exactly equal to one another at the front of the keyboard. Those can't both be true (since 5/12 isn't equal to 3/7), so the former has to be fudged a bit. My formula is in a different comment. :)
- userbinator 5y ago
- krat0sprakhar 5y agoI play the guitar and I've been relying on guitarscale.org for the same information. But this site has a much better UX! Thanks for making this!
- osteele 5y agoThis looks really nice. Here's something I wrote when I starting learning music theory. It ended up sort of cluttered; I like yours better. But please feel free to take any ideas from it that you think might be useful. https://osteele.github.io/fingerboard/ https://osteele.github.io/fingerboard/
- robbrown451 5y agoThis is cool. See my comment about how to calculate the piano key geometry (or just paste in my numbers) if you want your piano diagram to have correct placement of the keys (black keys shouldn't bisect the two adjacent white keys.... it makes the white key "stems" really narrow between black keys and looks weird).
- avodonosov 5y agoWhat javascript apis they use to create sites like that? To play instrument notes at different pitches, and to play notes simultaneously?
- hiptobecubic 5y agoWithout looking too deeply into it, I assume it's MIDI and using some JS implementation of a MIDI engine / soundfont to play. https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_AP...
- donbrae 5y agoLooks like it’s using Tone.js[0] with a sample library called ‘Salamander Grand Piano V3’[1]. Tone.js is great. I’m using it to convert MIDI files and sync visuals on a jazz piano tutorial website I’m building[2]. [0] https://tonejs.github.io https://tonejs.github.io [1] https://archive.org/details/SalamanderGrandPianoV3 https://archive.org/details/SalamanderGrandPianoV3 [2] https://www.jazzkeys.fyi https://www.jazzkeys.fyi
- pomian 5y agoThis is so cool! It finally helps explain all those weird piano keys when playing music notes; Like diminished. Melody on right hand, But left hand - shows c7dim Or something. If you are not a music major, this helps, so much!
- schemathings 5y agoVery cool - I think a nice addition would be to add some common chord progressions, e.g. https://takelessons.com/blog/piano-chord-progressions-z06 https://takelessons.com/blog/piano-chord-progressions-z06 as an option at in each scale section. Would help people learning to do transpositions if you persist that option - also an option to invert the chords.
- noduerme 5y agoNifty. The mouseup for the buttons should be placed on the body at the time the mousedown is triggered, because right now if you drag outside the button to highlight a set of keys and release the mouse on the background, the keys stay lit and only light/unlight when other buttons are clicked. (Alternative would be, at least, clear all the key highlights when any button is clicked).
- koide 5y agoI've always been a melodic instrument player and have never had formal theory training - I'm trying to play the piano and I can't figure out how to harmonize (is this the right term?) a melody, this is, how to find or decide which chords go naturally with a specific melodic line. I know there are many alternatives and that the music sheets usually have the matching chords. I want to write my own and I struggle to find proper chords to melodic lines. Can anyone recommend resources to learn this (and tell me if harmonization is the proper term)?
- interpenetrate 5y agoI can't recommend any particular resources, but yes it's called harmonization and I'm sure you can get started by searching "how to harmonize a melody." YouTube has a billion videos on this sort of thing. You may also find it fun to play around with reharmonization, which is where you take an existing tune and find a new harmonization to match its melody.
- malingo 5y agoHarmonization is the proper term. For a simple set of harmonization rules, check out https://en.m.wikipedia.org/wiki/Four-part_harmony https://en.m.wikipedia.org/wiki/Four-part_harmony Old hymnals are a wealth of examples. Take a listen to this guy's YouTube channel: https://m.youtube.com/channel/UC6BRCej5GRFLlovfZrNswqw https://m.youtube.com/channel/UC6BRCej5GRFLlovfZrNswqw
- asimpletune 5y agoWell you’re in luck because I am going to tell you. 1. Identify what key you’re in (I.e what scale you want to use to build the harmonies from) 2. Start with the note you’re looking to harmonize, and play that note and every other note from the scale in step 1. 3. Do some final touch up work: eg the chord you made in step 2, should probably be inverted to space the notes out more eg playing a chord for “every” note in your melody will be too much. So choose the chords that work best over all, but you can always add chords back in as passing chords eg once you’ve plaid the first three notes of the harmonization (root, third, fifth) you can be more liberal with the next notes and leave the pattern I described. So for example you can flatten/sharpen the next note in the sequence, or even play an entirely different note. Having the first 3 notes will ground the chord strong enough harmonically to let you do whatever you want with the rest and still retain the character of the chord. This helps you create more interesting and tense sounds and also let’s you harmonize notes in less traditional ways than before. I typed this on my phone but I hope that helps. Last thing is just try harmonization of the c major scale. It will sound like you’re playing the scale with “chords”. Then try harmonizing Mary had a little lamb and so on. You can basically play anything by ear once you get a hang of this.
- ulnarkressty 5y agoYou might want to double check the fingerings, for example[0] the F major scale has Bb played with 4th finger, because it would be impossible with the 1st. [0] https://en.piano-fingering.org/flat-keys/1-flat-f-major/f-major-scale-2-octaves-right-hand/ https://en.piano-fingering.org/flat-keys/1-flat-f-major/f-ma...
- hamburglar 5y agoJust as a bit of UX feedback, it's difficult to read this method of specifying the fingering. You display a finger-to-note lookup when you really want a note-to-finger lookup. It would be more useful to specify e.g. "left hand: 1 2 3 4 5 1 2 3" and "right hand: 1 2 3 1 2 3 4 5" for learning purposes. Edit: most awesome would actually be an animation of the hand playing the scale with cross-unders and whatnot but that sounds like a lot of work.
- Kye 5y agoSuggestion: show chords commonly borrowed from the relative scale.
- soyyo 5y agoA superior method for working with scales it's simply learning the theory behind them. For instance if you learn that a harmonic minor scale is made of 1 2 3b 4 5 6b 7 you can find the notes of that scale in any key very quickly, for instance Bb harmonic minor would be Bb C Db Eb F Gb A However this requires that you understand what are 1, 2, 3b 4, 4#, etc, and have enough practice in translating it to notes to do it quickly. Also if you learn this, then finding the chords that can be derived from any scale becomes super easy. Now I understand that this a hustle for many people because of the initial effort that requires before is actually usable, and it's more easy to use tools such as the one presented, I just wanted you to know that there is something better albeit harder.
- Kye 5y agoI think it comes down to what motivates your music, and what you prioritize. My focus is sound design, so the quicker I can get melodies written, the better. Now you might reasonably think: "but if you memorize all this stuff, you won't need your handy app with an interactive circle of fifths!"[0] And that's true! The trouble is, the last time I tried learning using techniques like this, I could never remember it with any amount of practice, and it made me so down about music that I quit for years. If I cared much about melodies, improvising, and/or performance, I might have the drive to invest effort past that hurdle, but I don't. I did have the drive for sound design--which is at least as complicated as foundational western music theory--because the whole thing fascinates me, so that's what I prioritize. [0] Piano Companion Pro. Worth the lifetime purchase ($12). https://www.songtive.com/products/piano-companion https://www.songtive.com/products/piano-companion I come up with chord progressions in my DAW and use them as "ghost notes" to paint a melody over.
- zozbot234 5y ago> For instance if you learn that a harmonic minor scale is made of 1 2 3b 4 5 6b 7 you can find the notes of that scale in any key very quickly, for instance Bb harmonic minor would be Bb C Db Eb F Gb A It's even easier in many cases to learn harmonic minor as a natural minor w/ a sharpened 7th, borrowed from the parallel major scale. (This doesn't work so well for Bb minor, since its relative major is a pretty exotic Db major; in this case, it's in fact easier to start from the parallel major and find the actual scale degrees.)