I have a site that shows guitar chords/tabs in text format. Here's what I am currently displaying:
Em:
| | | | | |
| | | | | |
| 2 2 | | |
| | | | | |
| | | | | |
I learn that GD can create a dynamic image for this. But I am new at PHP and I have no idea what to do.
Is it simple to create such thing in PHP to display an image?
Thanks
First download the arial font and get this image (save as guitar.jpg):
and put them in the same folder as this script (for example chords.php):
<?php
function showChord($chord) {
$imgfile = "./guitar.jpg";
$text = ".";
$font = './arial.ttf';
$im = imagecreatefromjpeg($imgfile);
$x = imagesx($im);
$y = imagesy($im);
$fontsize = 100;
$white = imagecolorallocate($im, 0, 0, 0);
$chords = explode('-', $chord);
// chords[0] = e1 and chords[5] = e6
$minimum = min($chords);
imagettftext($im, 15, 0, 1, 32, $white, $font, $minimum);
$add = 0;
if($minimum > 0) {
$add = 30;
}
// chords positions
$interval1 = ($chords[0] != 0 ? (25 + $add + (intval($chords[0]) - $minimum) * 30) : 0);
$interval2 = ($chords[1] != 0 ? (25 + $add + (intval($chords[1]) - $minimum) * 30) : 0);
$interval3 = ($chords[2] != 0 ? (25 + $add + (intval($chords[2]) - $minimum) * 30) : 0);
$interval4 = ($chords[3] != 0 ? (25 + $add + (intval($chords[3]) - $minimum) * 30) : 0);
$interval5 = ($chords[4] != 0 ? (25 + $add + (intval($chords[4]) - $minimum) * 30) : 0);
$interval6 = ($chords[5] != 0 ? (25 + $add + (intval($chords[5]) - $minimum) * 30) : 0);
// write to the image
imagettftext($im, $fontsize, 0, 01, $interval1, $white, $font, $text);
imagettftext($im, $fontsize, 0, 18, $interval2, $white, $font, $text);
imagettftext($im, $fontsize, 0, 36, $interval3, $white, $font, $text);
imagettftext($im, $fontsize, 0, 53, $interval4, $white, $font, $text);
imagettftext($im, $fontsize, 0, 70, $interval5, $white, $font, $text);
imagettftext($im, $fontsize, 0, 86, $interval6, $white, $font, $text);
header("Content-type: image/jpeg");
imagejpeg($im);
ImageDestroy($im);
}
# $chord = '0-2-2-0-0-0'; //Em
$chord = '2-4-4-3-2-2'; //F#
showChord($chord);
This will ouput something like for F#. The 2 on the top left means the second fret:
**note: I would also save the image to the disk so you don't have to regenerate the same tab over and over.*