Audio player for AngularJs application

Question

I'm building a music website using AngularJs. I'm not able to find a good audio player for my website. I've tried few git repos, out of them

https://github.com/videogular/videogular

is pretty good. But even doesn't have next/previous song play and playlist functionality.

Any suggestions for a music player having these functionalities? TIA!

EDIT: Any idea about using JPlayer

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

Answer 1

I've used MediaElement in an angular app like this:

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

})();

To implement next/prev, you could probably do something like this:

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>