Jplayer или HTML5 audio?

Question

[Роман Калингер]

Здравствуйте. Пишу сайт музыкальной направленности. На сайте есть проигрыватель на основе Jplayer. Необходимо сделать следующее:
1. При навигации по сайту , музыка не должна прерываться(Сайт не должен перезагружаться).
- Данный пункт решился динамической подгрузкой данных через ajax, а сам проигрыватель вынесен в header сайта.
2. Когда песня закончилась , должна запуститься следующая.

- Этот пункт реализован с помощью костыля:
Так выглядит разметка композиций

<div class="audios-block" data-url="/data/Architects-AlphaOmega.mp3" data-autor="Architects" data-track="Alpha Omega" data-time="" data-idgroup="" data-cover="http://a1.mzstatic.com/us/r30/Music3/v4/44/03/93/44039317-38a1-0ecb-fa02-b927afb05420/cover1200x1200.jpeg"> 
                                 <div class="audios-block-img">
                                   <img src="http://a1.mzstatic.com/us/r30/Music3/v4/44/03/93/44039317-38a1-0ecb-fa02-b927afb05420/cover1200x1200.jpeg" alt="audios">
                                     <div class="audios-block-img-play" data-num="1"><i class="fa fa-play"></i></div>
                                 </div> 
                                 <div class="audios-block-name">
                                     <span>ARCHITECTS -</span> Alpha Omega 
                                 </div>
                                 <div  class="audios-block-jp-play-bar"></div> 
                             </div>

Затем я собираю дата атрибуты и создаю массив объектов

function initAudio(element){
    var trackList=[]; 
    element.each( function(){   
        thisTrack={"url":$(this).attr('data-url'),"autor":$(this).attr('data-autor'),"track":$(this).attr('data-track'),"time":$(this).attr('data-time'),"idgroup":$(this).attr('data-idgroup'),"cover":$(this).attr('data-cover')};
        trackList.push(thisTrack);   
     } 
    );
    
    return trackList;
}

И передаю список треков и номер трека с которого начинать воспроизведение

function audioPlayer(trackList,num,obj,button){ 
    //получаем audios-block переданного элемента и добавляем туда progress
    var childrenProgress=$(obj).children(".audios-block-jp-play-bar");
    $('.jp-progress').clone(true,true).appendTo(childrenProgress);
    
  //запускаем проигрыватель и передаем ему песню из трек листа    
  $("#jquery_jplayer_1").jPlayer({ 
     ready: function () {
              $("#jquery_jplayer_1").jPlayer("clearMedia");
         
               //устанавливаем и запускаем
               $(this).jPlayer("setMedia", {
                mp3: trackList[Number(num)].url, 
               }).jPlayer("play");
                    
                   //передаем обложку альбома и прочую информацию проигрывателю      
                   $('.name-group').text(trackList[num].autor);
                   $('.name-track').text(trackList[num].track);
                   $('.open-all-player').attr("src",trackList[num].cover);
                   $('.open-all-player').attr("data-open",'1'); 
          
    },
    swfPath: "/library/JPlayer/",
    supplied: "mp3",
	keyEnabled: true,
	ended:function(){
       
       $("#jquery_jplayer_1").jPlayer("clearMedia");
       //удаляем прогресс и переключаем на паузу    
       $(".audios-block-jp-play-bar").remove();
       $(button).click();
           
       if(Number(trackList.length)<=Number(num)&&Number(num)>=0){   
           
               $(this).jPlayer("setMedia", {
               mp3: trackList[Number(num)+1].url, 
               }).jPlayer("play");
           
               $('.name-group').text(trackList[Number(num)+1].autor);
               $('.name-track').text(trackList[Number(num)+1].track);
               $('.open-all-player').attr("src",trackList[Number(num)+1].cover);
           
           num++;
       }
        
	}, 
  });
}

3. При запуске песни у нее должен появиться управляемый progress bar , а кнопки play и pause в песне должны быть связаны с кнопками проигрывателя .
- С этим пунктом большие проблемы. В документации Jplayer вычитал , что нельзя создавать копии элементов проигрывателя. Пришлось опять прибегнуть к костылям и ковырять саму библиотеку.

//dublicate seekbar
    $('.audios-block-jp-play-bar .jp-seek-bar').css('width',this.status.seekPercent+"%");  
    this.css.jq.seekBar.length&&this.css.jq.seekBar.width(this.status.seekPercent+"%");
    
    //dublicate playbar 
    $('.audios-block-jp-play-bar .jp-play-bar').css('width',this.status.currentPercentRelative+"%");  
    this.css.jq.playBar.length&&this.css.jq.playBar.width(this.status.currentPercentRelative+"%");

Таким образом мне удалось сделать неуправляемую копию progress bar. Как передать события я пока не разобрался.
С кнопками тоже можно сделать костыли.
4. Когда запустилась песня при нажатии на обложку альбома раскрывается информация про артиста
Здесь есть TOP треков данного артиста. При нажатии на трек он должен воспроизвестись и переключиться на следующий трек в данном списке когда закончится.
- Данный пункт впринципи не сложно реализовать. Так же собрать массив элементов и передать в проигрыватель.

Пройдя по всем этим пунктам у меня возник вопрос стоит ли дальше ковырять Jplayer и писать костыли, или же написать плеер с нуля?Есть ли альтернатива jPlayer в которой можно создавать копии элементов проигрывателя?