npm 包 meting 使用教程

介绍

meting 是一个优秀的音乐播放器插件，它支持多个音乐平台，包括网易云音乐、QQ音乐、酷狗音乐、虾米音乐等。meting 通过 npm 包形式发布，可以很方便地在前端项目中使用。

安装

在使用 meting 前，首先需要将其安装到项目中。在命令行中输入如下命令：

--- ------- ------

使用

基本使用

安装完成后，在需要使用 meting 的页面中引入相应的文件：

----- ---------------- ------------------------------------------------
------- -------------------------------------------------------

接着，在需要展示音乐列表的位置添加如下代码：

---- ------------------

最后在 JS 中初始化 meting 并配置音乐源：

----- ------ - --- --------
    ---------- ----------
    ------- ----------
    ----- -----------
    --- ------------
--
-------------

其中，各配置项具体含义如下：

  • container: 音乐列表展示的位置，需要是一个 DOM 元素的选择器。
  • server: 音乐源，可选值包括 'netease'、'tencent'、'kugou'、'xiami'。
  • type: 音乐类型，可选值包括 'song'、'playlist'、'album'、'artist'。
  • id: 音乐的 id。

自定义设置

meting 还支持很多自定义设置，比如添加样式、更换音乐封面、调整音量等等。下面是一些常见的自定义设置示例：

更换素材

meting 支持更换默认的字体、图标和音量控制图标。需要将相应的资源文件拷贝到项目中的某一目录下，并在 js 中配置相应的路径：

----- ---------------- ----------------------------
------- ----------------------------------
----- ------ - --- --------
    ---------- ----------
    ----- ------
    ----- ------
    ------ -
        -
            ----- -------
            ------- ------
            ---- --------------------------------------------------------------
            ------ ---------------------------------------------------------------------------
            ---- -----------------------------------------------------
        -
    --
    ----------- -----
    -------------- ----
    ----------- -
        -
            ----- -------
            ------- ------
            ---- --------------------------------------------------------------
            ------ ---------------------------------------------------------------------------
            ---- -----------------------------------------------------
        -
    --
    ----- -
        ---- ---------------------------------
        -------- -------------------------------------
        ----- ----------------------------------
        ------- ------------------------------------
        --------- --------------------------------------
        ----- ----------------------------------
        ----- ----------------------------------
        ----- ----------------------------------
        ------ -----------------------------------
        ------- -----------------------------------
    -
--
-------------

调整样式

meting 可以根据需求调整样式。具体的方法是使用 .meting-* 类名，然后自定义相应的样式。比如，以下是一个样式调整示例：

----- ---------------- ---------------------------
----------------- -
    ------ -----
    ---------- -----
-
------------- -
    ------ ------
    ------- ------
    -------------- ----
-
---------------- -
    ------- ----
    ----------------- -----
    -------------- ----
-
---------------- -------------------- -
    ------- ----
    ----------------- -----
    -------------- ----
-
---------------- ----------------------- -
    ------- ----
    ----------------- -----
    -------------- ----
-
------------ -
    ---------- -----
-

深入学习

meting 是一个比较灵活的插件，需要深入了解它的源码。以下是一个简单的源码学习示例：

