jplayer vários links de arquivos mp3 em uma página - jplayer

Eu uso o jplayer na minha página e, quando clicado em um link, quero reproduzir o link. No entanto, toda vez que test1.mp3 é reproduzido. Como posso resolver isso? O código está abaixo:

a página é a seguinte, se necessário:

http://www.dilyurdu.com/audio.htm

function listen(mp3_index){

var mp3_file;
mp3_file="test"+mp3_index+".mp3";


$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: mp3_file,
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3"
});

}

links são os seguintes:

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

<a href="javascript:listen(1);" class="jp-play" >play 1</a><br /><br />

<a href="javascript:listen(2);" class="jp-play" >play 2</a><br /><br />

<a href="javascript:listen(3);" class="jp-play" >play 3</a>

Respostas:

3 para resposta № 1

Ei, você pode fazer o seguinte.

Instancio o player no carregamento da página:

jQuery("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
wmode: "window",
preload:"auto",
autoPlay: true,
errorAlerts:false,
warningAlerts:false
});

Em seguida, dentro de um ouvinte, que será exclusivo para cada item, você precisa: A) Buscar nome / URL da faixa, Acho que você deve conseguir descobrir isso.

B) Passe a faixa para o setMedia

  jQuery("#jquery_jplayer_1").jPlayer("setMedia", {
mp3: "http:xxxx.rackcdn.com/"+track+".MP3"
});

C) Reproduzir a faixa

  jQuery("#jquery_jplayer_1").jPlayer("play");

Para obter o ID da faixa, você precisa instalar os ouvintes em seus itens reproduzíveis (talvez uma aula reproduzível?) E obter a faixa a partir dessa.

---

0 para resposta № 2

Também estou procurando uma solução para isso. Acabei de criar na visita do jsfiddle http://jsfiddle.net/vijayweb/A5LQF/2/

Toca apenas uma música. qualquer ajuda será grata.

---

Encontrei uma solução relevante ... ainda reproduz apenas a primeira música padrão. vários links mp3 em uma única página com o jplayer

---

0 para resposta № 3

HTML:

<a class="ChangePath" data-key="1" href="javascript:void(0);">Song1</a>
<a class="ChangePath" data-key="2" href="javascript:void(0);">Song1</a>
<a class="ChangePath" data-key="3" href="javascript:void(0);">Song1</a>

jQuery:

$(function () {
$(".ChangePath").on("click", function () {

$("#jquery_jplayer_1").jPlayer("destroy");

var link = "test" + $(this).data("key") + ".mp3";

$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: link
});
},
swfPath: "~/Scripts/jplayer",
supplied: "mp3"
});

player.jPlayer("play", 0);

});
});

Se você estiver usando ajax:

$(function () {
$(".ChangePath").on("click", function () {
$.ajax({
$("#jquery_jplayer_1").jPlayer("destroy");

var link = "test" + $(this).data("key") + ".mp3";

$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: link
});
},
swfPath: "~/Scripts/jplayer",
supplied: "mp3"
});

player.jPlayer("play", 0);
});
});
});

Dependendo do seu projeto, pode ser necessário alterar os hiperlinks para outra coisa, mas o jQuery funcionará.

---