Click here to Skip to main content
13,899,346 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


9 bookmarked
Posted 26 Jul 2010
Licenced CC (ASA 3U)

Draw Guitar Chords using PHP

, 26 Jul 2010
Rate this:
Please Sign up or sign in to vote.
PHP class to draw guitar chords


This is a PHP class which can draw guitar chords, or any other string instruments for that matter.

It makes heavy use of the GD2 image library to build good looking chord diagrams in very few lines of code.


Being an ukulele player myself (and bad guitar player also); I've visited tons of websites that were displaying guitar chords like "x23240" or without any description of the chord at all.

With the help of a few lines of PHP; I thought I could develop a highly customizable class to display those chords.

Using the Code

The class is named "chord" an can be used very easily with few lines of codes. The code:

$c = new chord(array('x',3,2,0,1,0));

It will output a PNG file like this one:

Points of Interest

The main point of interest is that the class is highly customizable. With a few more function calls you can set a title, margins, font sizes, custom colors and a custom background picture among other things.

Support for barre chords was also added. For instance, the following chord...

...was obtained by using:

$c = new chord(array('x','x',0,0,0,8));

I wanted this class to work out of the box on any PHP5 setup, but in the meantime let users go more in depth with the class if they wished.

For instance, one interesting mechanism is the font. As you may be aware, GD2 with PHP has 5 built in fonts represented by numbers ranging from 1 to 5. They are rather ugly pixel fonts but they do work out of the box. In order to support both built in fonts and custom TTF fonts, people would upload on their webserver; there is some small logic in the setFontxxx methods:

function setFontTitle($v)
		//1 to 5 is the correct range for built in fonts
		if($v >= 1 && $v <= 5)
			$this->fontTitle = $v;
			throw new Exception('Built in font must be in 1 to 5 range');
	else if(is_string($v))
		$this->fontTitle = $v;
		throw new Exception
		('Use a TTF file or a number representing a built in font');
} ?> 

With this logic, you can either do $c->setFontTitle('arial.ttf'); or $c->setFontTitle(5);. Then, when it comes to drawing; the class calls "imagestring" or "imagettftext" which are PHP functions to draw text using built in fonts or TTF fonts respectively.

The rest of the interesting logic is located in the draw() method of the class. A lot of logic has been added to support any size of chord. By default, the PNG picture will be 90x120 but as the user can set any size; the final result had to be consistent.

As such, the size of the circle representing a string to be fretted is proportional to the fret spacing size. As such; if fancy values are used, the chord will react accordingly:

It is the responsibility of the user to tune the settings as he wishes.

Code-wise, this creates a lot of computations prior to drawing anything.

Namely, we need to:

  1. Count the number of strings
  2. Compute real width space available for drawing (without margin)
  3. Deduce space in pixels between each string
  4. Compute the size of upper symbols "o" or "x"
  5. Deduce total top margin
  6. If there is a title, compute the size of the text in pixel and add it to the total top margin
  7. Deduce real height space available for drawing (without margin)
  8. Compute the size in pixels between each fret
$nbStrings = count($this->data);
$realWidth = $this->width - $this->margin['left'] - $this->margin['right'];
$stringSpacing = ($realWidth / ($nbStrings-1));
$upperSymbolSize =  intval(round($stringSpacing *
	$this->upperSymbolSize));	//space needed to draw the "o" or "x"
$totalTopMargin = $this->margin['top'] + $upperSymbolSize;
$titleMargin = 0;
//if there's a title, compute additional top margin induced
		$titleMargin = imagefontheight($this->fontTitle);
		$box = imagettfbboxextended($this->fontTitleSize,
				0, $this->fontTitle, $this->title);
		$titleMargin = $box['height'];
$totalTopMargin += $titleMargin;
$realHeight = $this->height - $totalTopMargin - $this->margin['bottom'];
$fretsSpacing = $realHeight / ($this->maxFrets);

When we have all those values, the rest of the code is a piece of cake: draw a grid; draw the stuff where they need to be and this is it!


  • 2010-07-25: First release


This article, along with any associated source code and files, is licensed under The Creative Commons Attribution-Share Alike 3.0 Unported License


About the Author

Tony Pottier
Systems Engineer
France France
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Mateus Cabral16-Jul-13 2:14
memberMateus Cabral16-Jul-13 2:14 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey23-Feb-12 18:58
professionalManoj Kumar Choubey23-Feb-12 18:58 
GeneralMy vote of 5 Pin
Herman_6-Aug-11 4:52
memberHerman_6-Aug-11 4:52 
GeneralPHP Chord error message Pin
Member 77256204-Mar-11 2:00
memberMember 77256204-Mar-11 2:00 
QuestionDo you know where to find chord definitions? Pin
Ed Bouras3-Aug-10 2:01
memberEd Bouras3-Aug-10 2:01 
AnswerRe: Do you know where to find chord definitions? Pin
Tony Pottier3-Aug-10 4:36
memberTony Pottier3-Aug-10 4:36 
GeneralRe: Do you know where to find chord definitions? Pin
Ed Bouras3-Aug-10 9:20
memberEd Bouras3-Aug-10 9:20 
GeneralMusic notes Pin
Jose Menendez Póo26-Jul-10 4:24
memberJose Menendez Póo26-Jul-10 4:24 
GeneralRe: Music notes Pin
Tony Pottier26-Jul-10 5:20
memberTony Pottier26-Jul-10 5:20 
GeneralRe: Music notes Pin
Lee Hiles31-Jul-10 19:51
memberLee Hiles31-Jul-10 19:51 
GeneralNot enough for an article Pin
Md. Marufuzzaman25-Jul-10 7:34
mentorMd. Marufuzzaman25-Jul-10 7:34 
GeneralRe: Not enough for an article Pin
Tony Pottier25-Jul-10 7:45
memberTony Pottier25-Jul-10 7:45 
GeneralRe: Not enough for an article Pin
Dave Kreskowiak25-Jul-10 8:10
mveDave Kreskowiak25-Jul-10 8:10 
GeneralRe: Not enough for an article Pin
Tony Pottier25-Jul-10 8:50
memberTony Pottier25-Jul-10 8:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.190306.1 | Last Updated 26 Jul 2010
Article Copyright 2010 by Tony Pottier
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid