JPlayer - Help replacing image filename with mp3 filename using JS

Question

I'm trying to use the following code to play a song in JPlayer using the Getsong.php, that plays fine, the problem I'm having is with the song image(or album photo), I need to check a directory to see if that image file exists, and if it does, show it, otherwise show the "no_img_file.jpg file. I do this by checking the domain path / user_id folder / and the song_filename .jpg

But I can't get it to work. Please HELP

$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
    ready: function () {
        var data = $.ajax({
          url: "getsong.php",
          async: false
         }).responseText;

        var string = data.split('|');
        $(this).jPlayer("setMedia", {
            mp3: string[0]
        }).jPlayer("play");


        $('ol#artist').html(string[1]);
        $('ol#songname').html(string[2]);
        $('ol#filename').html(string[3]);

    },
    ended: function (event) {  
        var data = $.ajax({
          url: "getsong.php",
          async: false
         }).responseText;

        var string = data.split('|');
        $(this).jPlayer("setMedia", {
            mp3: string[0]
        }).jPlayer("play");


        $('ol#artist').html(string[1]);
        $('ol#songname').html(string[2]);
        $('ol#filename').html(string[3]);

    },
    swfPath: "js",
    supplied: "mp3"

});
});

/////////////////////////////


function checkImage(src) {
  var img = new Image();
  img.onload = function() {
  // code to set the src on success
      $('#image-test').css('background', 'url(' + src + ') no-repeat 50% 100%');
  };
  img.onerror = function() {
  // doesn't exist or error loading
  //alert('no image');
 checkImage('http://mydomain.com/images/no_img_file.jpg');
  };

  img.src = src; // fires off loading of image
}

//checkImage('http://www.google.com/images/logo_sm.gif');

// uncomment to test error function
checkImage('http://mydomain.com/mp3/'<?php echo $user_id; ?>'/'.string[3]);

Answer 1

Instead of trying to perform this check on the client, I would perdonally recommend recommend handling it at the server end and save yourself (and USERS!) that extra request.

The simplest means (add your own interpretational logic and validation later) would be to have a file called something like "coverart.php" and when you try to get the cover art make a request to coverart.php?name=MY_COVER_ART_FILE

Then within coverart.php:

$strCoverName = $_GET['name'];
$strArtDir = 'YOUR_COVER_ART_DIRECTORY';
$strCommonExtenstion = '.jpg';
$strFile = $strArtDir.$strCoverName.$strCommonExtension;

header('Content-Type: image/jpeg');

if(is_file($strFile)) {
    readfile($strFile);
} else {
    readfile($strArtDir.'no_img_file'.$strCommonExtension);
}

This is a KISS way of achieving what you want, I'd recommend you look further in to the various ways of achieving this however but along similar lines