Helpex - Trao đổi & giúp đỡ Đăng nhập
4

Tôi đang xây dựng một trang web âm nhạc bằng AngularJs. Tôi không thể tìm thấy trình phát âm thanh tốt cho trang web của mình. Tôi đã thử một vài git repo, trong số chúng

https://github.com/videogular/videogular

là khá tốt. Nhưng thậm chí không có chức năng chơi và danh sách bài hát tiếp theo / trước đó.

Bất kỳ đề xuất nào cho một máy nghe nhạc có các chức năng này? TIA!

CHỈNH SỬA: Bất kỳ ý tưởng nào về việc sử dụng JPlayer

https://github.com/happyworm/jPlayer ?
4 hữu ích 5 bình luận 5.3k xem chia sẻ
1

Tôi đã sử dụng MediaElement trong một ứng dụng góc cạnh như thế này:

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

})();

Để thực hiện tiếp theo / trước, bạn có thể có thể làm một cái gì đó như thế này:

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>
1 hữu ích 2 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ angularjs html5-audio jplayer audio player videogular , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading