I been working hard for ya’ll!
I’ve always wanted to include pictures of keys in my blog posts but it’s just too hard to create them each and every time, so I resorted to just plain text…
…Until had this cool idea…
What if I could have someone build me a tool that basically generates piano images with highlighted notes on the fly? All I have to tell it is what notes I want, what color to shade them, and how big to make the image.
Well, that’s what I did! I posted it to one of my programmers and 3 weeks later, it’s a reality!
For example, to make the image above, I don’t have to open one single graphics program. I just copy and paste this code:
*Yes, I know it’s a little techy … but it’s really not that hard! I just ignore everything until I get to “first_octave.” That’s when I type the letters I want in the first octave, separated by commas. I use ‘b’ for flat and ’s’ for sharp but it comes out as the regular b and #. I do the same for the “second_octave.” Then I pick the color using the 6 digit color code of my choice. Finally, I can choose either small (1), medium (2), or big (3). You’re seeing the medium size above.
I’m excited! You guys don’t know what this will do for my music explanations! If you’ve enjoyed plain text so far (which a lot of you have), then imagine having images too!
The reason I’m telling you all these details about how it works is because YOU can use it too! If you have a blog or you’re ever trying to explain something to someone else via e-mail or on a forum, just come to this page, copy my code, change it, and paste it wherever you want! You’ll be good to go! I’m working on a little wizard that will make it easy for anyone to do.
For now, I’ll be the first one to use my little “dynamic piano key” invention!
Here are some cool chords I’ve made with the tool:
F aug 7 (b9)
Here’s the code I used to make it:
Here’s one of those “stupid” (that’s good) Jason White / Mike Bereal-sounding chords…
And the code I used…
Here’s the small version…
Look out for these images in future blog posts. I may even go back to the drawing board and make it 3 or 4 octaves. We’ll see!
Copy this code and change it to the notes you want (use small “b” for flat and “s” for sharp… see sample below):
Ab = Ab
G# = Gs (Use s instead of #)
*Be careful with octaves. It tricked me a few times, too! Sometimes, you won’t realize that one of the notes should be in the first octave rather than the second. Then it shows up way at the end and you’re like, “huh?” So make sure you put the right notes in the correct octave.
Until next time—
Popularity: 15% [?]
Welcome back! It looks like you're a regular! Thanks for your support and keep coming! (Getting updates yet?)
Related posts:
- You can now view this blog on any mobile phone!
- The secret tools used by Michael Bereal, Jason White, and other top musicians
- Question: What does all this “flatted 3″ and “sharped 5″ stuff mean?
- Here’s a quick and easy refresher on tertian chords
- Major Scales Workshop #1
- Chord alterations, “add X,” half diminished 7 chords, and more…
- Here’s a way to multiply your chordal vocabulary… OVERNIGHT!












