jPlayer - воспроизведение серии mp3-файлов с плакатом

Question

Я пытаюсь изменить проект jPlayer QuickStart, чтобы последовательно воспроизводить серию mp3-файлов, каждый из которых имеет собственное изображение плаката. Это в основном просто использование html, JavaScript, jQuery и CSS.

(QuickStart здесь, для справки: http://jplayer.org/latest/quick-start-guide/)

Ниже мой текущий код, который не работает (не играет даже первый mp3 или звуковой файл).

$(document).ready(function() { 
    var m = [{ 
     mp: "data/audio1.mp3", 
     p: "data/Slide1.PNG" 
    }, { 
     mp: "data/audio2.mp3", 
     p: "data/Slide2.PNG" 
    }, { 
     mp: "data/audio3.mp3", 
     p: "data/Slide3.PNG" 
    }]; 
    $("#jquery_jplayer_1").jPlayer({ 
     ready: function() { 
      $.each(m, function(index, value) { 
       alert(value.mp); 
       $(this).jPlayer("setMedia", { 
        mp3: value.mp, 
        poster: value.p 
       }).jPlayer("play"); 
      }); 
     }, 
     swfPath: "/js", 
     supplied: "mp3", 
     size: { 
      width: "960px", 
      height: "720px" 
     } 
    }); 
}); 

предупреждение (значение.mp); говорит мне, что я получаю имена файлов в порядке.

Я пробовал его с jPlayer («play»), не повезло в любом случае.

Если удалить строку каждый, и просто использовать что-то вроде м [0] .mp и м [0] .p, я могу играть любую данную mp3 и отображать любую заданную PNG. Но «каждый» подход не работает, чтобы воспроизводить каждый из mp3-файлов последовательно вместе со своим ассоциированным изображением.

Я знаю, что jPlayer имеет надстройку listplayer, но у него много функциональности, мне это не нужно, поэтому я бы предпочел не использовать его, если я могу сделать это с помощью нескольких строк кода.

Answer 1

Вот что я разработал для воспроизведения mp3 и отображения связанных плакатов последовательно. Он основан на событии jPlayer .

$(document).ready(function() { 
    var m = [{ 
     mp: "data/a24x2x1.mp3", 
     p: "data/Slide1.PNG" 
    }, { 
     mp: "data/a24x3x1.mp3", 
     p: "data/Slide2.PNG" 
    }, { 
     mp: "data/a24x4x1.mp3", 
     p: "data/Slide3.PNG" 
    }]; 
    var n = 0; 
    $("#jquery_jplayer_1").jPlayer({ 
     ready: function() { 
      $("#jquery_jplayer_1").bind($.jPlayer.event.ended, function(event) { 
       if (n < m.length - 1) { 
        n++; 
       } else { 
        alert("do something after the last slide"); 
        return; 
       } 
       $(this).jPlayer("setMedia", { 
        mp3: m[n].mp, 
        poster: m[n].p 
       }).jPlayer("play"); 
      }); 
      $(this).jPlayer("setMedia", { 
       mp3: m[n].mp, 
       poster: m[n].p 
      }).jPlayer("play"); 
     }, 
     swfPath: "/js", 
     supplied: "mp3", 
     size: { 
      width: "960px", 
      height: "720px" 
     } 
    }); 
});