个人中心
gpt4 book ai didi

javascript - 通过 Angular js 处理 JavaScript 插件

转载 作者：行者123 更新时间：2023-12-01 03:41:28 26 4
gpt4 key购买 nike

我是 AngularJS 新手。我正在通过 AngularJS 开发一个音乐应用程序。

对于 HTML5 播放器，我使用这个:https://github.com/DIYgod/APlayer .

如何将 aplyer 包裹在 Angular 中，这样我只调用指令来初始化播放器。

前初始化播放器

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

我正在尝试通过指令使用它并将模板传递为

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

但我不知道如何将 Aplayer JS 添加到 Angular。

最佳答案

您可以通过这种方式在指令中初始化 APlayer。

使用 <div class="aplayer"></div>或<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>

关于javascript - 通过 Angular js 处理 JavaScript 插件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43843165/

26 4 0
文章推荐： javascript - Controller 作为语法 Angularjs 不起作用
文章推荐： jquery - Kendo UI Grid 使特定行不可选择
文章推荐： javascript - Aurelia.js 按下按钮时更改文本值
文章推荐： javascript - 如何关闭app.use(express.static ('/public' )); express js
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com