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

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

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

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

  也有瞅见MetingJSA powerful plugin connect APlayer and Meting,一个连接APlayerMeting的功能强大的插件,附上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>

  servertypeid这三个参数是必须有的。

  其中,server指的是平台名称,netease是网易;tencent是腾讯;xiami是虾米;kugou是酷狗;baidu是百度。
  type指的是类型,playlist是歌单;song是单曲;album是专辑;search是关键词;artist是歌手。
  id指的是音乐页面链接上的id,比如下图所示的id
vue使用 APlayer+Meting实现音乐播放,支持多平台音乐:网易云、腾讯、虾米、酷狗、百度_第1张图片

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

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

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

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

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

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

  这样就ok了,下面是结果图:
vue使用 APlayer+Meting实现音乐播放,支持多平台音乐:网易云、腾讯、虾米、酷狗、百度_第2张图片
  我项目里是封装了一个组件,fixedlistFolded的值是父组件穿传进去的,我是想着,个人博客的音乐页面直接展示,其他页面都fixed到左下角,并合上列表,所以传入这俩值。大家在使用时候可以根据自己需求调整。

4、MetingJS选项

  MetingJS选项在它的GitHub地址里有,大家可以选择自己需要的进行配置,参数前面记得加上data-
vue使用 APlayer+Meting实现音乐播放,支持多平台音乐:网易云、腾讯、虾米、酷狗、百度_第3张图片

你可能感兴趣的:(#,Vue,前端小白,前端)