JPlayer with dynamic code

Question

Hey I am trying to get this JPlayer Jquery package to work with my website. I want them to be dynamic and change the music file playing with the onclick function (if possible), but I cant seem to figure out how to do it dynamically without adding each instance inside the head tag which wont work for my idea.

Here is my code for inserting the links with the appropriate ids. The $result is just an array of music tracks from a database with the file name and ids for the JPlayer to know which song and which Id to reference to play.

     while($song = mysql_fetch_array($result))
  {
  echo "<li id='".$song['id']."'><a onclick='playMusic(#".$song['id']." , ".$name."/".$song['name']." )'  href='javascript:void(0);' id=".$cat." ".$song['id']."> <img src='images/music_song.jpg' title='Category ".$song['name']."' /> ".$song['name']."</a></li>";

    }
  

and here is the playMusic javascript function

     function playMusic(id,filename) {
  $(id).jPlayer( {
    ready: function () {
      $(id).changeAndPlay("music/"+filename);
    }
    });
    
    
    }

Now I know this has to be inside the $(document).ready(function() {//code goes here });

but my question is how can i get this to work dynamically with the onclick? If there is a better way or any one has any ideas let me know. I just can't seem to get it to work.

Answer 1

I ended up not using JPlayer for this. I went with SoundManager2 it has a way of turning links that lead to music files into players.