Duda jquery mp3 player

[gulp]

Hola, estoy tratando de ponerle musica a un sitio web y tengo ganas de hacerlo con jquery, ya que estoy utilizando esa libreria.
El reproductor es el siguiente:
http://www.happyworm.com/jquery/jpla....1/demo-02.htm

El tema es que no reproduce nada, ni siquiera aparecen la lista de temas. Les agrego el codigo para ver si me pueden dar una mano.

HEAD

Código:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jplayer.js"></script>
<script>

$(document).ready(function(){

	var usePlayList = false;
	var playItem = 0;

	var myPlayList = [	{name:"Agua y Arena",filename:"JPG-Aguayarena.mp3"},{name:"Agua y Arena 2",filename:"JPG-Aguayarena.mp32.mp3"}];


	$("#jquery_jplayer").jPlayer({
		ready: function() {
			displayPlayList();
			playListEnable(true);
		}
	});

	$("#jquery_jplayer").jPlayerId("play", "player_play");
	$("#jquery_jplayer").jPlayerId("pause", "player_pause");
	$("#jquery_jplayer").jPlayerId("stop", "player_stop");
	$("#jquery_jplayer").jPlayerId("loadBar", "player_progress_load_bar");
	$("#jquery_jplayer").jPlayerId("playBar", "player_progress_play_bar");
	$("#jquery_jplayer").jPlayerId("volumeMin", "player_volume_min");
	$("#jquery_jplayer").jPlayerId("volumeMax", "player_volume_max");
	$("#jquery_jplayer").jPlayerId("volumeBar", "player_volume_bar");
	$("#jquery_jplayer").jPlayerId("volumeBarValue", "player_volume_bar_value");

	$("#jquery_jplayer").onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
		var myPlayedTime = new Date(playedTime);
		var ptMin = (myPlayedTime.getMinutes() < 10) ? "0" + myPlayedTime.getMinutes() : myPlayedTime.getMinutes();
		var ptSec = (myPlayedTime.getSeconds() < 10) ? "0" + myPlayedTime.getSeconds() : myPlayedTime.getSeconds();
		$("#play_time").text(ptMin+":"+ptSec);

		var myTotalTime = new Date(totalTime);
		var ttMin = (myTotalTime.getMinutes() < 10) ? "0" + myTotalTime.getMinutes() : myTotalTime.getMinutes();
		var ttSec = (myTotalTime.getSeconds() < 10) ? "0" + myTotalTime.getSeconds() : myTotalTime.getSeconds();
		$("#total_time").text(ttMin+":"+ttSec);
	});

	$("#jquery_jplayer").onSoundComplete(endOfSong);

	$("#ctrl_prev").click( function() {
		playListPrev();
		return false;
	});

	$("#ctrl_next").click( function() {
		playListNext();
		return false;
	});

	function endOfSong() {
		if(usePlayList) {
			playListNext();
		}
	}

	function displayPlayList() {
		for (i=0; i < myPlayList.length; i++) {
			$("#playlist_list ul").append("<li id='playlist_item_"+i+"'>"+ myPlayList[i].name +"</li>");
			$("#playlist_item_"+i).data( "index", i ).hover(
				function() {
					if (playItem != $(this).data("index")) {
						$(this).addClass("playlist_hover");
					}
				},
				function() {
					$(this).removeClass("playlist_hover");
				}
			).click( function() {
				var index = $(this).data("index");
				if (playItem != index) {
					playListChange( index );
				}
			});
		}
	}

	function playListEnable(e) {
		usePlayList = e;
		if(usePlayList) {
			playListChange( playItem );
		} else {
			$("#jquery_jplayer").stop();
			$("#player_playlist_message").text("Playlists disabled");
		}
	}

	function playListChange( index ) {
		$("#playlist_item_"+playItem).removeClass("playlist_current");
		$("#playlist_item_"+index).addClass("playlist_current");
		playItem = index;
		$("#jquery_jplayer").changeAndPlay(myPlayList[playItem].filename);
		// $("#player_playlist_message").text(myPlayList[playItem].name);
	}

	function playListNext() {
		if(usePlayList) {
			var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
			playListChange( index );
		}
	}

	function playListPrev() {
		if(usePlayList) {
			var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
			playListChange( index );
		}
	}
});

