通过 Angular js 处理 APlayer - 动态播放音乐答案

【问题标题】：handle APlayer through angular js - play music dynamically通过 Angular js 处理 APlayer - 动态播放音乐
【发布时间】：2017-05-12 07:00:59
【问题描述】：

我是 Angular js 的新手 - 尝试使用 Aplayer 构建音频播放

任务：- 1.动态播放音乐 2.点击相册获取json数据并添加到播放器

(function() {
      'use strict';
    
      angular.module('app', []);
    
      angular
      .module('app')
      .directive('aplayer', aplayer);
    
      function aplayer() {
        return {
          restrict: 'AC',
          link: function(scope, element, attrs) {
            // `element` is the angular element the directive is attached to 
            // APlayer need the native one
            var nativeElement = element[0];
            var ap1 = new APlayer({
              element: nativeElement,
              narrow: false,
              autoplay: true,
              showlrc: false,
              mutex: true,
              theme: '#e6d0b2',
              preload: 'metadata',
              mode: 'circulation',
              music: {
                title: attrs["playerTitle"],
                author: attrs["playerAuthor"],
                url: attrs["playerUrl"],
                pic: attrs["playerPic"]
            }
        });
            ap1.on('play', function() {
              console.log('play');
          });
            ap1.on('play', function() {
              console.log('play play');
          });
            ap1.on('pause', function() {
              console.log('pause');
          });
            ap1.on('canplay', function() {
              console.log('canplay');
          });
            ap1.on('playing', function() {
              console.log('playing');
          });
            ap1.on('ended', function() {
              console.log('ended');
          });
            ap1.on('error', function() {
              console.log('error');
          });
    
        }
    };
    }
    
    })();

<!doctype html>

<html lang="en" ng-app="app">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.6.0/APlayer.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="aplayer" 
       data-player-title="Preparation" 
       data-player-author="Hans Zimmer/Richard Harvey" 
       data-player-url="http://devtest.qiniudn.com/Preparation.mp3"
       data-player-pic="http://devtest.qiniudn.com/Preparation.jpg"></div>
</body>

</html>

如何在点击专辑时将音乐文件动态传递给播放器。

【问题讨论】：

标签： javascript angularjs angular angularjs-directive angularjs-scope

【解决方案1】：

根据Player源代码，不能动态替换音乐曲目或播放列表。 API 仅公开setMusic 方法，允许在音乐播放列表中选择曲目索引。

要显示您的专辑，您需要先使用将调用您的tracks API的服务加载它们。

加载后，您可以将它们注入到您的 player 指令中并选择要播放的曲目的索引。

这是一个带有 :

的示例 sn-p

一个 musicService 来处理您的音乐库
一个 TrackController 来加载和显示您的音乐库
修改后的 player 指令，用于处理曲目和当前曲目索引

注意：我在此演示中使用来自 Free Music Archive 的免费音乐。

(function() {
  'use strict';

  angular.module('app', []);

  angular
    .module('app')
    .factory('musicService', ['$timeout', musicService])
    .controller('TracksController', ['$scope', 'musicService', TracksController])
    .directive('aplayer', aplayer);


  function musicService($timeout) {
    return {
      loadTracks: function() {
        // Simulate a 1500 ms $http api call
        return $timeout(function() {
          return [{
              title: 'Procrastinating in the Sun',
              author: 'The Spin Wires',
              url: 'https://freemusicarchive.org/music/download/e7fee95c2d7f7b1ea8d4260850a6128842eb85a4',
              pic: 'https://freemusicarchive.org/file/images/artists/The_Spin_Wires_-_20170510154106040.jpg?width=290&height=290'
            },
            {
              title: 'осоле',
              author: 'Kosta T',
              url: 'https://freemusicarchive.org/music/download/0e4d722be7bd7ca334970b5407b3e5654b95f7a2',
              pic: 'https://freemusicarchive.org/file/images/tracks/Track_-_2017050264944176?method=crop&width=290&height=290'
            }
          ];
        }, 1500);


      }
    }
  }

  function TracksController($scope, musicService) {

    $scope.loadingTracks = true;
    $scope.showPlayer = false;

    musicService.loadTracks()
      .then(function(tracks) {
        // Once tracks are loaded, update scope
        $scope.tracks = tracks;
        $scope.loadingTracks = false;
      });

    $scope.play = function(trackIndex) {
      $scope.trackIndex = trackIndex;
      $scope.showPlayer = true;
    }
  }


  function aplayer() {
    return {
      restrict: 'AC',
      scope: {
        tracks: '=',
        trackIndex: '='
      },
      link: link
    };

    function link(scope, element, attrs) {

      var player = new APlayer({
        narrow: true,
        mode: "order",
        music: scope.tracks
      });

      // Watch for trackIndex changes
      scope.$watch(
        function(scope) {
          // Return the "result" of the watch expression as it's more efficient
          // @see http://www.bennadel.com/blog/2852-understanding-how-to-use-scope-watch-with-controller-as-in-angularjs.htm
          return scope.trackIndex;
        },
        function(currentIndex, previousIndex) {
          // As currentIndex is an integer, if(0) equals if(false)
          // But we can use a regular expression to check it's an integer
          if (/\d/.test(currentIndex)) {
            player.setMusic(parseInt(currentIndex));
            player.play();
          }
        });

    }
  }

})();

<!doctype html>

<html lang="en" ng-app="app">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.6.0/APlayer.min.js"></script>
  <style>
    ul li {
      list-style-type: none;
    }
    
    ul li * {
      vertical-align: middle
    }
  </style>
</head>

<body ng-controller="TracksController">

  <div ng-if="loadingTracks">Loading tracks, please wait...</div>
  <ul>
    <li ng-repeat="track in tracks">
      <img ng-src="{{track.pic}}" width="64" height="64">
      <button ng-click="play($index)">Play</button> {{track.author}} / {{track.title}}
    </li>
  </ul>

  <div ng-if="tracks && showPlayer">
    <h2>Now playing</h2>
    <div>{{tracks[trackIndex].author}} / {{tracks[trackIndex].title}}</div>

    <div class="aplayer" data-tracks="tracks" data-track-index="trackIndex"></div>
  </div>

</body>

</html>

【讨论】：