----- ------ -
    -------------------- -
        ------------ - ----------------- ---------------- --------
    -

    ------ -
        -- ------------------- -
            ------------------ - --------------
        -

        ------ --------------------- -
            ---- ----------
                --------------
                -----
            ---- ----------
                --------------
                -----
            ---- --------
                ------------
                -----
            ---- --------
                ------------
                -----
        -

        -------------
    -

    -------- -
        ----- - ---------- ----------- ------------- - - ------------

        ----- --------------- - ---------------------------------
        ----- -------------- - -----------------------------

        -------------------------------------------------
        -----------------------------------------------

        -- ------------- -
            ------------------------------------------------
        -

        ------------------------------ - --------------------

        -------------------------------------------

        -----------------
        ------------------
        ------------------
        --------------------
        -------------------
        ----------------
        ----------------
    -

    ------------ -
        ----- - ---------- - - ------------
        ----- -------------- - ------------------------------------------
        ----- ---------- - -----------------------------

        ---------------------------------------

        -------------------------- ------ -- -
            ----- ---------- - -----------------------------
            ----- -------------- - -----------------------------
            ----- ---------------- - -----------------------------

            ---------------------------------------
            ------------------------ - -----

            ------------------------------------------------
            ------------------------ - ----------
            ----------------------------------------------------
            -------------------------- - ------------

            --------------------------------------
            ----------------------------------------
            ----------------------------------
        --

        --------------------------------------
    -

    ------------- -
        ----- - ----- - - ------------
        ----- --------------- - -------------------------------------------
        ----- ----------- - -----------------------------

        -----------------------------------------

        ----------------------------------------

        -- ------- -
            --------------------------------- - ---------------
        -
    -

    ------------- -
        ----- - ----- - - ------------
        ----- --------------- - -------------------------------------------
        ----- ----------- - -------------------------------

        ---------------- - -----------------

        -- ------- -
            --------------- - ---------

            -- ------------- -
                ----------------- - -----------
            -

            -- -------------- -
                ------------------ - ------------
            -

            -- ----------- -
                -------------------------------------- ----------
            -
        -

        ----------------------------------------

        ----------------
    -

    --------------- -
        ----- - ----- - - ------------
        ----- --------------- - -------------------------------------------
        ----- ------------- - -----------------------------

        ---------------------------------------------

        ----- ---------- - --------------------------------
        ----- ---------- - --------------------------------
        ----- ---------- - --------------------------------

        --------------------------------------
        ---------------------------------------
        -------------------- - ----- ------------ ----------------------- ---------------------------------------------
        --------------------------------------
        ---------------------------------------
        -------------------- - ----- ------------ ----------------------- ---------------------------------------------
        --------------------------------------
        ---------------------------------------
        -------------------- - ----- ------------ ----------------------- ---------------------------------------------

        -- ------- -- ------------- -
            ----------------------------------- -----------
        -

        -------------------------------------
        -------------------------------------
        -------------------------------------

        ------------------------------------------
    -

    -------------- -
        ----- - ----- - - ------------
        ----- --------------- - -------------------------------------------
        ----- ------------ - -----------------------------

        -------------------------------------------

        ----- ---------- - --------------------------------
        ----- ---------------- - --------------------------------
        ----- --------------- - -----------------------------
        ----- -------------------- - -----------------------------
        ----- ----------------- - -----------------------------

        --------------------------------------
        ---------------------------------------
        -------------------- - ----- ------------ ----------------------- ------------------------------------------------
        --------------------------------------------
        ----------------------------------------------------
        -------------------------- - ----- ------------ ----------------------- -----------------------------------------------
        --------------------------------------------------
        ------------------------------------------------------------
        ------------------------------------------------------

        -------------------------------- - -------- - ------------ - --- - -----

        -------------------------------------------------
        ----------------------------------------------

        ------------------------------------
        ------------------------------------------
        -----------------------------------------

        -----------------------------------------

        -----------------
    -

    ----------- -
        ----- --------------- - -------------------------------------------
        ----- --------- - -----------------------------
        ----- ------------- - -----------------------------

        -------------------------------------
        ----------------------------------------------

        ------------------------------------
        --------------------------------------

        --------------
    -

    ----------- -
        ----- ----------- - -------------------------------
        ----- ---------- - --------------------------------------

        ------------------------------------ -- -- -
            -------------------- - ----- ------------ ----------------------- ----------------------------------------------
        --
        ------------------------------------- -- -- -
            -------------------- - ----- ------------ ----------------------- ---------------------------------------------
        --

        ------------------------------------ -- -- -
            -- -------------------- -
                ------------------
            - ---- -
                -------------------
            -
        --
    -

    ------------ -
        ----- ---------- - --------------------------------------
        ----- ---------------- - ---------------------------------------------
        ----- --------------- - --------------------------------------------
        ----- ----------------- - ----------------------------------------------

        --- ---- - -----
        --- ----- - -----

        ----- ---- - ------- -- -
            -- -------- -
                ------
            -

            ----- ----- - ---------------------------
            ----- ---- - ----------- - --------------------------
            ----- ------ - ---- - -----

            ---------------------------- - -----------
            -------------------------------- - --------- - ------
            ------------------------- - ------
        -

        ----- ---------- - -- -- -
            ---- - -----

            -- ------ -
                ----------------------------- - -------------------------
                ------------------------- - -
                -------------------------- - ----- ------------ ----------------------- ------------------------------------------------
            - ---- -
                ------------------------- - ----------------------------- -- ---
                -------------------------- - ----- ------------ ----------------------- -----------------------------------------------
            -

            ---------------------------- - ---------------------------- - ------
            -------------------------------- - ---------------------------- - ------
        -

        ------------------------------------ -----------

        ------------------------------------------ -- -- -
            ---- - -----
            ------------
        --

        --------------------------------------------- ------- -- -
            ----- - ----
            -----------
        --

        ------------------------------------ -- -- -
            ----- - -----
        --

        -------------------------------------- -----
    -

    --------- -
        ----- ------------- - ------------------------------------------
        ----- ----------- - -------------------------------

        ------------------------------------------ -- -- -
            ----- - --- - - ------------------

            --- -------
            --- -------

            --- ---- - - -- - - ----------- ---- -
                -- ------------------------ - ---------- -
                    -- -- --- ---------- - - -- -- - ---------- - - -- ----------------------- - ----- - ------- -
                        ------- - ---------
                        ------- - ---------

                        -----
                    -
                -
            -

            -- ---------- -
                ------
            -

            -- -------------------------- -- ------------------------- --- -------- -
                ------
            -

            ------------------------- - -------
            ----------------------- - --

            ---------------------------------- -- -
                ----- ------- - -----------------------------

                -- -------------- -
                    ------
                -

                ----------------- - -----------
                    ---------------------- -----
                    -------------------- ---
                    -------

                -- ------------------ - --- -
                    ---------------------------------------------
                -

                ----------------------------------
            --
        --
    -

    ----------- -
        ----- --------------- - -------------------------------------------
        ----- ---------- - --------------------------------------
        ----- -------------- - ------------------------------------------
        ----- ----------- - ---------------------------------------
        ----- ------------- - -----------------------------------------
        ----- ------------ - ----------------------------------------

        ----------------------------------------- ------- -- -
            ----- --------- - ----------------------

            -- ---------- --- -------------- -
                ----- ----- - --------------------------

                -- ------ --- ---------- -
                    ----------------
                -
            - ---- -- ---------- --- ---------------- -
                ----- -------- - -----------------------------------------------------

                -- ---------- -
                    ----------------------- - ------------------------------
                    ------------------------ - -
                    ------------------------------ - -------------------------- - ------
                    ---------------------------------------------------

                    ------------- -- -
                        ----------------------- - -----
                        ------------------------ - -
                    -- --
                - ---- -
                    ----------------------- - ------
                    ------------------------ - -
                    ------------------------------ - ---------------------------------
                    ------------------------------------------------

                    ------------- -- -
                        ----------------------- - ------------------------------
                        ------------------------ - -
                    --

