создать плейлист из html

[jusuf]

Ест один темплате в нем встроен jplayer плейлисты создаются через javascript вот так

$(document).ready(function(){

  var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jplayer_N",
    cssSelectorAncestor: "#jp_container_N"
  }, [
    {
      title:"Busted Chump",
      artist:"ADG3",
      mp3:"http://flatfull.com/themes/assets/musics/adg3com_bustedchump.mp3",
      poster: "images/m0.jpg"
    },
{
      title:"Busted Chump",
      artist:"ADG3",
      mp3:"http://flatfull.com/themes/assets/musics/adg3com_bustedchump.mp3",
      poster: "images/m0.jpg"
    }
  ], {
    playlistOptions: {
      enableRemoveControls: true,
      autoPlay: true
    },
    swfPath: "js/jPlayer",
    supplied: "webmv, ogv, m4v, oga, mp3",
    smoothPlayBar: true,
    keyEnabled: true,
    audioFullScreen: false
  });
  $(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer,  function(){
    $('.musicbar').removeClass('animate');
    $('.jp-play-me').removeClass('active');
    $('.jp-play-me').parent('li').removeClass('active');
  });

  $(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer,  function(){
    $('.musicbar').addClass('animate');
  });

  $(document).on('click', '.jp-play-me', function(e){
    e && e.preventDefault();
    var $this = $(e.target);
    if (!$this.is('a')) $this = $this.closest('a');

    $('.jp-play-me').not($this).removeClass('active');
    $('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

    $this.toggleClass('active');
    $this.parent('li').toggleClass('active');
    if( !$this.hasClass('active') ){
      myPlaylist.pause();
    }else{
      var i = Math.floor(Math.random() * (1 + 7 - 1));
      myPlaylist.play(i);
    }
   
  });

Как сделать чтобы плейлист брался из html?

<ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                      <li class="list-group-item">
                        <div class="pull-right m-l">
                          <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                          <a href="#" class="m-r-sm"><i class="icon-plus"></i></a>
                          <a href="#"><i class="icon-close"></i></a>
                        </div>
                        <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                        <div class="clear text-ellipsis">
                          <span>E.T.M</span>
                          <span class="text-muted"> -- 04:35</span>
                        </div>
                      </li>
                      <li class="list-group-item">
                        <div class="pull-right m-l">
                          <a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
                          <a href="#"><i class="icon-plus"></i></a>
                        </div>
                        <a href="#" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                        <div class="clear text-ellipsis">
                          <span>Vestibulum id ligula porta</span>
                          <span class="text-muted"> -- 04:15</span>
                        </div>
                      </li>
</ul>

 

[jusuf]

Я так понимаю нужна добавит дополнительный тег

<a class="info" mp3="http://flatfull.com/themes/assets/musics/adg3com_bustedchump.mp3" data-current="0" data-duration="216">ADG3 - Busted Chump</a>

 

[Q_BASIC]

Как-то так. Я не проверял, но должно работать

<div class="track" data-mp3="http://flatfull.com/themes/assets/musics/adg3com_bustedchump.mp3">
    <img class="poster" src="images/m0.jpg" />
    <span class="artist">группа Кино</span> - <span class="title">Звезда по имени Солнце</span>
</div>

<script type="text/javascript">

var playlist = [];

$('.track').each(function(index, element){
    playlist.push({
        title: $('.title', element).text(),
        artist: $('.artist', element).text(),
        mp3: $(element).attr('data-mp3'),
        poster: $('.poster', element).attr('src')
    });
});

</script>