Audiojs - how to autoplay multiple files in each own player?

Vote count:

0

I have a question about autoplay multiple files via audiojs. I know it's possible and here is the example: http://ift.tt/1r4jeB7

But I need some different implementation – I would like each file load/create itself entity of player in its specific DOM node. I've tried do something like this but I have very low skill in JS. Here is an example where second file is playing in its player but third is not: http://ift.tt/1mrJber

Here is JS code for multiple files playing

$(function() {
  // Add specific class and element in DOM for audiojs
  $('ol li').first().addClass('playing');
  $('<audio src=""></audio>').appendTo('ol li.playing');

  // Initialisation player and autoplay playlist
  var a = audiojs.createAll({
    trackEnded: function() {
      var next = $('ol li.playing').next();
      if (!next.length) next = $('ol li').first();
      next.addClass('playing').siblings().removeClass('playing');

      // Trying to add player for next track
      // I need player for each track in its specifi DOM node – sub file
      // Initialisation audiojs is needed for insert markup with css
      $('.audiojs').remove();
      $('<audio src=""></audio>').appendTo(next);
      var a = audiojs.createAll();
      var audio = a[0];

      audio.load($('a', next).attr('data-src'));
      audio.play();
    }
  });

  // Loading first track while page onload
  var audio = a[0];
  var first = $('ol a').attr('data-src');
  audio.load(first);

  // Loading track with mouse click
  $('ol li').click(function(e) {
    e.preventDefault();
    $(this).addClass('playing').siblings().removeClass('playing');
    $('.audiojs').remove();
    $(this).after('<audio></audio>');
    var a = audiojs.createAll();
    var audio = a[0];
    audio.load($('a', this).attr('data-src'));
    audio.play();
  });
});

asked 1 min ago

user3203962

1