通過angular js處理JavaScript插件

我是AngularJS的新手。我正在通過AngularJS開發音樂應用程序。通過angular js處理JavaScript插件

對於HTML5播放器，我使用的是：https://github.com/DIYgod/APlayer。

如何將aplyer包裹在角度內，所以我只能調用指令來初始化播放器。

EX- INIT PLAYER

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

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

我試圖通過指令來使用它，通過模板

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

，但我不知道該怎麼添加Aplayer JS到Angular。

來源

2017-05-08 Mihir Kumar Thakur

您可以用這種方式在指令中初始化APlayer。

二者必選其一<div class="aplayer"></div>或<div aplayer></div>

屬性是使用HTML代碼串情況的聲明，但你必須使用駝峯來訪問這些指令代碼。

注：data前綴在這裏不是必需的。它僅用於防止原生html屬性衝突。

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

來源

2017-05-08 08:54:29

感謝你讓我 –

不客氣的一天。我添加了一些代碼來展示如何使用元素屬性作爲玩家參數。 –

嗨stej4n你能指導我如何通過json給APlayer音樂參數。或者點擊一個按鈕，APlayer應該播放由json API獲取的音樂。基本上動態添加json提取音樂參數 –

通過angular js處理JavaScript插件

回答

相關問題