Playlist de músicas com JPlayer

[Maycon Paiva 0]

Olá.

Estou desenvolvendo um sistema onde o usuário pode navegar em páginas diferentes e ir adicionando músicas em tempo real a playlist.

 

Mas eu só consegui fazer isso se as linhas de comando da adição da playlist estiver dentro das linhas de comando de onde se cria o player.

$(document).ready(function(){
	var mp = new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_N",
		cssSelectorAncestor: "#jp_container_N"
	}, [
	], {
		playlistOptions: {
			enableRemoveControls: true
		},
		swfPath: "files/js/player",
		supplied: "mp3",
		smoothPlayBar: true,
		keyEnabled: true,
		audioFullScreen: false
	});


	// The remove commands

	$("#playlist-remove").click(function() {
		mp.remove();
	});
   $('#playlist-list').showHide({			 
		speed: 500,  // speed you want the toggle to happen	
		easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
		changeText: 1, // if you dont want the button text to change, set this to 0
		showText: 'Mostrar',// the button text to show when a div is closed
		hideText: 'Ocultar' // the button text to show when a div is open
					 
	});

	$('#musica_1').click(function(){
			var musica = $(this).attr('rel');
			var tit = $(this).attr('title');
			mp.add({
			title: tit,
			mp3: musica
		});
	});
	$('#musica_2').click(function(){
			var musica = $(this).attr('rel');
			var tit = $(this).attr('title');
			mp.add({
			title: tit,
			mp3: musica
		});
	});
});

No caso se eu inserir a função de adicionar música fora de onde declarei o player, a música não é adicionada, mesmo o código estando junto a index.

$(document).ready(function(){
	$('#musica_2').click(function(){
			var musica = $(this).attr('rel');
			var tit = $(this).attr('title');
			mp.add({
			title: tit,
			mp3: musica
		});
	});
});

Caso alguém tenha alguma solução. E as páginas são carregadas dentro de uma div para que não atualize o player e venha zerar as músicas do mesmo.

 

E também porque não da certo utilizar uma única função como está acima #musica_2 para adicionar as músicas, pois pra cada música que vou adicionar preciso criar as linhas novamente com outro nome por ex: #musica_3, e assim por diante.

[Maycon Paiva 0]

Já consegui resolver, caso alguém queira utilizar fica assim o código:

$(document).ready(function(){
	mp = new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_N",
		cssSelectorAncestor: "#jp_container_N"
	}, [
	], {
		playlistOptions: {
			enableRemoveControls: true
		},
		swfPath: "files/js/player",
		supplied: "mp3",
		smoothPlayBar: true,
		keyEnabled: true,
		audioFullScreen: false
	});
	$("#playlist-remove").click(function() {
		mp.remove();
	});
   $('#playlist-list').showHide({			 
		speed: 500,
		easing: '',
		changeText: 1
					 
	});
});
	function adicionar(titulo,musica){
		mp.add({
			title: titulo,
			mp3: musica
		})
	}

o código do player é o seguinte:

 

		<div id="jp_container_N" class="jp-video jp-video-360p" style="width:100%; clear:both; position:fixed; bottom:0;">
			<div class="jp-type-playlist">
				<div id="jquery_jplayer_N" class="jp-audio"></div>
				<div class="jp-gui">
			
					<div class="jp-interface">
						<div class="jp-progress">
							<div class="jp-seek-bar">
								<div class="jp-play-bar"></div>
							</div>
						</div>
						<div class="jp-current-time"></div>
						<div class="jp-duration"></div>
						<div class="jp-title">
							<ul>
								<li></li>
							</ul>
						</div>
						<div class="jp-controls-holder">
							<ul class="jp-controls">
								<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
								<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-next" tabindex="1">next</a></li>
								<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
								<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
								<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
								<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
							</ul>
							<div class="jp-volume-bar">
								<div class="jp-volume-bar-value"></div>
							</div>
							<ul class="jp-toggles">
								<li><a href="javascript:;" id="playlist-remove" class="icon-remove icon-black" tabindex="1" title="Limpar Playlist">Limpar</a></li>
								<li><a href="javascript:;" id="playlist-list" rel="#playlist" class="icon-list icon-black" tabindex="1" title="repeat off">repeat off</a></li>
								<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>
					</div>
				</div>
				<div class="jp-playlist" id="playlist" style="max-height:100px; overflow:auto;">
					<ul>
						<!-- The method Playlist.displayPlaylist() uses this unordered list -->
						<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="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
				</div>
			</div>
            </div></div>

 

e para adicionar a música o código é o seguinte:

<a href="javascript:;" onclick="adicionar('Titulo da música','url_da_musica');">Música com Function 02</a>

Agradecimento ao VitorGGA, por me ajudar a encontrar o erro e a resolve-lo.