介绍
meting 是一个优秀的音乐播放器插件，它支持多个音乐平台，包括网易云音乐、QQ音乐、酷狗音乐、虾米音乐等。meting 通过 npm 包形式发布，可以很方便地在前端项目中使用。
安装
在使用 meting 前，首先需要将其安装到项目中。在命令行中输入如下命令：
npm install meting
使用
基本使用
安装完成后，在需要使用 meting 的页面中引入相应的文件：
<link rel="stylesheet" href="/node_modules/meting/dist/Meting.min.css"> <script src="/node_modules/meting/dist/Meting.min.js"></script>
接着，在需要展示音乐列表的位置添加如下代码：
<div id="meting"></div>
最后在 JS 中初始化 meting 并配置音乐源：
const meting = new Meting({
container: '#meting',
server: 'netease',
type: 'playlist',
id: '2734422047'
})
meting.init()其中，各配置项具体含义如下：
container: 音乐列表展示的位置，需要是一个 DOM 元素的选择器。server: 音乐源，可选值包括'netease'、'tencent'、'kugou'、'xiami'。type: 音乐类型，可选值包括'song'、'playlist'、'album'、'artist'。id: 音乐的 id。
自定义设置
meting 还支持很多自定义设置，比如添加样式、更换音乐封面、调整音量等等。下面是一些常见的自定义设置示例：
更换素材
meting 支持更换默认的字体、图标和音量控制图标。需要将相应的资源文件拷贝到项目中的某一目录下，并在 js 中配置相应的路径：
<link rel="stylesheet" href="/css/meting-icon.css"> <script src="/js/meting-icon.js"></script>
-- -------------------- ---- -------
----- ------ - --- --------
---------- ----------
----- ------
----- ------
------ -
-
----- -------
------- ------
---- --------------------------------------------------------------
------ ---------------------------------------------------------------------------
---- -----------------------------------------------------
-
--
----------- -----
-------------- ----
----------- -
-
----- -------
------- ------
---- --------------------------------------------------------------
------ ---------------------------------------------------------------------------
---- -----------------------------------------------------
-
--
----- -
---- ---------------------------------
-------- -------------------------------------
----- ----------------------------------
------- ------------------------------------
--------- --------------------------------------
----- ----------------------------------
----- ----------------------------------
----- ----------------------------------
------ -----------------------------------
------- -----------------------------------
-
--
-------------调整样式
meting 可以根据需求调整样式。具体的方法是使用 .meting-* 类名，然后自定义相应的样式。比如，以下是一个样式调整示例：
<link rel="stylesheet" href="/css/meting.min.css">
-- -------------------- ---- -------
----------------- -
------ -----
---------- -----
-
------------- -
------ ------
------- ------
-------------- ----
-
---------------- -
------- ----
----------------- -----
-------------- ----
-
---------------- -------------------- -
------- ----
----------------- -----
-------------- ----
-
---------------- ----------------------- -
------- ----
----------------- -----
-------------- ----
-
------------ -
---------- -----
-深入学习
meting 是一个比较灵活的插件，需要深入了解它的源码。以下是一个简单的源码学习示例：
-- -------------------- ---- -------
----- ------ -
-------------------- -
------------ - ----------------- ---------------- --------
-
------ -
-- ------------------- -
------------------ - --------------
-
------ --------------------- -
---- ----------
--------------
-----
---- ----------
--------------
-----
---- --------
------------
-----
---- --------
------------
-----
-
-------------
-
-------- -
----- - ---------- ----------- ------------- - - ------------
----- --------------- - ---------------------------------
----- -------------- - -----------------------------
-------------------------------------------------
-----------------------------------------------
-- ------------- -
------------------------------------------------
-
------------------------------ - --------------------
-------------------------------------------
-----------------
------------------
------------------
--------------------
-------------------
----------------
----------------
-
------------ -
----- - ---------- - - ------------
----- -------------- - ------------------------------------------
----- ---------- - -----------------------------
---------------------------------------
-------------------------- ------ -- -
----- ---------- - -----------------------------
----- -------------- - -----------------------------
----- ---------------- - -----------------------------
---------------------------------------
------------------------ - -----
------------------------------------------------
------------------------ - ----------
----------------------------------------------------
-------------------------- - ------------
--------------------------------------
----------------------------------------
----------------------------------
--
--------------------------------------
-
------------- -
----- - ----- - - ------------
----- --------------- - -------------------------------------------
----- ----------- - -----------------------------
-----------------------------------------
----------------------------------------
-- ------- -
--------------------------------- - ---------------
-
-
------------- -
----- - ----- - - ------------
----- --------------- - -------------------------------------------
----- ----------- - -------------------------------
---------------- - -----------------
-- ------- -
--------------- - ---------
-- ------------- -
----------------- - -----------
-
-- -------------- -
------------------ - ------------
-
-- ----------- -
-------------------------------------- ----------
-
-
----------------------------------------
----------------
-
--------------- -
----- - ----- - - ------------
----- --------------- - -------------------------------------------
----- ------------- - -----------------------------
---------------------------------------------
----- ---------- - --------------------------------
----- ---------- - --------------------------------
----- ---------- - --------------------------------
--------------------------------------
---------------------------------------
-------------------- - ----- ------------ ----------------------- ---------------------------------------------
--------------------------------------
---------------------------------------
-------------------- - ----- ------------ ----------------------- ---------------------------------------------
--------------------------------------
---------------------------------------
-------------------- - ----- ------------ ----------------------- ---------------------------------------------
-- ------- -- ------------- -
----------------------------------- -----------
-
-------------------------------------
-------------------------------------
-------------------------------------
------------------------------------------
-
-------------- -
----- - ----- - - ------------
----- --------------- - -------------------------------------------
----- ------------ - -----------------------------
-------------------------------------------
----- ---------- - --------------------------------
----- ---------------- - --------------------------------
----- --------------- - -----------------------------
----- -------------------- - -----------------------------
----- ----------------- - -----------------------------
--------------------------------------
---------------------------------------
-------------------- - ----- ------------ ----------------------- ------------------------------------------------
--------------------------------------------
----------------------------------------------------
-------------------------- - ----- ------------ ----------------------- -----------------------------------------------
--------------------------------------------------
------------------------------------------------------------
------------------------------------------------------
-------------------------------- - -------- - ------------ - --- - -----
-------------------------------------------------
----------------------------------------------
------------------------------------
------------------------------------------
-----------------------------------------
-----------------------------------------
-----------------
-
----------- -
----- --------------- - -------------------------------------------
----- --------- - -----------------------------
----- ------------- - -----------------------------
-------------------------------------
----------------------------------------------
------------------------------------
--------------------------------------
--------------
-
----------- -
----- ----------- - -------------------------------
----- ---------- - --------------------------------------
------------------------------------ -- -- -
-------------------- - ----- ------------ ----------------------- ----------------------------------------------
--
------------------------------------- -- -- -
-------------------- - ----- ------------ ----------------------- ---------------------------------------------
--
------------------------------------ -- -- -
-- -------------------- -
------------------
- ---- -
-------------------
-
--
-
------------ -
----- ---------- - --------------------------------------
----- ---------------- - ---------------------------------------------
----- --------------- - --------------------------------------------
----- ----------------- - ----------------------------------------------
--- ---- - -----
--- ----- - -----
----- ---- - ------- -- -
-- -------- -
------
-
----- ----- - ---------------------------
----- ---- - ----------- - --------------------------
----- ------ - ---- - -----
---------------------------- - -----------
-------------------------------- - --------- - ------
------------------------- - ------
-
----- ---------- - -- -- -
---- - -----
-- ------ -
----------------------------- - -------------------------
------------------------- - -
-------------------------- - ----- ------------ ----------------------- ------------------------------------------------
- ---- -
------------------------- - ----------------------------- -- ---
-------------------------- - ----- ------------ ----------------------- -----------------------------------------------
-
---------------------------- - ---------------------------- - ------
-------------------------------- - ---------------------------- - ------
-
------------------------------------ -----------
------------------------------------------ -- -- -
---- - -----
------------
--
--------------------------------------------- ------- -- -
----- - ----
-----------
--
------------------------------------ -- -- -
----- - -----
--
-------------------------------------- -----
-
--------- -
----- ------------- - ------------------------------------------
----- ----------- - -------------------------------
------------------------------------------ -- -- -
----- - --- - - ------------------
--- -------
--- -------
--- ---- - - -- - - ----------- ---- -
-- ------------------------ - ---------- -
-- -- --- ---------- - - -- -- - ---------- - - -- ----------------------- - ----- - ------- -
------- - ---------
------- - ---------
-----
-
-
-
-- ---------- -
------
-
-- -------------------------- -- ------------------------- --- -------- -
------
-
------------------------- - -------
----------------------- - --
---------------------------------- -- -
----- ------- - -----------------------------
-- -------------- -
------
-
----------------- - -----------
---------------------- -----
-------------------- ---
-------
-- ------------------ - --- -
---------------------------------------------
-
----------------------------------
--
--
-
----------- -
----- --------------- - -------------------------------------------
----- ---------- - --------------------------------------
----- -------------- - ------------------------------------------
----- ----------- - ---------------------------------------
----- ------------- - -----------------------------------------
----- ------------ - ----------------------------------------
----------------------------------------- ------- -- -
----- --------- - ----------------------
-- ---------- --- -------------- -
----- ----- - --------------------------
-- ------ --- ---------- -
----------------
-
- ---- -- ---------- --- ---------------- -
----- -------- - -----------------------------------------------------
-- ---------- -
----------------------- - ------------------------------
------------------------ - -
------------------------------ - -------------------------- - ------
---------------------------------------------------
------------- -- -
----------------------- - -----
------------------------ - -
-- --
- ---- -
----------------------- - ------
------------------------ - -
------------------------------ - ---------------------------------
------------------------------------------------
------------- -- -
----------------------- - ------------------------------
------------------------ - -
--
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------