Jplayer grabs mp3 file but doesn't play it

Hi, I’m trying to use jplayer to play mp3 files added in custom fields. So when I click on the mp3 file in the post jplayer grab the mp3 files, but so far it only show the name of the file and the artist, but I can’t get it to actually play the file.

I use this code on single.php:

<div class="mp3jplayer-track">
	<a class="playprogram" href='javascript:initMp3("<?php echo $mp3_url; ?>", "<?php echo $mp3_name; ?> - <?php /*if there is an artist specified for each mp3, we get it, otherwise we get the taxonomie Artists*/ if ($mp3_artists != ''){ echo 'Artist(s): '.$mp3_artists;}  else { echo 'Artist(s): '.$artists_names; } ?>")'>Play <br><span class="mp3_name"><i class="icon-music icon-white"></i><span class="mp3_name_text"><?php echo $mp3_name ?></span></span></a>	</div>

The jplayer looks like this in my footer:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

	<div id="jp_container_1" class="jp-audio">
		<div class="jp-type-single">
			<div class="jp-gui jp-interface">
				<ul class="jp-controls">
					<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
					<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
					<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
				</ul>

				<!--
				<ul class="jp-toggles">
					<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
					<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
				</ul>
				-->

				<div class="jp-progress-group">
					<div class="jp-current-time"></div>
					<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>
					<div class="jp-duration"></div>
				</div>

				<div class="jp-volume-group">
					<a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
					<a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>
					<a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a>
				</div>

				<div class="jp-time-holder">

				</div>

			</div>
			<div class="jp-title">
				<ul>
					<li></li>
				</ul>
			</div>

			<div class="jp-no-solution">
				<span>Update Required</span>
				To play the media you will need to either update your browser to a recent version or update your <a href="https://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
			</div>

		</div>
	</div>

And the javascript to load the mp3:

function initMp3(mp3file, mp3info){
jQuery.noConflict()(function($){
	/* DEBUG
	window.alert(mp3file);
	window.alert(mp3info);
	*/

	$("#jp_container_1").css("display","block");

	$("#jquery_jplayer_1").jPlayer( "clearMedia" );
	$("#jquery_jplayer_1").jPlayer( "setMedia" , {
		mp3:mp3file
	});

	$("#jquery_jplayer_1").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				mp3:mp3file
			}).jPlayer("play");
		},

		swfPath: "js",
		supplied: "mp3",
		wmode: "window"
	})

	$(".jp-title ul li").text(mp3info);
	$("#jquery_jplayer_1").jPlayer("play");

});
};

Any idea why it doesn’t work?