Как работать с плагином Jplayer (Jquery) на разных страницах?

Question

[Кирилл Носков]

Всем привет! Только начинаю постигать вершину Jquery и использую его для создания музыкального веб-приложения. Для проигрывания музыки использую знаменитый плагин Jplayer. С созданием одной странички проблем не возникло, но когда решил разбить блоки с музыкой на популярное и последнее, то появилась одна маленькая, но очень неприятная и крайне досадная проблема. При переходе с блока Popular на блок Last с помощью Ajax подгружается скрипт, где обнуляется значения предыдущего блока с музыкой и подгружается новый. Скрипты полностью идентичные, просто в каждом из них подгружается музыка из разных файлов, но если в первом случае все работает как надо, то во втором музыка начинает играть только после повторного нажатия на ссылку. Несмотря на то, что и в первом и во втором случае используется один скрипт jplayer, в котором настройках стоит автоматически проигрывать музыку после нажатия на ссылку. Надеюсь, что корректно объяснил суть проблемы и благодарен всем, кто дочитал до конца. При надобности могу показать код. Спасибо!

Comments

[Алексей Уколов]

Естественно, вам нужно показать код.

[Кирилл Носков]

Алексей Уколов: вот скрипт, который подгружает плеер:
$(document).ready(function(){
var data = {};
$.ajax({
url:'getPopular.json',
dataType:'json',
cache: false,
success:showImages
});
$.ajaxSetup({cache: false});
function showImages(val) {

$.each(val, function(key,value){
//var str = value.substr(0,10)+'...';

$("#2").append(
""+
""+
"" + value + ""+
""
);
$('#2 .track:first')
.addClass('track-default');
$(".album").css("width", "161px").css("height", "161px");

});
$('.album').animate({opacity:1}, 500, "swing");
$(document).on("hover", ".album", function(){
//$(this).toggleClass("green");
$(this).find("button").toggleClass("btn-opacity");
});

};
//$(document).ready(function(){
$.when(showImages).done(function(){$.getScript('player-last.js');});

$("#text_last").on("click", function(){
$("#2").empty();

$.getScript('script-last.js');
$(document).on("hover", ".album", function(){
$(this).find("button").toggleClass("btn-opacity");
});

$("#popular").css("background-color", "#1e1f22");
$("#Last").css("background-color", "#15161a");
});
});

[Кирилл Носков]

noskov-kirill: где append и пустые "" добавляются обложки. Скрипт player.js подгружат Jplayer, а script-last.js код аналогичный этому, но только с другим файлом json

Answer 1

[Константин Китманов]

Вы пытаетесь сделать SPA по старинке, загружая кусочки HTML со скриптами. Это криво, и всегда будет работать криво. Загружайте с сервера данные в JSON, превращайте с помощью шаблонизатора в HTML, и количество проблем резко поползет вниз.

В данном случае, похоже, что Jplayer инициализируется дважды. Точнее сказать трудно, так как вы не привели минимально нерабочий код.

Comments

[Кирилл Носков]

Спасибо, а не подкините ссылочки, где можно получить подробную информацию по этой теме? В ответе на первый комментарий привел код, а ниже остальной код из файла player.js. Может получится решить данный случай. Большое спасибо за помощь.

var my_jPlayer = $("#jquery_jplayer"),
my_trackName = $("#jp_container .track-name"),
my_playState = $("#jp_container .play-state"),
my_extraPlayInfo = $("#jp_container .extra-play-info");

// Some options
var opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
opt_auto_play = true, // If true, when a track is selected, it will auto-play.
opt_text_playing = "Сейчас играет:", // Text when playing
opt_text_selected = "Выбранный трек"; // Text when not playing

// A flag to capture the first track
var first_track = true;

// Change the time format
$.jPlayer.timeFormat.padMin = false;
$.jPlayer.timeFormat.padSec = false;
$.jPlayer.timeFormat.sepMin = " минут ";
$.jPlayer.timeFormat.sepSec = " секунд";

// Initialize the play state text
my_playState.text(opt_text_selected);

// Instance jPlayer
my_jPlayer.jPlayer({
ready: function () {
$("#jp_container .track-default").click();
},
play: function() { // Останавливаем остальные
$(this).jPlayer("pauseOthers");
},
wmode: "window",
smoothPlayBar: false,
keyEnabled: true,
swfPath: "js",
cssSelectorAncestor: "#jp_container",
supplied: "mp3"
});

// Create click handlers for the different tracks
$("#jp_container .track").click(function(e) {
my_trackName.text($(this).text());
my_jPlayer.jPlayer("setMedia", {
mp3: $(this).attr("href")
});
if((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
my_jPlayer.jPlayer("play");
}
first_track = false;
$(this).blur();
return false;
});

[Константин Китманов]

noskov-kirill: посмотрите в сторону singlepageappbook.com

[Кирилл Носков]

Константин Китманов: Спасибо.