Lecteur audio pour l'application AngularJs

Question

Je construis un site de musique en utilisant AngularJs. Je ne suis pas en mesure de trouver un bon lecteur audio pour mon site Web. J'ai essayé quelques repos git, hors d'eux

https://github.com/videogular/videogular 

est assez bon. Mais même n'a pas la prochaine chanson/playlist précédente et la fonctionnalité de playlist.

Des suggestions pour un lecteur de musique ayant ces fonctionnalités? TIA!

EDIT: Toute idée sur l'utilisation JPlayer

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

Answer 1

Je l'ai utilisé dans une application MediaElement angulaire comme ceci:

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(); 
    }; 

})(); 

Pour mettre en œuvre suivante/précédente, vous pourriez probablement faire quelque chose comme ceci:

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>