Create an image in PHP to show guitar chords

Question

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

Sun

If you add some semantics to the text output you can style it with CSS,too. But I don't want to stop you to use GD, it's a fine thing. – Preponderant

Answer 1

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

Projectile

Answer 2

Tony Pottier has written a beautiful class just to do this. http://www.tonypottier.info/

Edit: to solve the problem as mentioned below:

$c = new chord(array('x',13,12,11,12,'x'));
$c->setMarginRight(20);
$c->setStartingFret(10);
$c->draw();

Without the margin-right double-figured fretnumbers won't show correctly.

Isochronism

not bad but when you put: x-13-12-11-12-x it shows a blank tab – Blackwood