</script>

<style>
<!--

#player_container {
	position: relative;
	background-color:#eee;
	width:418px;
	height:80px;
	border:1px solid #009be3;
}
#player_container  ul#player_controls {
	list-style-type:none;
	padding:0;
	margin: 0;
}
#player_container  ul#player_controls li {
	overflow:hidden;
	text-indent:-9999px;
}
#player_play,
#player_pause {
	display: block;
	position: absolute;
	left:48px;
	top:20px;
	width:40px;
	height:40px;
	cursor: pointer;
}
#player_play {
	background: url("images/spirites.jpg") 0 0 no-repeat;
}
#player_play.jqjp_hover {
	background: url("images/spirites.jpg") -41px 0 no-repeat;
}
#player_pause {
	background: url("images/spirites.jpg") 0 -42px no-repeat;
}
#player_pause.jqjp_hover {
	background: url("images/spirites.jpg") -41px -42px no-repeat;
}

#ctrl_prev {
	position: absolute;
	left:20px;
	top:26px;
	background: url("images/spirites.jpg") 0 -112px no-repeat;
	width:28px;
	height:28px;
	cursor: pointer;
}

#ctrl_prev:hover {
	background: url("images/spirites.jpg") -29px -112px no-repeat;
}

#ctrl_prev.disabled {
	background: url("images/spirites.jpg") -58px -112px no-repeat;
	cursor:default;
}

#ctrl_next {
	position: absolute;
	left:88px;
	top:26px;
	background: url("images/spirites.jpg") 0 -141px no-repeat;
	width:28px;
	height:28px;
	cursor: pointer;
}

#ctrl_next:hover {
	background: url("images/spirites.jpg") -29px -141px no-repeat;
}

#ctrl_next.disabled {
	background: url("images/spirites.jpg") -58px -141px no-repeat;
	cursor:default;
}


#player_stop {
	position: absolute;
	left:126px;
	top:26px;
	background: url("images/spirites.jpg") 0 -83px no-repeat;
	width:28px;
	height:28px;
	cursor: pointer;
}
#player_stop.jqjp_hover {
	background: url("images/spirites.jpg") -29px -83px no-repeat;
}
#player_progress {
	position: absolute;
	left:164px;
	top:32px;
	background-color: #eee;
	width:122px;
	height:15px;
}
#player_progress_load_bar {
	background: url("images/bar_load.gif")  top left repeat-x;
	width:0px;
	height:15px;
	cursor: pointer;
}
#player_progress_load_bar.jqjp_buffer {
	background: url("images/bar_buffer.gif")  top left repeat-x;
}
#player_progress_play_bar {
	background: url("images/bar_play.gif") top left repeat-x ;
	width:0px;
	height:15px;
}
#player_volume_min {
	position: absolute;
	left:296px;
	top:32px;
	background: url("images/spirites.jpg") 0 -170px no-repeat;
	width:18px;
	height:15px;
	cursor: pointer;
}

#player_volume_max {
	position: absolute;
	left:368px;
	top:32px;
	background: url("images/spirites.jpg") 0 -186px no-repeat;
	width:18px;
	height:15px;
	cursor: pointer;
}

#player_volume_min.jqjp_hover {
	background: url("images/spirites.jpg") -19px -170px no-repeat;
}

#player_volume_max.jqjp_hover {
	background: url("images/spirites.jpg") -19px -186px no-repeat;
}

#player_volume_bar {
	position: absolute;
	left:314px;
	top:37px;
	background: url("images/volume_bar.gif") repeat-x top left;
	width:46px;
	height:5px;
	cursor: pointer;
}
#player_volume_bar_value {
	background: url("images/volume_bar_value.gif") repeat-x top left;
	width:0px;
	height:5px;
}

