Vue中使用 Aplayer 和 Metingjs 添加音乐插件

1、Aplayer和Metingjs 的文档

Aplayer官网文档
Metingjs官网文档

2、使用方式

• 在 public 目录下的 index.html 中引入核心依赖

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

• 在需要使用的地方直接引入核心组件

这里以 app.vue 为例，放在这里可以全局生效

<template>
  <div id="app">
    <meting-js server="tencent" type="playlist" id="8574171521" fixed="true" autoplay="true" loop="all" order="list"
      preload="auto" list-folded="true" list-max-height="500px" lrc-type="1">
    </meting-js>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
    // HeadNav
  }
}
</script>

<style>
</style>

• 使用技巧
  • 如果需要该音乐插件全局都能生效，可以将这个组件放置在 app.vue 下，这样不管怎样切换页面都能够播放音乐
  • 如果需要局部生效，则将该组件放置在需要生效的组件中即可
• 使用效果如下：

• 部分参数说明：

  • server：指的是音乐播放平台，我这里选择的是 tencent (QQ音乐)
  • type：音乐播放的形式(单曲，歌单列表等等)，我这里选择的是 playlist ，即歌单类型
  • id：歌单的id
  • fixed：底部固定模式
  • theme：修改主题颜色

• 获取音乐外链，这里以QQ音乐为例：

  • 找到自己喜欢的歌单选择分享，然后复制链接

  备注：在 我喜欢 中的音乐也可以一键导出歌单

• 复制的音乐链接如下：

https://c.y.qq.com/base/fcgi-bin/u?__=sgoH6AlUf9VF

可以看到，这个链接好像没有我们想要的歌单id，不要着急，只需要将复制的链接用浏览器打开就能够的得到我们想要的播放类型和歌单id了

通过浏览器打开链接，我们在浏览器地址栏得到以下地址：

https://y.qq.com/n/ryqq/playlist/8574171521

这次我们就能够得到想要的播放类型和歌单id了，我们可以看到播放类型为 playlist,歌单id为 8574171521

将得到的参数赋值给我们之前引入的 组件

至此我们就完成了一个基本的音乐播放插件的使用了

3、完整API

option	default	description
id (编号)	require	song id / playlist id / album id / search keyword
server (平台)	require	music platform: netease, tencent, kugou, xiami, baidu
type (类型)	require	song, playlist, album, search, artist
auto (支持种类)	options	music link, support: netease, tencent, xiami
fixed (固定底部模式)	false	enable fixed mode
mini (模式)	false	enable mini mode
autoplay (自动播放)	false	audio autoplay
theme (主题颜色)	#2980b9	main color
loop (循环播放)	all	player loop play, values: ‘all’, ‘one’, ‘none’
order (顺序)	list	player play order, values: ‘list’, ‘random’
preload (加载)	auto	values: ‘none’, ‘metadata’, ‘auto’
volume (声量)	0.7	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutex (限制)	true	prevent to play multiple player at the same time, pause other players when this player start play
lrc-type (歌词)	0	lyric type
list-folded (列表折叠)	false	indicate whether list should folded at first
list-max-height (最大高度)	340px	list max height
storage-name (存储名称)	metingjs	localStorage key that store player setting

选项	默认	描述
id	要求	歌曲ID/播放列表ID/专辑ID/搜索关键字
server	要求	音乐平台：netease, tencent, kugou, xiami,baidu
type	要求	song, playlist, album, search, artist
auto	选项	音乐链接，支持：netease,tencent``xiami
fixed	false	启用固定模式
mini	false	开启迷你模式
autoplay	false	音频自动播放
theme	#2980b9	主色
loop	all	播放器循环播放，值：‘all’、‘one’、‘none’
order	list	播放器播放顺序，值：‘list’，‘random’
preload	auto	值：“无”、“元数据”、“自动”
volume	0.7	默认音量，注意播放器会记住用户设置，用户自己设置音量后默认音量将失效
mutex	true	防止同时播放多个播放器，当该播放器开始播放时暂停其他播放器
lrc-type	0	抒情类型
list-folded	false	指示列表是否应首先折叠
list-max-height	340px	音乐列表最大高度
storage-name	metingjs	存储播放器设置的 localStorage 键

4、总结

1. 首先在 index.html 引入核心依赖
2. 然后在 app.vue 中引入核心组件(此处位置依据个人需求引入)
3. 选择自己喜欢的音乐平台复制歌单链接获得歌单id
4. 将得到的歌单id或歌曲id还有播放类型赋值给核心组件
5. 如果想要实现高度定制化，则可以通过 Vue 中的 v-bind 指令来动态修改组件中参数的值，这里只是介绍一下基本实现思路和效果

5、最后的话

如果觉得有帮助的话，点赞收藏加关注，你的支持就是我的动力