Аудиоплеер для приложения AngularJs

Question

Я строю музыкальный сайт, используя AngularJs. Я не могу найти хорошего аудиоплеера для своего сайта. Я пробовал несколько git repos, из них

https://github.com/videogular/videogular 

довольно хорошо. Но даже не имеет функции воспроизведения следующей и предыдущей песни и воспроизведения.

Любые предложения для музыкального плеера, обладающего этими функциями? ТИА!

EDIT: Любая идея об использовании JPlayer

https://github.com/happyworm/jPlayer ? 

Answer 1

Я использовал MediaElement в угловом приложение, как это:

index.html

<audio id="player6" width="100%" height="30" src="/path/to/media.mp3"> 

initMediaElement .js

(function() { 

    'use strict'; 

    angular 

    .module('My-Module') 
    .factory('initMediaElement', initMediaElement); 


    function initMediaElement (mediaElementResize) { 

     return { 

     init: function() { 

      var player6 = new MediaElementPlayer('#player6',{ 
      success: function (mediaElement, domObject) { 
       mediaElementResize.resize(); 
       mediaElement.addEventListener('play', function() { 
       $('.header-pagination .next').show(); 
       $('.footer-pagination .next').show(); 
       }, false); 
      } 
      }); 
     } 
     }; 

    } 
})(); 

controller.js

(function() { 

    'use strict'; 

    angular 

     .module('My-Module') 
     .controller('module1', module1); 

    module1Page1.$inject = ['initMediaElement']; 

    function module1(initMediaElement) { 
     initMediaElement.init(); 
    }; 

})(); 

Для реализации следующего/пред, вы, вероятно, сделать что-то вроде этого:

HTML

<audio id="mejs" src="track1.mp3" type="audio/mp3" controls></audio> 
<ul class="mejs-list"> 
    <li id="track1.mp3">Track1</li> 
    <li id="track2.mp3">Track2</li> 
    <li id="track3.mp3">Track3</li> 
</ul> 

JS

<script> 
     $(function(){ 
      $('audio').mediaelementplayer({ 
       success: function (mediaElement, domObject) { 
        mediaElement.addEventListener('ended', function (e) { 
         mejsPlayNext(e.target); 
        }, false); 
       }, 
       keyActions: [] 
      }); 

      $('.mejs-list li').click(function() { 
       $(this).addClass('current').siblings().removeClass('current'); 
       var audio_src = this.id; 
       $('audio#mejs:first').each(function(){ 
        this.player.pause(); 
        this.player.setSrc(audio_src); 
        this.player.play(); 
       }); 
      }); 

     }); 

     function mejsPlayNext(currentPlayer) { 
      if ($('.mejs-list li.current').length > 0){ // get the .current song 
       var current_item = $('.mejs-list li.current:first'); // :first is added if we have few .current classes 
       var audio_src = $(current_item).next().text(); 
       $(current_item).next().addClass('current').siblings().removeClass('current'); 
       console.log('if '+audio_src); 
      }else{ // if there is no .current class 
       var current_item = $('.mejs-list li:first'); // get :first if we don't have .current class 
       var audio_src = $(current_item).next().text(); 
       $(current_item).next().addClass('current').siblings().removeClass('current'); 
       console.log('elseif '+audio_src); 
      } 

      if($(current_item).is(':last-child')) { // if it is last - stop playing 
       $(current_item).removeClass('current'); 
      }else{ 
       currentPlayer.setSrc(audio_src.match('http.*\.mp3')); 
       currentPlayer.play(); 
      } 
     } 
     </script>