• Cool new enhancement to the blog

    in Technology

    Update: We’ve made a convenient tool that no longer requires using the codes below. Click here to check out the tool that creates piano chord diagrams FOR YOU.

    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!

    Exercise: Use my code to create any chord of your choice that you want to share with other hearandplay readers! It’ll be a little weird because you can’t preview, but that’s alright! If you mess up, just make another post… we won’t mind! Come on! Scroll down and do it now!”

    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—

    The following two tabs change content below.
    Hi, I'm Jermaine Griggs, founder of this site. We teach people how to express themselves through the language of music. Just as you talk and listen freely, music can be enjoyed and played in the same way... if you know the rules of the "language!" I started this site at 17 years old in August 2000 and more than a decade later, we've helped literally millions of musicians along the way. Enjoy!




    Comments on this entry are closed.

    Previous post:

    Next post: