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

我之前写过一篇博客：使用 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里面。

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

2、基本使用

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

<meting-jsserver="netease"type="playlist"id="60198">
</meting-js>

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

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

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

3、在 vue 中使用 `APlayer + Meting`实现

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

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

然后是我的<template></template>标签里的代码：

<divid="aplayer"data-id="3778678"data-server="netease"data-type="playlist"data-fixed="false"data-listFolded="false"data-autoplay="false"data-loop="all"data-order="list"
></div>

然后是<script></script>标签里的代码：

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

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

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

4、`MetingJS`选项

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