phpimageguitarmusic-notation

Create an image in PHP to show guitar chords


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


Solution

  • First download the arial font and get this image (save as guitar.jpg):

    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:

    enter image description here

    **note: I would also save the image to the disk so you don't have to regenerate the same tab over and over.*