JPlayer + Ajax page load - ajax

Question

I will try to keep this short:
How would i manage to make a unique instance of jPlayer (http://jplayer.org/) "work" after an ajax page load?
My jPlayer uses the following inline javascript code:
<?
$mp3 = get_post_meta(get_the_ID(), 'audio_mp3', TRUE);
$ogg = get_post_meta(get_the_ID(), 'audio_ogg', TRUE);
?>
<?php if($mp3 && $ogg) { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery( '#jquery_jplayer_<?php the_ID(); ?>' ).jPlayer({
ready: function() {
jQuery(this).jPlayer('setMedia', {
mp3: "<?php echo ($mp3); ?>",
oga: "<?php echo ($ogg); ?>"
});
},
swfPath: "<?php echo get_template_directory_uri(); ?>/js/jplayer/",
cssSelectorAncestor: "#jp_container_<?php the_ID(); ?>",
supplied: "<?php if($mp3 != '') : ?>mp3, <?php endif; ?><?php if($ogg != '') : ?>oga, <?php endif; ?> all"
});
});
</script>
For non unique stuff like a prettyPhoto lightbox for example i created a function (prettyPhoto(); wich i put in the callback. But i cannot seem to get this working with jplayer!
Any help would be apriciated!

Answer 1

I recommend using the playlist add-on.
Create an empty player instance
var jpplaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [], {
swfPath: "/path/to/swf",
supplied: "mp3",
wmode: "window"
});
After your AJAX page load, use the setPlaylist function to add your tracks:
jpplaylist.add({
title:"Song Title",
mp3:"http://example.com/example.mp3"
});
The full playlist specs are here: http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/