------------------------------------------------------------------------------ ----------
-----------------------------------------------------------------------------------------------------------------------------
阅读全文

猜你喜欢

  • npm包react-form-blocks使用教程

    介绍 React-form-blocks是一个简单易用的React表单库，可以帮助开发者快速构建表单，提高开发效率。 安装 使用npm命令进行安装： --- ------- -------------...

    4 年前
  • npm 包 webpack-mpvue-vendor-plugin 使用教程

    什么是 webpack-mpvue-vendor-plugin？ webpack-mpvue-vendor-plugin 是一个 webpack 插件，可以帮助您在使用 mpvue 进行开发时，更好地...

    4 年前
  • npm包@adt/rpc-client使用教程

    在前端开发中，RPC（远程过程调用）通常用于解决跨系统和跨语言调用的问题。RPC客户端工具包是前后端调用过程中重要的一环。本文主要介绍npm包@adt/rpc-client，讲解如何使用它来实现RPC...

    4 年前
  • npm 包 eslint-plugin-ember-standard 使用教程

    简介 eslint-plugin-ember-standard 是一个 npm 包，它提供了一种用于 lint Ember.js 项目的 ESLint 配置。它的使用可以帮助开发者确保其 Ember....

    4 年前
  • npm 包 uglipop.js 使用教程

    在前端开发中，弹出框和模态框是常见的页面组件。为了方便开发，我们可以使用第三方库来实现这些组件，其中 uglipop.js 是一个轻量级的弹出框和模态框库，本文将介绍如何使用 uglipop.js。

    4 年前
  • npm 包 @tjoussen/browser-soap 使用教程

    如果你需要在浏览器端使用 SOAP 服务，那么 @tjoussen/browser-soap 是一个不错的选择。此 npm 包允许在客户端上生成 SOAP 访问器，并提供了一些功能强大的工具来与 SO...

    4 年前
  • npm 包 test-travis-npm 使用教程

    作为前端开发者，你是否遇到过在开发过程中需要测试你的 npm 包并探索如何实现自动化测试？这个时候，test-travis-npm 的出现会是一个非常好的解决方案。

    4 年前
  • NPM 包 Vue-idb-multiversion 使用教程

    前言 在前端开发中，我们经常需要使用本地的数据库进行数据存储。IndexedDB API 是一种本地数据库解决方案，它可以在 Web 应用程序中存储和检索大量结构化数据。

    4 年前
  • npm 包 ima8-vue-js-grid 使用教程

    在前端开发中，网格系统是一个必不可少的工具。ima8-vue-js-grid 是一个旨在帮助开发者更快速、更方便地构建响应式网格系统的 Vue.js 组件。 本文将介绍 ima8-vue-js-gri...

    4 年前
  • npm 包 js-root-toast 使用教程

    在前端开发工作中，我们经常需要使用一些提示框来向用户展示信息。为了方便快捷地实现提示框的功能，我们可以使用一些已经开发好的 npm 包。本文将介绍一款名为 js-root-toast 的 npm 包的...

    4 年前
  • npm 包 vue-seat 使用教程

    在前端开发中，如果需要实现一个座位选择的功能，我们可以使用一个叫做 vue-seat 的 npm 包。vue-seat 是一个基于 Vue.js 的座位选择器组件，用于帮助我们快速和方便地实现座位选择...

    4 年前
  • npm 包 bdparrish.leaflet.pancontrol 使用教程

    前言 随着互联网的发展和普及，前端开发变得越来越重要。前端工程师必须学习各种库和框架，以提高开发效率和用户体验。本文将介绍一个非常实用的 npm 包 - bdparrish.leaflet.panco...

    4 年前
  • npm 包 connected-react-router-history 使用教程

    在前端开发中，路由是非常重要的一部分，它可以方便地实现页面之间的跳转和状态管理。而 connected-react-router 是一个非常好用的 React 路由库，它可以将 React 应用中的路...

    4 年前
  • npm 包 karma-chai-string 使用教程

    在前端开发中，我们经常需要对字符串进行一些判断和处理操作。而 karma-chai-string 就是一个可以帮助我们进行字符串断言的工具。本文将介绍如何使用 karma-chai-string 进行...

    4 年前
  • npm 包 keystone-storage-adapter-cloud-storage 使用教程

    在开发过程中，我们经常需要使用云存储来存储用户上传的文件和图片。针对此类使用场景，npm 社区中有一个名为 keystone-storage-adapter-cloud-storage 的 npm 包...

    4 年前
  • npm 包 @remie/sqs 使用教程

    介绍 @remie/sqs 是一个 Node.js 的 Amazon Web Services (AWS) SQS (Simple Queue Service) 的封装库。

    4 年前
  • npm 包 react-styled-ui 使用教程

    介绍 react-styled-ui 是一个基于 React 和 Styled Components 的组件库，旨在提供一些常用的 UI 组件并保持易于扩展和风格定制。

    4 年前
  • npm 包 getscreenmedia 使用教程

    前言 随着现代前端开发技术的不断发展，我们已经无需依赖于传统的摄像头和麦克风等硬件设备来实现视频会议以及互动交流等功能。实际上，我们可以通过一些 npm 包，如 getscreenmedia，轻松实现...

    4 年前
  • npm 包 angular-steps 使用教程

    简介 angular-steps 是一个基于 AngularJS 的步骤控件，可以帮助用户在多个步骤之间进行导航。它易于使用，并且可以很好地扩展和自定义。 安装和配置 前置要求 在开始使用 angul...

    4 年前
  • npm 包 react-immutable-jss-data-table 使用教程

    引言 在前端开发中，数据展示组件是必不可少的一部分。而随着需求的增加，传统的数据展示方式往往不能满足我们的需求。这时候，我们就需要寻找一种更为高效和灵活的方式来展示数据。

    4 年前

相关推荐

    暂无文章