handle JavaScript plugin through angular js

Question

I am new to AngularJS. I am developing a music app through AngularJS.

For HTML5 player I am using this: https://github.com/DIYgod/APlayer.

How to wrap aplyer inside angular so i only call directive to initialise player.

ex- INIT PLAYER

<div id="player1" class="aplayer"></div>

JS

var ap = new APlayer({
    element: document.getElementById('player1'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: true,                                                    // Optional, autoplay song(s), not supported by mobile browsers
    showlrc: 0,                                                        // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
    mutex: true,                                                       // Optional, pause other players when this player playing
    theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
    mode: 'random',                                                    // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    listmaxheight: '513px',                                             // Optional, max height of play list
    music: {                                                           // Required, music info, see: ###With playlist
        title: 'Preparation',                                          // Required, music title
        author: 'Hans Zimmer/Richard Harvey',                          // Required, music author
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',  // Required, music url
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg',  // Optional, music picture
        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'                   // Optional, lrc, see: ###With lrc
    }
});

I am trying to use it by directive and pass template as

<div id="player1" class="aplayer"></div>

but I don't know how to add Aplayer JS to Angular.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You can initialize APlayer in a directive this way.

Use either <div class="aplayer"></div> or <div aplayer></div>

Attributes are declared using kebab-case in html code but you have to use camelCase to access them in directive code.

Note: data prefix is not required here. It's only used to prevent native html attribute collision.

(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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 8, 2017 at 8:54

Stephane Janicaud

3,7051 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stephane Janicaud Over a year ago

You're welcome. I've added some code to show how to use element attributes as player args.

Mihir Kumar Thakur Over a year ago

Hi stej4n could you please guide me how to give APlayer music parameter through json. or click on a button and APlayer should play music fetched by json API. basically dynamically add music params fetched from json

Stephane Janicaud Over a year ago

@MihirKumarThakur checkout my answer here stackoverflow.com/questions/43931310/…

Collectives™ on Stack Overflow

handle JavaScript plugin through angular js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related