在前端开发过程中，有时我们需要通过 Web 页面来展示音频或者视频，而 aplayer-controller 是一个非常优秀的 npm 包，可以帮助我们实现这一需求。
aplayer-controller 简介
aplayer-controller 是一个基于 Aplayer 的 Vue.js 2.x 组件，它提供了一个播放器控制器。通过该组件我们可以直接在 Web 页面上实现一个音频控制器，用户可以在页面上播放、暂停甚至拖动进度等操作。
除此之外，aplayer-controller 也支持自定义按钮和歌单列表，并提供了非常友好的 API，可以帮助我们实现更多的自定义需求。
安装 aplayer-controller
安装 aplayer-controller 非常简单，只需在项目中执行以下命令：
--- ------- ------------------ ------
使用 aplayer-controller
使用 aplayer-controller 只需几步即可。
引入 aplayer-controller
在项目需要的组件中引入 AplayerController，如下所示：
----------
-----
------------------- ------------- --
------
-----------
--------
------ ----------------- ---- --------------------
------ ------- -
----------- -
-----------------
--
-------- -
--------- -- -
-------------------------
-
-
-
---------配置 aplayer-controller
在使用 aplayer-controller 前，我们需要先配置一些必要的参数，如下所示：
----------
-----
-------------------
-------------
------------------
--------------------
------------
-----------------
--
------
-----------
--------
------ ----------------- ---- --------------------
------ ------- -
----------- -
-----------------
--
---- -- -
------ -
-------- -
------ -
-
----- ------
------- ------
---- -------------------------------------------
------ ---------------------------------------------------------------------------------------
-
--
--
--------- -
----- ------
------ -------
------ -
-
----- ------
------- ------
---- -------------------------------------------
------ ---------------------------------------------------------------------------------------
-
-
-
-
--
-------- -
--------- -- -
-------------------------
-
-
-
---------其中，options 参数可以配置音频信息，包括名称、演唱者、音频地址和封面等。而 songList 则是可选的歌单列表。
调用 aplayer-controller 上的方法
aplayer-controller 上提供了许多 API，可以帮助我们实现更多的自定义需求，比如播放、暂停、上/下一首歌曲、设置音量等。以下是一些常用的方法。
-- ---- ------------------------- -- ---- -------------------------- -- ----- ------------------------- -- ----- ------------------------- -- ---- --------------------------------
示例代码
假设我们需要展示两首音乐并提供一个播放按钮，以下是示例代码：
----------
-----
------------------- ------------- ------------------ ------------ ----------------- --
------- ------------------------------
------
-----------
--------
------ ----------------- ---- --------------------
------ ------- -
----------- -
-----------------
--
---- -- -
------ -
-------- -
------ -
-
----- ------
------- ------
---- -------------------------------------------
------ ---------------------------------------------------------------------------------------
--
-
----- ------
------- ------
---- ------------------------------------------
------ -------------------------------------------------------------------------------------
-
--
-
-
--
-------- -
--------- -- -
-------------------------
-
-
-
---------总结
通过本文我们学习了如何使用 aplayer-controller 来实现一个播放器控制器，并且展示了如何配置参数和调用 API。希望大家通过本文可以更好地了解 aplayer-controller，并且可以将其应用到自己的项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fcf81e8991b448dd583