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

将得到的参数赋值给我们之前引入的 <meting-js></meting-js> 组件

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

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、总结

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

5、最后的话

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

Vue中使用 Aplayer 和 Metingjs 添加音乐插件相关推荐

博客添加音乐插件、网站运行时间、文章阅读次数和网站访客统计
今天为博客增加了音乐播放插件.博客页脚网站安全运行时间.文章阅读次数以及网站访客统计的功能,接下来进行详细介绍. 博客音乐插件的使用本博客使用的音乐播放插件为hexo-tag-aplayer ...
前端页面添加音乐插件
1.Aplayer搭配Metingjs音乐插件的使用 Aplayer和MetingJ的介绍 Aplayer官网文档:https://aplayer.js.org/#/ Metingjs官网文档:htt ...
vue中使用openlayers离线地图添加标点（二）
接上一篇初始化地图文章很多时候我们不只是需要单纯的看地图,那就太没意思了,当有标点位需求的时候呢就可以往下看啦. 1.需要引入标点所需的方法这里替换上篇文章的引入即可 import 'ol/ol. ...
vue中给window对象上添加属性的方法
web页面通讯方法.window.open打开新页面,父子页面通讯的方法最直接的就是获取对方的window对象进行调用父子各自得属性及方法. 下面是整理的几种通讯得方法仅供参考第一种 // 第一种方 ...
vue中使用指令给按钮添加节流
一.在utils中封装节流函数 import Vue from 'vue'const preventReClick = Vue.directive('preventReClick', {inserte ...
Vue中使用vue-particles（粒子背景）插件美化登录页面
使用方法: 1.安装插件 npm install vue-particles --save-dev yarn add vue-particles 2.在main.js文件中全局引入 import Vu ...
vue中划词选中后高亮显示web-highlighter插件
web-highlighter 插件安装:npm i web-highlighter 使用: import Highlighter from 'web-highlighter'; const hig ...
博客园添加背景音乐以及播放器或在左下方固定位置添加音乐播放器给你的博文锦上添花，增姿添彩
官方教程:https://aplayer.js.org/#/zh-Hans/ 一.第一种样式这种你想添加多少音乐就添加多少音乐! 将下方代码复制到博客侧边栏! 话不多说! 上代码! <!-- ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
在Vue中使用JSX，很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...

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