Cool new enhancement to the blog

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:

<img src='http://www.hearandplaymusic.com/dynamicimage/pianokeys.php?first_octave=C,E,Gs,G&second_octave=C,E,Ab,G&color=99CCFF&size=2' />

*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:

<img src='http://www.hearandplaymusic.com/dynamicimage/pianokeys.php?first_octave=F,A&second_octave=Cs,Eb,Gb&color=99CCFF&size=2' /><br />

Here’s one of those “stupid” (that’s good) Jason White / Mike Bereal-sounding chords…

And the code I used…

<img src='http://www.hearandplaymusic.com/dynamicimage/pianokeys.php?first_octave=F,Ab,B&second_octave=D,E,G&color=CCFF99&size=2' />

Here’s the small version…

<img src='http://www.hearandplaymusic.com/dynamicimage/pianokeys.php?first_octave=F,Ab,B&second_octave=D,E,G&color=CCFF99&size=1' />

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 #)

<img src='http://www.hearandplaymusic.com/dynamicimage/pianokeys.php?first_octave=C,E,Gs&second_octave=C,Bb&color=CCFF99&size=1' />

*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—

Related posts:

1. Cool Piano Chord Tool
2. You can now view this blog on any mobile phone!
3. Guitar Training Course 102: How To Play A Cool Voicing

Tagged as: dynamic piano key display, new tool, Technology