#|vue使用 APlayer+Meting实现音乐播放，支持多平台音乐（网易云、腾讯、虾米、酷狗、百度）前端小白|前端|Vue

??我之前写过一篇博客：使用 APlayer 实现音乐播放器，虽然 APlayer 让我实现了想要的音乐播放器效果，但是音频列表 audio 的音频链接、音频封面、歌词等，是需要自己去补充的。
??那么这些数据从哪里来呢？
??我昨天有发愁一会儿会儿，也去搜了获取音乐列表的接口，可以发请求去获取数据嘛。
??也有瞅见MetingJS，A powerful plugin connect APlayer and Meting，一个连接APlayer和Meting的功能强大的插件，附上GitHub地址：https://github.com/metowolf/MetingJS
??废话不多说，我这里介绍一下APlayer + Meting是如何实现音乐播放的。
1、引入
??首先是引入，由于我这里是vue项目，所以我把下面的代码放在了项目的index.html里面。

="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js">="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js">

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

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

#|vue使用 APlayer+Meting实现音乐播放，支持多平台音乐（网易云、腾讯、虾米、酷狗、百度）

文章图片

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

3、在 vue 中使用 APlayer + Meting实现
??在引入时放入项目的index.html里面，然后安装一下APlayer，由于我在之前的博客：使用 APlayer 实现音乐播放器里已经安装过了，这里就不多说了。
??然后在要实现这个功能的页面文件引入

import APlayer from "APlayer";

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

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

> import APlayer from "APlayer"; export default { data() { return {}; }, mounted() { //创建一个音乐播放器实例，并挂载到DOM上 const ap = new APlayer({ container: document.getElementById("aplayer"), }); };

??这样就ok了，下面是结果图：

文章图片

??我项目里是封装了一个组件，fixed和listFolded的值是父组件穿传进去的，我是想着，个人博客的音乐页面直接展示，其他页面都fixed到左下角，并合上列表，所以传入这俩值。大家在使用时候可以根据自己需求调整。
4、MetingJS选项
【#|vue使用 APlayer+Meting实现音乐播放，支持多平台音乐（网易云、腾讯、虾米、酷狗、百度）】??MetingJS选项在它的GitHub地址里有，大家可以选择自己需要的进行配置，参数前面记得加上data-。