angularjs - AngularJs 应用程序的音频播放器

Question

我正在使用 AngularJs 构建一个音乐网站。我无法为我的网站找到好的音频播放器。我已经尝试了几个 git repos，其中包括

https://github.com/videogular/videogular

很好。但即使没有下一首/上一首歌曲播放和播放列表功能。

对具有这些功能的音乐播放器有什么建议吗？蒂亚!

编辑:关于使用 JPlayer 的任何想法

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

Answer 1

我用过 MediaElement在这样的 Angular 应用程序中:

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>