Вопрос по – jplayer несколько ссылок на mp3 файлы на одной странице

1

Я использую jplayer на своей странице, и когда я нажимаю на ссылку, я хочу воспроизвести нажатую. Однако каждый раз, когда test1.mp3 играет. Как я могу решить это? Код ниже:

при необходимости страница выглядит следующим образом:

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

<code>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" 
  });   

} 
</code>

ссылки следующие:

<code><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>
</code>

Ваш Ответ

3   ответа
3

Я создаю экземпляр проигрывателя при загрузке страницы:

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
});

Затем внутри слушателя, который будет уникальным для каждого элемента, вам нужно: A)Fetch track name/URLЯ думаю, вы должны быть в состоянии понять это.

B)Pass the track to the setMedia

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

C)Play the track

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

Чтобы получить идентификатор трека, вам нужно установить слушателей на свои воспроизводимые предметы (может быть, на воспроизводимый класс?) И получить трек от этого.

0

http://jsfiddle.net/vijayweb/A5LQF/2/

Он играет только одну песню. любая помощь будет благодарна.

Я нашел соответствующее решение ... по-прежнему играть только первую песню по умолчанию. несколько mp3-ссылок на одной странице с jplayer

0

<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);

});
});

Если вы используете 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);
});
});
});

В зависимости от вашего проекта вам может понадобиться изменить гиперссылки на что-то другое, но jQuery будет работать.

Похожие вопросы