我之前写过一篇博客：使用 APlayer 实现音乐播放器，虽然 APlayer 让我实现了想要的音乐播放器效果，但是音频列表 audio 的音频链接、音频封面、歌词等，是需要自己去补充的。

  那么这些数据从哪里来呢？

  我昨天有发愁一会儿会儿，也去搜了获取音乐列表的接口，可以发请求去获取数据嘛。

  也有瞅见MetingJS，A powerful plugin connect APlayer and Meting，一个连接APlayer和Meting的功能强大的插件，附上GitHub地址：https://github.com/metowolf/MetingJS

  废话不多说，我这里介绍一下APlayer + Meting是如何实现音乐播放的。

  首先是引入，由于我这里是vue项目，所以我把下面的代码放在了项目的index.html里面。

  然后是使用。官网上给的基本使用方式是下面这样的。

  server、type、id这三个参数是必须有的。

  其中，server指的是平台名称，netease是网易；tencent是腾讯；xiami是虾米；kugou是酷狗；baidu是百度。   type指的是类型，playlist是歌单；song是单曲；album是专辑；search是关键词；artist是歌手。   id指的是音乐页面链接上的id，比如下图所示的id

  那么，在vue项目中，是如何使用 APlayer + Meting实现的呢？

  在引入时放入项目的index.html里面，然后安装一下APlayer，由于我在之前的博客：使用 APlayer 实现音乐播放器里已经安装过了，这里就不多说了。

  然后在要实现这个功能的页面文件引入import APlayer from "APlayer";，

  然后是我的标签里的代码：

  然后是标签里的代码：

  这样就ok了，下面是结果图：   我项目里是封装了一个组件，fixed和listFolded的值是父组件穿传进去的，我是想着，个人博客的音乐页面直接展示，其他页面都fixed到左下角，并合上列表，所以传入这俩值。大家在使用时候可以根据自己需求调整。

  MetingJS选项在它的GitHub地址里有，大家可以选择自己需要的进行配置，参数前面记得加上data-。