You have two instances of jplayer. According to your scenario, you should have only one. Also, take care of your typos. Finally, you could try with something like this:
<tr>
<td>Tracklist:</td>
</tr>
<tr>
<td>1.</td>
<td><a class="song" href="http://my-website.com/mp31.mp3" id="mp31">Test</a>Friend</a> (Techno)</td>
</tr>
<tr>
<td>2.</td>
<td><a class="song" href="http://my-website.com/mp32.mp3" id="mp32">Test</a>Enemy</a> (Ambient)</td>
</tr>
The code above show you a list of <a>
elements with the mp3 url that you want to play, so, by this way yo can update the player once the click them:
<script>
$("#jp-player").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "/harry.mp3"
});
},
swfPath: "/js", supplied: "mp3"
});
$('.song').click(function (e) {
e.preventDefault();
// get the song url from the href attribute
var song = $(this).attr('href');
$("#jp-player").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: song
});
},
swfPath: "/js", supplied: "mp3"
});
});
</script>