#play_time,
#total_time {
	position: absolute;
	left:164px;
	top:49px;
	width:122px;
	font-size:.8em;
	font-style:oblique;
}

#total_time {
	text-align: right;
}

#playlist_list {
	width:418px;
}

#playlist_list ul{
	list-style-type:none;
	padding:10px 20px 20px 20px;
	margin:0 0 10px 0;
	background-color:#ccc;
	border:1px solid #009be3;
	border-top:none;
	width:378px;
	font-size:.9em;
}

#playlist_list li{
	padding:4px 0 4px 20px;
	border-bottom:1px solid #eee;
	cursor: pointer;
}

#playlist_list li.playlist_current{
	color:#0d88c1;
	list-style-type:square;
	list-style-position:inside;
	padding-left:6px;
	cursor: default;
}

#playlist_list li.playlist_hover {
	color:#0d88c1;
}

.miaow {
	font-size:.8em;
	color:#999;
}

.miaow a:link, a:visited, a:hover, a:focus, a:active {
	color:#009be3;
}
-->

</style>

BODY

Código:

<body class="demos">
<div id="container">
  <div id="content_main">
	<div class="section">
		  <p>&nbsp;</p>
			<div id="player_container"><ul id="player_controls"><li id="player_play"><a href="#" onClick="$('#jquery_jplayer').play(); return false;" title="play"><span>play</span></a></li>
		<li id="player_pause"><a href="#" onClick="$('#jquery_jplayer').pause(); return false;" title="pause"><span>pause</span></a></li>
		<li id="player_stop"><a href="#" onClick="$('#jquery_jplayer').stop(); return false;" title="stop"><span>stop</span></a></li>
		<li id="player_volume_min"><a href="#" onClick="$('#jquery_jplayer').volume(0); return false;" title="min volume"><span>min volume</span></a></li>

		<li id="player_volume_max"><a href="#" onClick="$('#jquery_jplayer').volume(100); return false;" title="max volume"><span>max volume</span></a></li>
		<li id="ctrl_prev"><a href="#" onclick="playListPrev(); return false;" title="previous track"><span>previous</span></a></li>
		<li id="ctrl_next"><a href="#" onclick="playListPrev(); return false;" title="next track"><span>next</span></a></li>
	</ul>
	<div id="play_time"></div>
	<div id="total_time"></div>
	<div id="player_progress">

		<div id="player_progress_load_bar">
			<div id="player_progress_play_bar"></div>
		</div>
	</div>
	<div id="player_volume_bar">
		<div id="player_volume_bar_value"></div>
	</div>
</div>

<div id="playlist_list">

	<ul>
		<!-- The function displayPlayList() uses this unordered list -->
	</ul>
</div>
<p class="miaow">&nbsp;</p>
	</div>

  </div>

</div>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3557377-3");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>

Gracias!

[caricatos]

Tema movido desde javascript

[chifliiiii]

Probaste a poner los archivos con rutas absolutas como en el ejemplo de ellos filename:"http://www.miaowmusic.com/mp3/Miaow-01-Tempered-song.mp3"

[gulp]

si, probe pero nada...

por lo que ando viendo en mi codigo me parece que tengo un conflicto de librerias, creo...

En el <HEAD> estoy llamando a

Código:

<script type="text/javascript" src="js/combined.js"></script>

para utilizar un scroll, que es la funcionalidad mas importante de la pagina.


En el <body>, abajo de todo, llamo a las siguientes librerias

Código:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.serialScroll.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>

y luego el script
(agregue " $.noConflict();" por que lei que evita problemas entre librerias, pero no se si lo estoy utilizando bien...seguramente no)

Código:

    <script type="text/javascript">
  $.noConflict();

function contactUp () {
	var h = $("#ajax").outerHeight();
				$("#contact-wrap").animate({top:"-" + h + "px"}, 500, "easeInOutCubic", function () {
					$("#tab").css("backgroundPosition","0 0");
					document.contactToggle = false;
				});
	$("#overlay").fadeOut(500);
}