November 4th, 2008 (comment#1)
Rootless chord… Bb would be on bass though…
Who’s next! Come on! make me feel good! use my tool :) lol
November 4th, 2008 (comment#2)
Jermaine, ok ok ok! I will use your tool to make you feel good.
But on a serious note, ever since you starte dthis blog a few months ago, you have changed my desire for music. I thank God for your sincerity. I can tell that you don’t do this for money or because its a business. I know it is. But every time I see you and i watch your videos, I see that you are happy doing this. Even your post above carries so much energy. I can feel it. Just keep up the good work. Don’t be discouraged. Youre helping so many people.
Here’s one of my favorite chords. Leanred it from gospelkeys 202
November 4th, 2008 (comment#3)
I’m like missie! great work.
I dont know if i’ll do this right but let’s see
November 4th, 2008 (comment#4)
let’s progressionate…could be a word someday
![]()
NOW THAT’S THE BUSINESS…I LIKE, I LIKE
November 4th, 2008 (comment#5)
let’s progressionate…could be a word someday
![]()
NOW THAT’S THE BUSINESS…I LIKE, I LIKE…I REALLY, REALLY LIKE!!!
November 4th, 2008 (comment#6)
OK ,JG….IT’LL BE PERFECT LATER, I’M ON THE CHURCH’S COMPUTER…I BELIEVE THE ONE AT HOME WILL GET IT POPPIN’…BUT IT’S A NEW LEVEL OF LEARNING
November 4th, 2008 (comment#7)
November 4th, 2008 (comment#8)
@Bryan: Try it when you get home. Should work!
November 4th, 2008 (comment#9)
Actually my programmer just fixed a small temporary bug. It should work anywhere now.
November 4th, 2008 (comment#10)
HEADED OUT

LAST CHORD APPREGGIO
November 4th, 2008 (comment#11)
OUT TO VOTE
November 4th, 2008 (comment#12)
Dmin 9
November 4th, 2008 (comment#13)
This is cool cool cool!!!
November 4th, 2008 (comment#14)
November 4th, 2008 (comment#15)
Make sure if my example has an “s” in it, to remove it, because s creates a sharp.
November 4th, 2008 (comment#16)
November 4th, 2008 (comment#17)
November 4th, 2008 (comment#18)
D7 Root Position
November 4th, 2008 (comment#19)
mess that one up really bad. Good tools though. Looking at the election Gotta go!
November 4th, 2008 (comment#20)
@Chawk! Lol! You were the main person saying to do the radio show and now you’re leaving us on the blog to go watch the election! Well, i gotta go cuz I’m going to go watch it too! :-)
November 4th, 2008 (comment#21)
Trumusic, those are hot!
November 4th, 2008 (comment#22)
trying to do a G7 that leads/ends on a C root position
November 5th, 2008 (comment#23)
Ok,let’s see if this makes a D quartal chord with an E bass…lol
November 5th, 2008 (comment#24)
No…it ran out of space for the top C,and put it too low
November 5th, 2008 (comment#25)
@JG, WELL, I LEARNED FROM THE BEST!!1 THANKS TEACH, THIS IS AN OUTSTANDING TOOL.
KEEP SEARCHING THAT BRILLIANT MIND OF YOURS AND YOU JUST MAY FIND THE CHORD PROGRESSION THAT CURES CANCER…LOL…
November 5th, 2008 (comment#26)
November 6th, 2008 (comment#27)
[IMG=http://pix.myphotoalbum.com/a/al/alb/albu/album/album2/albums/album22/interval_chart.sized.png][/IMG]
1 semitone = Augmented Prime (Enharmonically equal to Db)***Described in Numbers = 1 to sharp 1***

1 semitone = Minor 2nd (Enharmonically equal to C#) ***Described in Numbers = 1 to flat 2***

2 semitones = Major 2nd ***Described in Numbers = 1 to 2***

3 semitones = Augmented 2nd (Enharmonically equal to Eb)***Described in Numbers = 1 to sharp 2***

3 semitones = Minor 3rd (Enharmonically equal to D#) ***Described in Numbers = 1 to flat 3***

4 semitones = Major 3rd ***Described in Numbers = 1 to 3***

5 semitones = Perfect 4th ***Described in Numbers = 1 to 4***

6 semitones = Augmented 4th (Enharmonically equal to Gb)***Described in Numbers = 1 to sharp 4***

6 semitones = Diminished 5th (Enharmonically equal to F#)***Described in Numbers = 1 to flat 5***

7 semitones = Perfect 5th ***Described in Numbers = 1 to 5***

8 semitones = Augmented 5th (Enharmonically equal to Ab)***Described in Numbers = 1 to sharp 5***

8 semitones = Minor 6th (Enharmonically equal to G#) ***Described in Numbers = 1 to flat 6***

9 semitones = Major 6th ***Described in Numbers = 1 to 6***

10 semitones = Augmented 6th (Enharmonically equal to Bb)***Described in Numbers = 1 to sharp 6***

10 semitones = Minor 7th (Enharmonically equal to A#) ***Described in Numbers = 1 to flat 7***

11 semitones = Major 7th ***Described in Numbers = 1 to 7***

12 semitones = Octave ***Described in Numbers = 1 to 8***

November 10th, 2008 (comment#28)
Let’s see if this D7 root position will work this time
November 10th, 2008 (comment#29)
D7 root position
November 10th, 2008 (comment#30)
Ab minor 7th
November 10th, 2008 (comment#31)
Ab minor 7th chord
November 12th, 2008 (comment#32)
Can you list the 6 codes for the different colors that are available? Can you mix colors? One octave one color, one octave/chord another color?
November 12th, 2008 (comment#33)
@Katie: Actually the colors are limitless. You can either type “html color codes” in google or visit a site like this: http://html-color-codes.info/
You pick your color (there are literally hundreds and thousands). Just make sure it’s a 6digit code because there are other ways graphic artists refer to colors but we want the 6digit form. Oh yeah, and don’t include the # sign, just the 6 digits. Replace those in my code above and you’ll be good to go!
By the way, I’m working on an easy “template wizard” so you won’t even have to do that in the future. It will just have a simple color picker built in. Until then, have fun with the code above!
April 2nd, 2009 (comment#34)
I thank God for you at Hear and Play Music Company because of all the cool little goodies he has allowed you to make availible to the public. Some of this stuff I never would have even heard of until God allowed our path to cross. It’s a match made in the mind of the teacher and the student with endless possiblity of loops, connection, new avenues, curves, twists and turns. I am always looking forward to whats gonna happen next when I recieve e-mail from you for man, exciting just want do you justice!!!!
April 2nd, 2009 (comment#35)
July 12th, 2009 (comment#36)
vrotmnenogi