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-js
	server="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>标签里的代码：

<div
  id="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-。