function contactDown () {
	
	$("#overlay").css("opacity","0").show().fadeTo(300,0.5);
	
	$("#contact-wrap").animate({top:"0"}, 500, "easeInOutCubic", function () {
		document.contactToggle = true;
		$("#tab").css("backgroundPosition","0 -27px");
	});
}

if (!ie) {

$(document).ready(function() {
		

$("#globalPlayer").jPlayer( {
			ready: function () {
				this.element.jPlayer("setFile", "mp3/welcome.mp3").jPlayer("play");
			},
			swfPath: 'js/'
		});
		
		var multwidth = $('#scroll-container > #scroller-list > .scroller-item ').size();
		
		$("body").append("<div id='overlay'></div>")
		var h = $("#ajax").outerHeight();
		$("#contact-wrap").children("#ajax").show().parent().css("top", "-" + h + "px");
		
		$('#scroll-container > #scroller-list').width((multwidth*950) + 'px');
		
		
		var offset = $('.nav > li:eq(0)').position(); //Position of navigation list item
		var objwidth = $('.nav > li:eq(0)').outerWidth(); //Width of navigation list item
		var width = $(window).width(); //Width of window
		//Explination
		//((offsetOfNavItem - ((widthOfWindow - fixedContainerWidth)/onlyOnOneSide)) + (widthOfNavItem/theCenter) - halfTheImageWidth)
		var scroll = ((offset.left - ((width-950)/2)) + (objwidth/2) - 5);
		$('#scroll-arrow').css('backgroundPosition','' + scroll + 'px 0');
		
		$('.nav li a:not(:last)').each(function(){
			var link = $(this).html();
			$(this).attr("href","#" + link);
		});
			
		$('#main').serialScroll({
			target:'#scroll-container',
			items:'li.scroller-item', // Selector to the items (relative to the matched elements)
			prev:'.lft-arrow',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
			next:'.rgt-arrow',// Selector to the 'next' button (absolute too)
			//axis:'y',// The default is 'y' scroll on both ways
			navigation:'.nav li a',
			duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
			force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
			easing:'easeInOutCubic',
			
			//queue:false,// We scroll on both axes, scroll both at the same time.
			//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
			//stop:false,// Each click will stop any previous animations of the target. (false by default)
			//lock:true, // Ignore events if already animating (true by default)		
			//start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )		
			//cycle:true,// Cycle endlessly ( constant velocity, true is the default )
			//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
			//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
			//lazy:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
			//interval:1000, // It's the number of milliseconds to automatically go to the next
			constant:false, // constant speed
			
			onBefore:function( e, elem, $pane, $items, pos ){
				/**
				 * 'this' is the triggered element 
				 * e is the event object
				 * elem is the element we'll be scrolling to
				 * $pane is the element being scrolled
				 * $items is the items collection at this moment
				 * pos is the position of elem in the collection
				 * if it returns false, the event will be ignored
				 */
				 //those arguments with a $ are jqueryfied, elem isn't.
				e.preventDefault();
				if( this.blur )
					this.blur();
					
				
				
				//Sliding arrow
				var offset = $('.nav > li:eq(' + pos + ')').position(); //Position of navigation list item
				var objwidth = $('.nav > li:eq(' + pos + ')').outerWidth(); //Width of navigation list item
				var width = $(document).width(); //Width of window
				//Explination
				//((offsetOfNavItem - ((widthOfWindow - fixedContainerWidth)/onlyOnOneSide)) + (widthOfNavItem/theCenter) - halfTheImageWidth)
				var scroll = ((offset.left - ((width-950)/2)) + (objwidth/2) - 5);
				$("#scroll-arrow").animate({backgroundPosition:"(" + scroll + " 0)"}, 700, "easeInOutCubic");
			},
		});
		
		document.contactToggle = false;
		$("#tab").click(function(){
			if (document.contactToggle) {
				contactUp();
			} else {
				contactDown();
			}
			return false;
		});
		
		
		$("#overlay").click(function(){
			if (document.contactToggle) {
				contactUp();
			}
			return false;
		});

		
		if (self.document.location.hash.match("wpcf7"))
		{
			contactDown();
		}
		
		$("#video").click(function(){
			$("#globalPlayer").jPlayer("stop");
			$(".jp-pause").hide();
			$(".jp-play").show();
		});
		
		



});
}
</script>
<div class="audio_player" id="globalPlayer"></div>
<script type="text/javascript">
		
		$(document).ready(function() {$(".jp-pause").click(function(){
		$("#globalPlayer").jPlayer("pause");
		$(".jp-pause").hide();
		$(".jp-play").show();
	}).hide();
	$(".jp-stop").click(function(){
		$("#globalPlayer").jPlayer("stop");
		$(".jp-pause").hide();
		$(".jp-play").show();
	});
  		var jpPlayTimedemo1 = $("#jplayer_play_timedemo1");
		var jpTotalTimedemo1 = $("#jplayer_total_timedemo1");
		
		
		$("#jplayer_playdemo1").click(function(){
			$(".jp-pause").hide();
			$(".jp-play").show();
			$("#globalPlayer").jPlayer("volume", 80);
			$("#globalPlayer").jPlayer({
				ready: function () {
					$("#globalPlayer").jPlayer("setFile", "mp3/Agua y arena - JPG.mp3").jPlayer("play");
				},
			})
			.jPlayer("setFile", "mp3/Agua y arena - JPG.mp3").jPlayer("play")
			.jPlayer( "cssId", "loadBar", "jplayer_load_bardemo1" )
  			.jPlayer( "cssId", "playBar", "jplayer_play_bardemo1" )
  			.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
		jpPlayTimedemo1.text($.jPlayer.convertTime(playedTime));
		jpTotalTimedemo1.text($.jPlayer.convertTime(totalTime));
		});
		$("#jplayer_pausedemo1").show();
		});
  		var jpPlayTimedemo2 = $("#jplayer_play_timedemo2");
		var jpTotalTimedemo2 = $("#jplayer_total_timedemo2");
		
		
		$("#jplayer_playdemo2").click(function(){
			$(".jp-pause").hide();
			$(".jp-play").show();
			$("#globalPlayer").jPlayer("volume", 80);
			$("#globalPlayer").jPlayer({
				ready: function () {
					$("#globalPlayer").jPlayer("setFile", "mp3/test1.mp3").jPlayer("play");
				},
			})
			.jPlayer("setFile", "mp3/test1.mp3").jPlayer("play")
			.jPlayer( "cssId", "loadBar", "jplayer_load_bardemo2" )
  			.jPlayer( "cssId", "playBar", "jplayer_play_bardemo2" )
  			.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
		jpPlayTimedemo2.text($.jPlayer.convertTime(playedTime));
		jpTotalTimedemo2.text($.jPlayer.convertTime(totalTime));
		});
		$("#jplayer_pausedemo2").show();
		});
  		var jpPlayTimedemo3 = $("#jplayer_play_timedemo3");
		var jpTotalTimedemo3 = $("#jplayer_total_timedemo3");
		
		
		$("#jplayer_playdemo3").click(function(){
			$(".jp-pause").hide();
			$(".jp-play").show();
			$("#globalPlayer").jPlayer("volume", 80);
			$("#globalPlayer").jPlayer({
				ready: function () {
					$("#globalPlayer").jPlayer("setFile", "mp3/test2.mp3").jPlayer("play");
				},
			})
			.jPlayer("setFile", "mp3/test2.mp3").jPlayer("play")
			.jPlayer( "cssId", "loadBar", "jplayer_load_bardemo3" )
  			.jPlayer( "cssId", "playBar", "jplayer_play_bardemo3" )
  			.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
		jpPlayTimedemo3.text($.jPlayer.convertTime(playedTime));
		jpTotalTimedemo3.text($.jPlayer.convertTime(totalTime));
		});
		$("#jplayer_pausedemo3").show();
		});
});</script>

[cadete]

intenta con: " jQuery.noConflict();"
y sustituye todos los "$" por "jQuery"

[gulp]

gracias!
funciono perfectamente...ahora no se por que con firefox y explorer no anda....y con el chrome si...